node.js+socket.io创建web聊天室

最近在研究直播需要做一个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:\my\chat

第三步：

在你刚刚创建的目录下创建一个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; width: 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就可以聊天了，效果入下：