NODE-写一个socket.io聊天室

前几天接触了WebSocket,感觉到了socket通信的强大,见《HTML5-WebSocket API 学习》。

小赖决定自己动手写一个基于nodejs+express+socket.io的聊天室应用,用来做node入门的小项目吧。

项目地址戳这里

今天实现的部分是:

  • 客户端与服务器通信

  • 多个客户端同时通信

  • 保存聊天记录和在线用户

安装方法:

  1. 下载到本地,安装需要的模块:$ npm install
  2. 打开服务器:$ node app.js
  3. 打开多个浏览器页面,分别输入昵称
  4. 可以开始聊天啦!
    这算是我试水学习node的第一个项目,代码托管到github上,慢慢捣鼓出一些东西来!

HTML5-WebSocket API 学习

  1. 1. 服务器端 编写serverfile.js文件,建立http服务器和socket连接:
  2. 2. 浏览器端 编写 webSocket.html ,建立与服务器的连接:
  3. 3. 浏览器对WebSocket的支持性

使用nodejs的socket.io和现代浏览器的WebSocket来建立一个聊天室。

服务器端 编写serverfile.js文件,建立http服务器和socket连接:

[javascript]
var http = require(‘http’);
var io = require(‘socket.io’);

// 创建一个服务器
var server = http.createServer(function(request, response){
response.writeHead(200, {‘Content-type’: ‘text/html’});
response.end(‘小赖的WebSocket服务器启动啦!’);
});
// 监听端口
server.listen(9999);

// 创建一个WebSocket
var socket = io.listen(server).set(‘log’, 1);

// 监听连接
server.on(‘connection’, function(client) {
// 监听信息
client.on(‘message’, function(data){
console.log(‘收到客户端发来信息:’, data);
var curTime = new Date().getTime();
client.emit(‘服务器返回信息:’, data + ‘->’ + curTime);

     client.on('disconnect', function(){
         console.log('连接已断开');
     });
 });

});
[/javascript]

创建http服务器,运行http服务器成功:

浏览器端 编写 webSocket.html ,建立与服务器的连接:

[html]
<!DOCTYPE html>
<html>
<head>
<title>WebSocket API</title>
<meta charset="utf-8">
<script src="<span style="text-decoration: underline;">http://localhost:9999/socket.io/socket.io.js</span>"></script&gt;
</head>
<body>
<div id="log">显示log信息…</div>
<input id="msg" type="text" placeholder="请输入信息" />
<button id="send-btn">发送!</button>

<script>
var myWebSocket = {};
myWebSocket.socketio = {
mysocket: null,
initialize: function(){
// 建立连接
myWebSocket.socketio.mysocket = io.connect(‘<span style="text-decoration: underline;">http://localhost:9999</span&gt;’);
// 监听连接
myWebSocket.socketio.mysocket.on(‘connect’, function(){
myWebSocket.socketio.log(‘成功连接到服务器\n’);
});
// 监听信息
myWebSocket.socketio.mysocket.on(‘message’, function(data){
myWebSocket.socketio.log(‘服务器返回数据:’ + data + ‘\n’);
});
// 监听断开连接
myWebSocket.socketio.mysocket.on(‘disconnect’, function(){
myWebSocket.socketio.log(‘已断开连接\n’);
})

         // 点击发送按钮
         document.querySelector('#send-btn').onclick = function(){
             // 发送信息到服务器
             var msg = document.querySelector('#msg').value;
             myWebSocket.socketio.sendMessageToServer(msg);
             document.querySelector('#msg').value = '';
         };
     },
     sendMessageToServer: function(data){
         myWebSocket.socketio.mysocket.secd(data);
         myWebSocket.socketio.log('已发送信息到服务器:' + data +'\n');
     },
     log: function(msg) {
         document.querySelector('#log').innerHTML += msg;
     }
 }

 myWebSocket.socketio.initialize();
 &lt;/script&gt;

</body>
</html>
[/html]

然后在浏览器打开这个网页,终端显示:

这样客户端和服务器就可以通信啦!

输入信息后,点击发送,终端显示:

浏览器则显示:

然后关闭服务器的话,则显示「已断开连接」:

实现广播功能,即一个客户端发送消息,所以和服务器建立了连接的其他客户端都能看到这个消息:
修改serverfile.js文件,注意有『修改』字眼的部分:

[javascript]
var http = require(‘http’);
var io = require(‘<span style="text-decoration: underline;">socket.io</span>’);

// 创建一个服务器
var server = http.createServer(function(request, response){
response.writeHead(200, {‘Content-type’: ‘text/html’});
response.end(‘小赖的WebSocket服务器启动啦!’);
});
// 监听端口
server.listen(9999);

// 创建一个WebSocket

var socket = io.listen(server).set(‘log’, 1);

// 监听连接
socket.on(‘connection’, function(client) {
// 修改:监听信息
client.on(‘customMessage’, function(data){
console.log(‘收到客户端发来信息:’, data);
var curTime = new Date().getTime();

     // 修改:使用广播方法
     client.broadcast.emit('服务器返回customMessage信息:', data + '广播-&gt;' + curTime);

     client.on('disconnect', function(){
         console.log('连接已断开');
     });
 });

});
[/javascript]

修改webSocket.html文件,注意有『修改』字眼的部分:

[html]
<!DOCTYPE html>
<html>
<head>
<title>WebSocket API</title>
<meta charset="utf-8">
<script src="<span style="text-decoration: underline;">http://localhost:9999/socket.io/socket.io.js</span>"></script&gt;
</head>
<body>
<div id="log">显示log信息…</div>
<input id="msg" type="text" placeholder="请输入信息" />
<button id="send-btn">发送!</button>

<script>
var myWebSocket = {};
myWebSocket.socketio = {
mysocket: null,
initialize: function(){
// 建立连接
myWebSocket.socketio.mysocket = io.connect(‘<span style="text-decoration: underline;">http://localhost:9999</span&gt;’);
// 监听连接
myWebSocket.socketio.mysocket.on(‘connect’, function(){
myWebSocket.socketio.log(‘成功连接到服务器<br />’);
});
//修改: 监听customMessage信息
myWebSocket.socketio.mysocket.on(‘broadcastMessage’, function(data){
myWebSocket.socketio.log(‘收到广播信息:’ + data + ‘<br />’);
});
// 监听断开连接
myWebSocket.socketio.mysocket.on(‘disconnect’, function(){
myWebSocket.socketio.log(‘已断开连接\n’);
})

         // 点击发送按钮
         document.querySelector('#send-btn').onclick = function(){
             // 发送信息到服务器
             var msg = document.querySelector('#msg').value;
             myWebSocket.socketio.sendMessageToServer(msg);
             document.querySelector('#msg').value = '';
         };
     },
     sendMessageToServer: function(data){
         // 修改
         myWebSocket.socketio.mysocket.emit('customMessage', data);
         myWebSocket.socketio.log('已发送信息到服务器:' + data +'&lt;br /&gt;');
     },
     log: function(msg) {
         document.querySelector('#log').innerHTML += msg;
     }
 }

 myWebSocket.socketio.initialize();
 &lt;/script&gt;

</body>
</html>
[/html]

然后用多个页面打开webSocket.html,在第一个页面输入消息:

点击发送,其他页面立即收到了消息:

在第二个页面输入信息:

在其他页面收到广播:


哇!WebSocket够强大,可以实现客户端和服务端的通信,而node的socket.io更是封装了它的一系列方法,实现一个web端通信就轻而易举了,但!是!HTML5的这个新特性,你敢用嘛?!

浏览器对WebSocket的支持性

在caniuse.com查询可知,WebSocket在IE10+和其他现代浏览器才支持,低版本的IE不支持WebSocket - -!

不过好消息是,socket.io对不支持WebSocket的浏览器启用了其他策略,使得socket.io甚至能在IE6下运行!

学好node后再回来拓展这个小小聊天室呗^_^
参考资料
参考资料
参考资料