最近在研究直播 需要做一个webIM 聊天的功能 找到了这个socket.io
从 http://www.plhwin.com/2014/05/28/nodejs-socketio/ 和 socket.io官网 https://socket.io/get-started/chat/ 学到很多 ， 下面的代码也是基于这两篇文章，感谢 他们让我学到新的知识
搭建聊天室 首先需要一个用nodeJs 搭建的server
第一步：
在任意一个位置创建一个 文件夹 ，一会要将js、html等文件放在其中 我创建的是chat文件夹。
第二步：
要把运行node的环境搭好，上node官网 下载一个，安装上 就可以了，
一切准备就绪后打开 node.js command prompt 也就是那个黑的框框 ，进入到你当前的工作路径， 我的是D:mychat
第三步：
在你刚刚创建的目录下 创建一个index.js,搭建node server，代码如下：
var express = require('express'); var app = express(); var http = require('http').Server(app); app.get('/', function(req, res){ res.send("hello"); }); http.listen(3001, function(){ console.log('listening on *:3001'); });
完成 之后再 node command 里运行 node index.js ,会提醒让安装 express 模块 再 运行 npm install --save express 即可 ，安装成功之后 在运行 node index.js 会出现如下界面 ：
证明成功，在浏览器运行 http://127.0.0.1:3001/ 会出现 hello
第四步：创建index.html ，搭建聊天页面
代码如下：
<!doctype html> <html> <head> <title>Socket.IO chat</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 13px Helvetica, Arial; } .send { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } .send input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } .send button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } #messages li:nth-child(odd) { background: #eee; } .user{width: 100%; background-color:#c2c2c2; margin-bottom: 5px;min-height: 40px; line-height: 30px} .user div,.service div{float: left; font-size: 18px; } .user span,.service span{float: left; font-size: 16px; } .service{width: 100%; background-color:#c4c4c4; margin-bottom: 5px;min-height: 40px; line-height: 30px} </style> </head> <body> <div id="chatbox" > <div style="background:#3d3d3d;height: 28px; 100%;font-size:12px;"> <div style="line-height: 28px;color:#fff;"> <span style="text-align:left;margin-left:10px;">多人聊天室</span> <span style="float:right; margin-right:10px;"><span id="showusername"></span> </div> </div> <ul id="messages"> <div id="onlinecount" style="background:#EFEFF4; font-size:12px; margin-top:10px; margin-left:10px; color:#666;"> </div> </ul> <div class="send"> <input id="m" autocomplete="off" /><button onclick="chat.submit()">Send</button> </div> <script src="/socket.io/socket.io.js"></script> <script src="https://code.jquery.com/jquery-1.11.1.js"></script> <script src="client.js"></script> </body> </html>
第五步：完善index.js 加入socket.io模块，会遇到安装模块的提示 ，安装即可， 完整代码如下：
var express = require('express'); var app = express(); var http = require('http').Server(app); var io = require('socket.io')(http);
//在html 页面引入css，js 需要放在public 目录下 ，express.static 来设置静态文件如：图片， CSS, JavaScript等 app.use(express.static('public')); app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); //在线用户 var onlineUsers = {}; //当前在线人数 var onlineCount = 0; io.on('connection', function(socket){ // console.log('a user connected'); //监听新用户加入 socket.on('login', function(obj){ //将新加入用户的唯一标识当作socket的名称，后面退出的时候会用到 socket.name = obj.username; //检查在线列表，如果不在里面就加入 if(!onlineUsers.hasOwnProperty(obj.username)) { onlineUsers[obj.username] = obj.username; //在线人数+1 onlineCount++; } //向所有客户端广播用户加入 io.emit('login', {onlineUsers:onlineUsers, onlineCount:onlineCount, user:obj}); console.log(obj.username+'加入了聊天室'); }); //监听用户退出 socket.on('disconnect', function(){ //将退出的用户从在线列表中删除 if(onlineUsers.hasOwnProperty(socket.name)) { //退出用户的信息 var obj = { username:onlineUsers[socket.name]}; //删除 delete onlineUsers[socket.name]; //在线人数-1 onlineCount--; //向所有客户端广播用户退出 io.emit('logout', {onlineUsers:onlineUsers, onlineCount:onlineCount, user:obj}); console.log(obj.username+'退出了聊天室'); } }); socket.on('message', function(msg){ io.emit('message', msg); }); }); io.emit('some event', { for: 'everyone' }); http.listen(3000, function(){ console.log('listening on *:3000'); });
第六步：是写client.js ,这里面主要是有发送消息，监听发送消息、更新系统消息等，这个代码是是http://www.plhwin.com/2014/05/28/nodejs-socketio/ 这个写的 ，谢谢大神的提供：
var chat = { msgObj:document.getElementById("messages"), username:null, socket:null, //让浏览器滚动条保持在最低部 scrollToBottom:function(){ window.scrollTo(0, this.msgObj.clientHeight); }, //提交聊天消息内容 submit:function(){ var content = document.getElementById("m").value; if(content != ''){ var obj = { username: this.username, content: content }; chat.socket.emit('message', obj); document.getElementById("m").value = ''; } }, init:function(){ /* 客户端根据时间和随机数生成uid,这样使得聊天室用户名称可以重复。 实际项目中，如果是需要用户登录，那么直接采用用户的uid来做标识就可以 */ this.username = this.genUid(); document.getElementById("showusername").innerHTML = this.username; document.getElementById("messages").style.minHeight = (this.screenheight - document.body.clientHeight + this.msgObj.clientHeight) + "px"; this.scrollToBottom(); //连接websocket后端服务器 this.socket = io.connect('ws://127.0.0.1:3000'); //告诉服务器端有用户登录 this.socket.emit('login', { username:this.username}); //监听新用户登录 this.socket.on('login', function(o){ chat.updateSysMsg(o, 'login'); }); //监听用户退出 this.socket.on('logout', function(o){ chat.updateSysMsg(o, 'logout'); }); //监听消息发送 this.socket.on('message', function(obj){ var isme = (obj.username == chat.username) ? true : false; var contentDiv = '<div>'+obj.content+'</div>'; var usernameDiv = '<span>'+obj.username+'说</span>'; var section = document.createElement('section'); if(isme){ section.className = 'user'; section.innerHTML = usernameDiv + contentDiv ; } else { section.className = 'service'; section.innerHTML = usernameDiv + contentDiv; } chat.msgObj.appendChild(section); chat.scrollToBottom(); }); }, //更新系统消息，本例中在用户加入、退出的时候调用 updateSysMsg:function(o, action){ //当前在线用户列表 var onlineUsers = o.onlineUsers; //当前在线人数 var onlineCount = o.onlineCount; //新加入用户的信息 var user = o.user; //更新在线人数 var userhtml = ''; var separator = ''; for(key in onlineUsers) { if(onlineUsers.hasOwnProperty(key)){ userhtml += separator+onlineUsers[key]; separator = '、'; } } document.getElementById("onlinecount").innerHTML = '当前共有 '+onlineCount+' 人在线，在线列表：'+userhtml; //添加系统消息 var html = ''; html += '<div class="msg-system">'; html += user.username; html += (action == 'login') ? ' 加入了聊天室' : ' 退出了聊天室'; html += '</div>'; var section = document.createElement('section'); section.className = 'system J-mjrlinkWrap J-cutMsg'; section.innerHTML = html; this.msgObj.appendChild(section); this.scrollToBottom(); }, genUid:function(){ return new Date().getTime()+""+Math.floor(Math.random()*899+100); } }; window.chat = chat; chat.init();
这样就基本完成了聊天的搭建，在浏览器运行 http://127.0.0.1:8084/index.html就可以聊天了，效果入下：
这样聊天室就基本完成了
谢谢 大神的代码，让我学习很多 http://www.plhwin.com/2014/05/28/nodejs-socketio/ 和 socket.io官网 https://socket.io/get-started/chat/