node+express+socket.io制作一个聊天室功能
首先是下载包:
npm install express
npm install socket.io
建立文件:
服务器端代码:server.js
var http=require("http");
var express=require("express");
var sio=require("socket.io");
var app=express();
app.use(express.static(__dirname+"/"));
var server=http.createServer(app);
app.get("/", function (req, res) {
res.sendFile(__dirname+"/chart.html");
});
server.listen(1337,"127.0.0.1", function () {
console.log("开始监听");
});
var io=sio.listen(server);
var names=[];
io.sockets.on("connection", function (socket) {
socket.on("login", function (name) {
for(var i=0;i<names.length;i++){
if(names[i]==name){
socket.emit("duplicate");
return;
}
}
names.push(name);
io.sockets.emit("login",name);
io.sockets.emit("sendClients",names);
});
socket.on("chat", function (data) {
io.sockets.emit("chat",data);
});
socket.on("logout", function (name) {
for(var i=0;i<names.length;i++){
if(names[i]==name){
names.splice(i,1);
break;
}
}
socket.broadcast.emit("logout",name);
io.sockets.emit("sendClients",names);
});
});
静态页面 chart.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Socket.IO聊天室</title>
<link rel="stylesheet" href="chart.css" />
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="chart.js"></script>
</head>
<body onload="window_onload()">
<h1>Socket.IO聊天室</h1>
<div id="divContainer1">
<table class="tbDlg" border="0" cellpadding="3" cellspacing="0" width="100%">
<tr class="trDlg">
<td class="tdDlg" width="5">
用户名:
<input id="tbxUsername" type="text" value="游客" size="20" />
<input id="btnLogin" type="button" value="登录" onclick="btnLogin_onclick();" />
<input id="btnLogout" type="button" value="退出" disabled onclick="btnLogout_onclick();" />
</td>
</tr>
</table>
</div>
<div id="divLeft">
<div id="divchat"></div>
<div id="divContainer3">
<table class="tbDlg" border="0" cellpadding="3" cellspacing="0" width="100%">
<tr class="trDlg">
<td valign="top" class="tdDlg" nowrap>对话</td>
<td valign="top" class="tdDlg">
<textarea id="tbxMsg" cols="255" rows="5" style="width: 100%"></textarea>
</td>
<td valign="top" class="tdDlg">
<input id="btnSend" type="button" value="发送" disabled onclick="btnSend_onclick();" />
</td>
</tr>
</table>
</div>
</div>
<div id="divRight">用户列表:</div>
</body>
</html>
静态css文件:
h1{
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 14pt;
color: #006bb5;
background-color: #f0f0f0;
border-radius: 5px;
border: 1px solid #f0f0f0;
padding: 5px;
margin: 0 0 18px 0;
}
div[id^=divContainer]{
border:;
margin: 10px 0;
padding: 3px;
background-color:#f0f0f0;
border-radius: 5px;
}
div#divLeft{
width: 85%;
background-color:#f0f0f0;
float: left;
}
div#divRight{
width: 15%;
background-color:white;
float: right;
font-weight: bold;
font-size: 12px;
}
div#divchat{
border:;
margin: 10px 0;
padding: 3px;
background-color:#f0f0f0;
border-radius: 5px;
position: relative;
height: 300px;
overflow: auto;
font-size: 12px;
}
table.tbDlg{
font-family:Verdana,Helvetica,sans-serif;
font-weight: normal;
font-size: 12px;
background-color: #f0f0f0;
}
tr.trDlg,td.tdDlg {
background-color: #f0f0f0;
font-size: 10px;
}
textarea{
font-family: inherit;
font-size: 10pt;
border:1px solid #444;
background-color:white;
width: 100%;
}
input[type="button"]{
font-family: inherit;
border: 1px solid #808080;
border-radius: 10px;
margin: 1px;
color: white;
background-color:#81a0b5;
width: 100px;
}
input[type="button"]:hover{
margin: 1px;
background-color: #006bb5;
}
input[type="button"]:active{
margin: 1px;
font-weight: bold;
background-color:#006bb5;
}
input[type="button"]:focus{
margin:;
font-weight: bold;
background-color:#006bb5;
}
静态js文件
var userName,//用户登录到socket.io聊天室中时所使用的用户名
socket,//与聊天服务器连接的socket端口对象
tbxUsername,//用户名文本框
tbxMsg,//对话文本框
divChat;//页面中显示消息区域
function window_onload(){
divChat=document.getElementById("divchat");
tbxUsername=document.getElementById("tbxUsername");
tbxMsg=document.getElementById("tbxMsg");
tbxUsername.focus();
tbxUsername.select();
} function AddMsg(msg){
divChat.innerHTML+=msg+"<br>";
if(divChat.scrollHeight>divChat.clientHeight)
divChat.scrollTop=divChat.scrollHeight-divChat.clientHeight;
}
function btnLogin_onclick(){
if(tbxUsername.value.trim()==""){
alert("请输入用户名");
return;
}
userName=tbxUsername.value.trim();
socket=io.connect();
socket.on("connect",function(){
AddMsg("与聊天服务器的连接已建立.");
socket.on("login", function (name) {
AddMsg("欢迎用户"+name+"进入聊天室.");
});
socket.on("sendClients", function (names) {
var divRight=document.getElementById("divRight");
var str="";
names.forEach(function (name) {
str+=name+"<br />";
});
divRight.innerHTML="用户列表<br />";
divRight.innerHTML+=str;
});
socket.on("chat", function (data) {
AddMsg(data.user+"说:"+data.msg);
});
socket.on("disconnect", function () {
AddMsg("与聊天服务器的连接已断开.");
document.getElementById("btnSend").diabled=true;
document.getElementById("btnLogout").disabled=true;
document.getElementById("btnLogin").disabled="";
var divRight=document.getElementById("divRight");
divRight.innerHTML="用户列表";
});
socket.on("logout", function (name) {
AddMsg("用户"+name+"已退出聊天室.")
});
socket.on("duplicate", function () {
alert("该用户名已被使用.");
document.getElementById("btnSend").disabled=true;
document.getElementById("btnLogout").disabled=true;
document.getElementById("btnLogin").disabled="";
});
}); socket.on("error", function (err) {
AddMsg("与聊天服务器之间的链接发生错误.");
socket.disconnect();
socket.removeAllListeners("connect");
io.sockets={};
});
socket.emit("login",userName);
document.getElementById("btnSend").disabled="";
document.getElementById("btnLogout").disabled="";
document.getElementById("btnLogin").disabled=true;
} function btnSend_onclick(){
var msg=tbxMsg.value;
if(msg.length>0){
socket.emit("chat",{user:userName,msg:msg});
tbxMsg.value="";
}
}
function btnLogout_onclick(){
socket.emit("logout",userName);
socket.disconnect();
socket.removeAllListeners("connect");
io.sockets={};
AddMsg("用户"+userName+"退出聊天室:");
var divRight=document.getElementById("divRight");
divRight.innerHTML="用户列表";
document.getElementById("btnSend").disabled="disabled";
document.getElementById("btnLogout").disabled="disabled";
document.getElementById("btnLogin").disabled="";
}
最终界面
可以多开几个浏览器进行测试.这样效果更佳.
node+express+socket.io制作一个聊天室功能的更多相关文章
- Express+Socket.IO 实现简易聊天室
代码地址如下:http://www.demodashi.com/demo/12477.html 闲暇之余研究了一下 Socket.io,搭建了一个简易版的聊天室,如有不对之处还望指正,先上效果图: 首 ...
- 利用socket.io构建一个聊天室
利用socket.io来构建一个聊天室,输入自己的id和消息,所有的访问用户都可以看到,类似于群聊. socket.io 这里只用来做一个简单的聊天室,官网也有例子,很容易就做出来了.其实主要用的东西 ...
- AngularJS+Node.js+socket.io 开发在线聊天室
所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍 ...
- Node.js下基于Express + Socket.io 搭建一个基本的在线聊天室
一.聊天室简单介绍 采用nodeJS设计,基于express框架,使用WebSocket编程之 socket.io机制.聊天室增加了 注册登录模块 ,并将用户个人信息和聊天记录存入数据库. 数据库采用 ...
- 使用socket.io打造公共聊天室
最近的计算机网络课上老师开始讲socket,tcp相关的知识,当时脑袋里就蹦出一个想法,那就是打造一个聊天室.实现方式也挺多的,常见的可以用C++或者Java进行socket编程来构建这么一个聊天室. ...
- NodeJS+Express+Socket.io的一个简单例子
关键字:NodeJS,Express,Socket.io. OS:Windows 8.1 with update pro. 1.安装NodeJS:http://nodejs.org/. 2.初始化一个 ...
- node+express+socket.io+mysql=通讯服务器搭建（一）
首发github/blog 欢迎大家评论给星 安装 首先假定你已经安装了 Node.js,接下来为你的应用创建一个目录,然后安装express-generator应用骨架 $ mkdir node-d ...
- Socket.io文字直播聊天室的简单代码
直接上代码吧,被注释掉的主要是调试代码,和技术选型的测试代码 var app = require('express')(); var server = require('http').Server(a ...
- 【Java】学习路径55-练习:制作一个聊天室(多线程、UDP、双向传输数据)
创建四个类,实现双向聊天的功能. 接收线程: import java.io.IOException; import java.net.*; public class ReceiveThread imp ...
随机推荐
- GNU C 、ANSI C、标准C、标准c++区别和联系
转载自点击打开链接 GNU计划,又称革奴计划,是由Richard Stallman在1983年9月27日公开发起的.它的目标是创建一套完全自由的操作系统.它在编写linux的时候自己制作了一个标准成为 ...
- select2如何设置默认空值
1.问题背景 select2搜索下拉框,当满足某种条件时,让它默认选中空值 2.问题原因 <!DOCTYPE html> <html> <head> <met ...
- Unity喷墨效果Shader实现
笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D实战核心技术详解 ...
- C# ListBox 子项数据更新
今天在倒腾ListBox控件的数据编辑时,遇到了一个小小的问题,现在就把解决方法记录下来,如果各位道友有更好的方法,一定要留言赐教. 问题还原: 有一个界面,有这么一个ListBox用来显示所有的角色 ...
- PHP循环嵌套例子
循环嵌套1.实现如下效果:第一行第二行第三行第四行第五行1 2 3 4 51 2 3 4 51 2 3 4 51 2 3 4 52.实现如下效果图:第一行第二行第三行第四行第五行1 2 3 4 56 ...
- axios如何使用
我们知道,vue2.0以后,vue就不再对vue-resource进行更新,而是推荐axios,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 1.安装axios cnpm ...
- SQL查询执行步骤
1.总结 执行顺序 3.select ...聚合函数 from 表名 1.where ... 2.group by ... 4.having ... 5.order by ... 6.limit .. ...
- ubuntu16.04LTS 64位 下载influxdb
wget https://dl.influxdata.com/influxdb/releases/influxdb_1.2.0_amd64.deb sudo dpkg -i influxdb_1.2. ...
- Ubuntu12.04中Gvim无法固定到启动器的解决办法
sudo vim /usr/share/applications/gvim.desktop 修改Categories键值如下: Categories=Application;Development;
- linux python 图形编程 qt开发环境搭建
我的系统是 ubuntu14.04 我们使用的是python2.7,建议安装qt4+pyqt4+eric4 eric是pyqt的界面设计器的代码生成软件. 1.安装sip 这个是python和qt之间 ...