搭建基于node.js的聊天室

发表于   |   分类于   |  

前言

初学node.js 想做个聊天室 在互联网上漫游阅读了很多文章，也依样画葫芦开始搭建自己的聊天室。
这个聊天室是基于express框架和socket.io通信库搭建的。
这也是在socket.io官网的例子的基础上进行的修改的。

官网例子
我的修改版源码

什么是socket.io

socket.io就是对Websocket的封装,并且实现了Websocket的服务端代码,在WebSocket没有出现之前，实现与服务端的实时通讯可以通过轮询来完成任务.。Socket.io将Websocket和轮询（Polling）机制以及其它的实时通信方式封装成了通用的接口，并且在服务端实现了这些实时机制的相应代码。也就是说，Websocket仅仅是Socket.io实现实时通信的一个子集。

那么，Socket.io都实现了Polling中的那些通信机制呢？

  • Adobe® Flash® Socket
  • AJAX long polling
  • AJAX multipart streaming
  • Forever Iframe
  • JSONP Polling

Adobe® Flash® Socket 大部分PC浏览器都支持的socket模式，不过是通过第三方嵌入到浏览器，不在W3C规范内，所以可能将逐步被淘汰，况且，大部分的手机浏览器都不支持这种模式。

AJAX long polling 这个很好理解，所有浏览器都支持这种方式，就是定时的向服务器发送请求，缺点是会给服务器带来压力并且出现信息更新不及时的现象。

AJAX multipart streaming 这是在XMLHttpRequest对象上使用某些浏览器（比如说Firefox）支持的multi-part标志。Ajax请求被发送给服务器端并保持打开状态（挂起状态），每次需要向客户端发送信息，就寻找一个挂起的的http请求响应给客户端，并且所有的响应都会通过统一连接来写入。

Forever Iframe （永存的Iframe）技术涉及了一个置于页面中的隐藏Iframe标签，该标签的src属性指向返回服务器端事件的servlet路径。每次在事件到达时，servlet写入并刷新一个新的script标签，该标签内部带有JavaScript代码，iframe的内容被附加上这一script标签，标签中的内容就会得到执行。这种方式的缺点是接和数据都是由浏览器通过HTML标签来处理的，因此你没有办法知道连接何时在哪一端已被断开了，并且Iframe标签在浏览器中将被逐步取消使用。

JSONP Polling JSONP轮询基本上与HTTP轮询一样，不同之处则是JSONP可以发出跨域请求，详细请搜索查询jsonp的内容。

socket.io中emit和on的用法

socket.emit(‘action’);表示发送了一个action命令，命令是字符串的，在另一端接收时，可以这么写： socket.on(‘action’,function(){…});
socket.emit(‘action’,data);表示发送了一个action命令，还有data数据，在另一端接收时，可以这么写： socket.on(‘action’,function(data){…});
socket.emit(action,arg1,arg2); 表示发送了一个action命令，还有两个数据，在另一端接收时，可以这么写： socket.on(‘action’,function(arg1,arg2){…});
在emit方法中包含回调函数，例如：
socket.emit(‘action’,data, function(arg1,arg2){…} );那么这里面有一个回调函数可以在另一端调用，另一端可以这么写：socket.on(‘action’,function(data,fn){ fn(‘a’,’b’) ; });
上面的data数据可以有0个或者多个，相应的在另一端改变function中参数的个数即可，function中的参数个数和顺序应该和发送时一致
上面的fn表示另一个端传递过来的参数，是个函数，写fn(‘a’,’b’) ;会回调函数执行。一次发送不应该写多个回调，否则只有最后一个起效，回调应作为最后一个参数。

socket.io系统api

  1. 服务端

io.on(‘connection’,function(socket));

监听客户端连接,回调函数会传递本次连接的socket

io.sockets.emit(‘String’,data);

给所有客户端广播消息

io.sockets.socket(socketid).emit(‘String’, data);

给指定的客户端发送消息

socket.on(‘String’,function(data));

监听客户端发送的信息

socket.emit(‘String’, data);

给该socket的客户端发送消息

  1. 客户端

建立一个socket连接

var socket = io(“http://localhost“); //监听本地任何端口的请求

客户端socket.on()监听的事件：

connect：连接成功
connecting：正在连接
disconnect：断开连接
connect_failed：连接失败
error：错误发生，并且无法被其他事件类型所处理
message：同服务器端message事件
anything：同服务器端anything事件
reconnect_failed：重连失败
reconnect：成功重连
reconnecting：正在重连
当第一次连接时，事件触发顺序为：connecting->connect；当失去连接时，事件触发顺序为：disconnect->reconnecting（可能进行多次）->connecting->reconnect->connect。

环境搭建

安装node.js就不用说了吧，自动集成npm包。
然后再安装 socket.io和express 在文件目录下运行
node index 就能看到效果

客户端文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .message {
            overflow: auto;
            height: 550px;
            display: block;
            
        }
       
        .sys-section {
            text-align: center;
            color: blue;
        }
        .input-box {
            
            position:fixed;
            bottom: 0;
            padding:8px 10px;
            width:100%;
            
            background-color:#fff;
            height: 50px;
        }
        .input input {
            
            margin:0;
            float: left;
            padding:0 6px;
            height:28px;
            width:90%;
            font-size:14px;
            background-color: #fbfbfb;
            border:none;
    
            border-radius:15px;
            color:#000;
            box-shadow:0 0 1px #000;
        }
        .action button {
            height: 28px;
            width: 8%;
            float: left;
            border-radius: 10px;
            
            
            font-size: 15px;
        }
        .user {
            
            color: red;
            font-size: 20px;
        }
        .user span {
            color: black;
            
        }
       
      
      
    </style>
  </head>
  <body>
    <!--  登录界面 -->
    <div id="loginbox">
            <div style="width:260px;margin:200px auto;">
                请先输入你在聊天室的昵称
                <br/>
                <br/>
                <input type="text" style="width:180px;" placeholder="请输入用户名" id="username" name="username" />
                <input type="button" style="width:50px;" value="提交" onclick="CHAT.usernameSubmit()" />  
            </div>
        </div>
    <!--  聊天界面 -->
        <div id="chatbox" style="display:none;">
            <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;">socket.io多人聊天室</span>
                    <span style="float:right; margin-right:10px;"><span id="showusername"></span> | 
                    <a href="javascript:;" onclick="CHAT.logout()" style="color:#fff;">退出</a></span>
                </div>
            </div>
            <div id="doc">
                <div id="onlinecount" style="background:#EFEFF4; font-size:12px; margin-top:10px; margin-left:10px; color:#666;">
                </div>
                <div id="chat">
                    <div id="message" class="message">
                    </div>
                    <div class="input-box">
                        <div class="input">
<input type="text" maxlength="140" placeholder="请输入聊天内容，按Ctrl提交" id="content" name="content">
                        </div>
                        <div class="action">
                            <button type="button" id="mjr_send" onclick="CHAT.submit();">提交</button>
                        </div>
                        
                        
                    </div>
                </div>
            </div>
        </div>
    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
   
    <script>
      
     
  (function () {
    var d = document;
    var msgdiv = d.getElementById('message');
    
    //构造客户端对象 通过init函数实例化对象
    window.CHAT = {
        msgObj:d.getElementById("message"),
        username:null,
        userid:null,
        socket:null,
      
        
        scrollToBottom:function() {
            msgdiv.scrollTop = msgdiv.scrollHeight;
        },
        //退出，本例只是一个简单的刷新
        logout:function(){
            //this.socket.disconnect();
            location.reload();
        },
        //提交聊天消息内容
        submit:function(){
            var content = d.getElementById("content").value;
            if(content != ''){
                var obj = {
                    userid: this.userid,
                    username: this.username,
                    content: content
                };
                this.socket.emit('message', obj);
                d.getElementById("content").value = '';
            }
            return false;
        },
        genUid:function(){
            return new Date().getTime()+""+Math.floor(Math.random()*899+100);
        },
        //更新系统消息，本例中在用户加入、退出的时候调用
        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 = '、';
                }
            }
            d.getElementById("onlinecount").innerHTML = '当前共有 '+onlineCount+' 人在线，在线列表：'+userhtml;
            
            //添加系统消息
            var html = '';
            html += '<div>';
            html += user.username;
            html += (action == 'login') ? ' 加入了聊天室' : ' 退出了聊天室';
            html += '</div>';
            var section = d.createElement('section');
            section.className = 'sys-section';
            section.innerHTML = html;
            this.msgObj.appendChild(section);  
            this.scrollToBottom(); 
            
        },
        //第一个界面用户提交用户名
        usernameSubmit:function(){
            var username = d.getElementById("username").value;
            if(username != ""){
                d.getElementById("username").value = '';
                d.getElementById("loginbox").style.display = 'none';
                d.getElementById("chatbox").style.display = 'block';
                this.init(username);
            }
            return false;
        },
        init:function(username){
            /*
            客户端根据时间和随机数生成uid,这样使得聊天室用户名称可以重复。
            实际项目中，如果是需要用户登录，那么直接采用用户的uid来做标识就可以
            */
            this.userid = this.genUid();
            this.username = username;
            
            d.getElementById("showusername").innerHTML = this.username;
           
            
            
            //连接websocket后端服务器
            this.socket = io.connect('http://localhost');
            
            //告诉服务器端有用户登录
            this.socket.emit('login', {userid:this.userid, 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 contentDiv = '<div>' + '<span>' + obj.username + '</span>' + '&nbsp&nbsp&nbsp 说: &nbsp&nbsp&nbsp' + obj.content +'</div>';
                
                
                var section = d.createElement('section');
                
                    section.className = 'user';
                    section.innerHTML = contentDiv ;
            
                   
                
                CHAT.msgObj.appendChild(section);
                CHAT.scrollToBottom(); 
                 
            });
        }
    };
    //通过“回车”提交用户名
    d.getElementById("username").onkeydown = function(e) {
        e = e || event;
        if (e.keyCode === 13) {
            CHAT.usernameSubmit();
        }
    };
    //通过“回车”提交信息
    d.getElementById("content").onkeydown = function(e) {
        e = e || event;
        if (e.keyCode === 13) {
            CHAT.submit();
        }
    };
})();
    </script>
  </body>
</html>

客户端文件分为3个 一个页面html ，一个css文件 ，一个聊天脚本文件
基本思路就是构造一个客户对象 通过init函数实例化。通过socket来达到信息的交互。

服务端文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
var express=require('express');
var app=express();
var http=require('http').Server(app);
var io=require('socket.io')(http);
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.userid;
		
		//检查在线列表，如果不在里面就加入
		if(!onlineUsers.hasOwnProperty(obj.userid)) {
			onlineUsers[obj.userid] = 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 = {userid:socket.name, 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(obj){
		//向所有客户端广播发布的消息
		io.emit('message', obj);
		console.log(obj.username+'说：'+obj.content);
	});
  
});
http.listen(3000, function(){
	console.log('listening on *:3000');
});

服务端监听客户端的请求，同时向所有客户端发送消息

后记

至此，一个基于socket.io的聊天室便完成了。

这里分享一个拥有更强大功能的聊天室 更强大的聊天室

这篇文章写的很细，很适合新手学习。