WebSocket 学习（一）——基于 socket.io 实现简单多人聊天室

前言

什么是 Websocket 呢？

我们都知道在 Http 协议中，客户端与服务器端的通信是靠客户端发起请求，然后服务器端收到请求再进行回应，这个过程中，客户端是主动的，服务器端是被动的。 Websocket 协议就不一样了，它是基于 TCP 的一种新的网络协议，它与 Http 协议不同之处就在于 Websocket 能实现服务器端主动推送消息到客户端，服务器端与客户端都能发起通信，这一次，服务器端终于也拥有了主动权。

什么是 socket.io ？ socket.io 封装了 Websocket 以及其他的一些协议，并且实现了 Websocket 的服务端代码。同时还有很强的兼容性，兼容各种浏览器以及移动设备。有了它，我们能更方便快捷地实现服务器端与客户端之间的实时通讯。

实现功能简述

要实现多人聊天室的核心就是区分当前用户发送的消息与其他用户发送的消息，在这里我通过用户登录使用的用户名来进行区分。所以用户进入首先展示登录页面。

登录成功之后，新用户加入聊天室

如果用户重名，会弹出提示，保持吴彦祖的登录状态，我们再打开一个标签，输入“吴彦祖”查看效果

只有当昵称唯一时，才允许登录，我们再登录一个查看效果

可以看到，当新用户登录时，其他在线用户会收到提示，接下来就是发送消息了

发送的消息是实时推送的，当前用户发送的消息与其他用户发送的消息对话框做了区分。

当用户退出时，系统也会给出提示，效果如下

怎么样，有没有兴趣继续了解呢？下面就开始着手开发吧。

环境搭建

1.安装node.js

后端服务是用的 node.js ，所以我们首先要进行安装，安装方法很简单，我在之前一篇文章也提过。首先在node.js官网下载稳定版本，下载完成后点击安装，安装过程也很简单，一直next即可，安装完成会自动添加 node 及 npm 环境变量。

检验是否安装成功，在cmd输入命令 node-v ,回车 及 npm-v ,回车，如出现下图所示版本信息，表示安装成功

2.新建项目文件夹，安装socket.io

新建文件夹 chatroom ，在这里我把它建到D盘根目录下。打开cmd，定位到刚建的 chatroom 文件夹下，输入 npm install socket.io 安装 socket.io

安装完成之后，可以看到文件夹下多了 node_modules 文件，里面全是刚下载的 socket.io 依赖包。

3.新建页面

在 chatroom 文件夹下新建页面文件 index.html ，样式 chat.css ，后端js app.js ，前端js chat.js ，并下载jquery.min.js，socket.io.js。再下载一张图片作为用户头像，放在 images/user/ 下。

目录结构如下

好了，环境搭建完成，开始撸码吧。

项目搭建

1.构建node服务器

在app.js里面构建服务器

/*app.js*/
/*构建http服务*/
var app = require('http').createServer()
/*引入socket.io*/
var io = require('socket.io')(app);
/*定义监听端口，可以自定义，端口不要被占用*/
var PORT = 8081;
/*监听端口*/
app.listen(PORT);
console.log('app listen at'+PORT);

接着启动服务。 打开 cmd ，定位到 app.js 所在目录，输入 node app.js ，如图所示，打印出了我们写的内容，表示服务启动成功。

2.建立服务端socket连接监听

先给大家简单讲一下服务器端与客户端通信的基本方法。大家可以看一下socket.io的文档。

（1）socket.emit 客户端与服务器端之间发送消息是用 emit 例如客户端向服务端发送登录请求 socket.emit('login',{username:uname}) login 是自定义的事件，后面是带的参数

（2）socket.on 服务器端要接收客户端发送的 login 事件，就得对该事件进行监听 socket.on('login',function(data){}) 在回调函数中进行处理。

同理，服务器端也可以向客户端发送事件，只要客户端也对该事件进行监听就行

（3）io.sockets.emit 服务器端向连接的所有客户端发送消息得用 io.sockets.emit

（4）socket.broadcast.emit 给除了自己以外的客户端广播消息。

/*app.js*/
/*构建http服务*/
var app = require('http').createServer()
/*引入socket.io*/
var io = require('socket.io')(app);
/*定义监听端口，可以自定义，端口不要被占用*/
var PORT = 8081;
/*监听端口*/
app.listen(PORT);





    
/**
*监听客户端连接
*io是我们定义的服务端的socket
*回调函数里面的socket是本次连接的客户端socket
*io与socket是一对多的关系
*/
io.on('connection', function (socket) {
  /*所有的监听on，与发送emit都得写在连接里面，包括断开连接*/
})
console.log('app listen at'+PORT);

3.前端页面

index.html 页面中需引入 socket.io.js ，socket.io.js下载地址

/*index.html*/
"en"




    
>
    "UTF-8">
    "viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">