界面展示：

首先展示demo的结果界面，只是简单消息的发送和接收，包括发送文字和发送图片。



ws说明：

在介绍socket.io之前，先简单介绍一下websocket：

Web Socket的目标是在一个单独的持久连接上提供全双工，双向通信

在JavaScript中建立了Web Socket之后，会有一个HTTP请求发送到浏览器以发送连接。取得服务器响应之后，建立的连接会使用HTTP升级从HTTP协议交换为WebSocket协议。WebSocket使用了自定义的协议，所以URL模式略有不同，未加密的是ws://，加密的是wss://，使用WebSocket的好处在于：可以在客户端和服务器端发送少量数据，减少开销，且由于全双工通信，适合即时应用。但是目前还达不到浏览器完全兼容。

Socket.IO

Socket.IO官网
官网列出了Socket.IO的四大优点：
* 实时分析：将数据推送到客户端，这些客户端会被表示为实时计数器，图表或日志客户。
* 实时通信和聊天：只需几行代码便可写成一个Socket.IO的”Hello,World”聊天应用。
* 二进制流传输：从1.0版本开始，Socket.IO支持任何形式的二进制文件传输，例如：图片，视频，音频等。
* 文档合并：允许多个用户同时编辑一个文档，并且能够看到每个用户做出的修改。
Socket.IO对于支持ws的浏览器将采用ws通信，对于不支持ws的将采用轮询方式，所以Socket.IO是一个非常适合做即时通讯的类库。

Socket.IO API

由于Socket.IO在不同版本中，API会略有不同，所以本文介绍依赖于1.4.5版本（2016.9.8）
官网对于API及用法介绍全面，在此只做简单总结：
* 1、安装：npm install socket.io
* 2、客户端：客户端需引用socket.io.js
“`

* 3、服务器端：demo中服务器端采用框架`express(~4.13.1)`，将引用模块命名为io
//引入模块 
 var server = app.listen(3000,function(){ 
 console.log(‘Express.js server listening on port’+ app.get(‘port’));}); 
 var io = require(‘socket.io’).listen(server); 
 //io使用 
 io.on(‘connection’, function (socket) {}）
* 4、服务器端API
io.on(‘connection’,function(socket){});//建立连接 
 io.sockets.emit(约定参数，data)；//向全体人员广播 
 io.emit(约定参数, data);//向全体人员广播 
 socket.emit(约定参数，data)//发送信息 
 socket.on(约定参数，callback）；//接收信息 
 socket.on(‘disconnect’,callback);//用户断开连接触发事件
Socket.IO对于每一个连接用户会自动分配一个随机的，不重复的`Socket#id` ，通过`Socket#id`可以实现将信息分发给个人
var socketId = socket.id; 
 socket.broadcast.to(socketId ).emit(‘my message’, msg);//socket均为connect中回调函数中的socket
* 5、客户端API
socket.emit(约定参数，data)//发送信息 
 socket.on(约定参数，callback）；//接收信息
* 6、Socket.IO还可以按照命名空间划分出不同的空间，详见[http://socket.io/docs/rooms-and-namespaces/](http://socket.io/docs/rooms-and-namespaces/)
####Demo介绍
package.json
{ 
 “name”: “ezsocket”, 
 “version”: “0.0.0”, 
 “private”: true, 
 “scripts”: { 
 “start”: “node app.js” 
 }, 
 “dependencies”: { 
 “body-parser”: “~1.13.2”, 
 “cookie-parser”: “~1.3.5”, 
 “debug”: “~2.2.0”, 
 “express”: “~4.13.1”, 
 “jade”: “~1.11.0”, 
 “morgan”: “~1.6.1”, 
 “multiparty”:”4.1.2”, 
 “socket.io”:”1.4.5”, 
 “serve-favicon”: “~2.3.0” 
 } 
 }
框架及版本如上，视图采用jade模板，主要过程为用户进入聊天室先输入名字（未查重），点击确定后发送名字等信息，进入聊天页面，在文本框中输入，点击发送按钮，发送信息。接收服务器端的相应信息，对其处理，进行界面的展示。
(function(){  
    var socket=io.connect();(‘.j_btn’).on(‘click’,function(){//进入页面确定按钮点击事件 
 console.log(8888); 
 var msg = (‘.j_nametext’).val();  
        socket.emit(‘login’,msg);//向服务器发送用户注册名字信息  
    })(‘#j_mesbtn’).on(‘click’,function(){//文本框按钮点击事件 
 var data = $(‘#j_msgtext’).html(); 
 console.log(data); 
 var str = ‘• '+data+'
• ’ 

 $(‘.right-top-ul’).append(str); 

 socket.emit(‘msg’,data);//向服务器发送文本框中信息 

 }) 

 socket.on(‘system’,function(data){//接收服务器端信息 

 var str = ‘ 
• 欢迎??’+data+’??进入聊天室，撒花
• ‘; 

 $(‘.right-top-ul’).append(str); 

 }); 

 socket.on(‘chat’,function(data){ 

 console.log(data); 

 var str = ‘ 
• '+data.data+'
• ’ 

 (‘.right-top-ul’).append(str);  
    })  
    socket.on(‘loginSuccess’,function(){//接收服务器端登录成功信息(‘.float-player’).css(‘display’,’none’); 

 $(‘.dialog’).css(‘display’,’none’); 

 }); 

 socket.on(‘disconnect’,function(data){//接收服务器端发送的用户离开的信息 

 console.log(data); 

 var str = ‘ 
• ??’+data+’??离开了组织，愿他早日回到组织的怀抱
• ‘; 

 (‘.right-top-ul’).append(str);  
    });(‘#j_sendmsg’).on(‘change’,function(){//上传文件事件 

 // 判断上传文件类型 

 var objFile =  
(‘#j_sendmsg’).val();  
        var objType = objFile.substring(objFile.lastIndexOf(“.”)).toLowerCase();  
        var formData = new FormData(document.forms.namedItem(“test”));.ajax({ 

 type : ‘post’, 

 url : ‘/uploadUserImgPre’, 

 data: formData , 

 processData:false, 

 async:false, 

 cache: false, 

 contentType: false, 

 success:function(re){ 

 re.imgSrc = re.imgSrc.replace(‘public’,”); 

 re.imgSrc = re.imgSrc.replace(/\/g,’\/’); 

 $(‘#j_msgtext’).append(‘[站外图片上传中……(4)]’) 

 }, 

 error:function(re){ 

 console.log(re); 

 } 

 }); 

 }); 

 }) 
服务器端主要功能为
1、前方发送登录信息，服务器端接收并广播给全部用户，将登录成功信息传给客户端，客户端进行相应操作。
2、客户端通过发送按钮发送信息，服务器端收到后，广播给除非发送人员所有人。
3、用户离开，触发服务器端`disconnect`,服武器端广播给全体在线人员。
代码如下：
服务器端主要功能为
1、前方发送登录信息，服务器端接收并广播给全部用户，将登录成功信息传给客户端，客户端进行相应操作。
2、客户端通过发送按钮发送信息，服务器端收到后，广播给除非发送人员所有人。
3、用户离开，触发服务器端`disconnect`,服武器端广播给全体在线人员。
代码如下：
io.on(‘connection’, function(socket) { 
 console.log(socket.id); 
 var socketId = socket.id; 
 socket.on(‘login’,function(nickname){//接收登录 
 socket.nickname = nickname; 
 socket.emit(‘loginSuccess’);//发送登录成功信息 
 io.sockets.emit(‘system’, nickname);//广播 
 }); 
 socket.on(‘msg’,function(data){//接收文本框中信息 
 console.log(data); 
 var sendMsg = {‘name’:socket.nickname,’data’:data} 
 socket.broadcast.emit(‘chat’,sendMsg);//广播 
 }); 
 socket.on(‘disconnect’,function(){ 
 io.sockets.emit(‘disconnect’, socket.nickname); 
 }) 
 }); 
 “`

项目文件截图：

利用socket.io+nodejs打造简单聊天室_界面

运行：

下载后再package.json所在位置打开命令行，通过npm install安装依赖，安装好后通过node app.js 启动服务，在google浏览器中输入 localhost:3000

总结：

本文对Socket.IO做了简单了解，若有不足或错误之处，还请多多指出。利用socket.io+nodejs打造简单聊天室

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: NodeJS