websocket学习和群聊实现

> `WebSocket`协议可以实现前后端全双工通信，从而取代浪费资源的长轮询。在此协议的基础上，可以实现前后端数据、多端数据，真正的**实时响应**。在学习`WebSocket`的过程中，实现了一个简化版群聊，过程和代码详细记录在这篇文章中。 **本篇文章来自[董沅鑫的个人网站](https://godbmw.com/passage/38)，引用、转载请指明出处**。 **查看更多知识，或者技术交流：请访问[`godbmw.com`](https://godbmw.com/)** ## 1 概述 ### 1.1 WebSocket 是什么？ 1. 建立在 TCP 协议之上的网络通信协议 2. 全双工通信协议 3. 没有同源限制 4. 可以发送文本、二进制数据等 ### 1.2 为什么需要 WebSocket？ 了解计算机网络协议的人，应该都知道：HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。 这种通信模型有一个弊端：HTTP 协议无法实现服务器主动向客户端发起消息。 因此，如果在客户端想实时监听服务器变化，必须使用 ajax 来进行轮询，效率低，浪费资源。 而 websocket 就可以使得**前后端进行全双工通信（两方都可以向对方进行数据推送），是真正的平等对话**。 ## 2 WebSocket 客户端 支持`HTML5`的浏览器支持 WebSocket 协议： ```javascript var ws = new WebSocket(url); // 创建一个websocket对象 ``` ### 2.1 WebSocket 属性 | 属性 | 描述 | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ws.readyState | 只读属性 readyState 表示连接状态，可以是以下值：0 - 表示连接尚未建立。1 - 表示连接已建立，可以进行通信。2 - 表示连接正在进行关闭。3 - 表示连接已经关闭或者连接不能打开。 | | ws.bufferedAmount | 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。 | ### 2.2 WebSocket 方法 | 属性 | 描述 | | ---------- | -------- | | ws.send() | 数据发送 | | ws.close() | 关闭连接 | ### 2.3 Websocket 事件 | 属性 | 描述 | | ------- | ------------ | | open | 连接建立触发 | | message | 通信时触发 | | error | 出错触发 | | close | 关闭连接触发 | ### 2.4 代码实现 假设我们在本地`8080`端口打开了websocket服务，那么，下面代码可以在浏览器中实现和这个服务的通信： ```html ``` ## 3 WebSocket 服务端 > 关于服务端实现，根据技术选型不同，可以选用不同的库和包。我这里使用的是`node`的`ws`库来websocket服务端。 在[阮一峰的博文](http://www.ruanyifeng.com/blog/2017/05/websocket.html)提到的`socket.io`库，在浏览器端的写法不兼容原生API，准确来说，它们自己实现了一套websocket。所以，使用的时候前后端都应该引用第三方库。**这样就造成了代码迁移性，严重下降。** 综上所述，`ws`库有以下优点： 1. 兼容性好，兼容浏览器原生API 2. 长期维护，效果稳定 3. 使用方便（往下看就知道了） ## 4 实现群聊 ### 4.1 群聊 服务端实现 首先，在命令行中，安装`ws`库: `npm install ws --save` 现在，利用`ws`来实现一个监听`8080`端口的websocket服务器，**讲解都在代码注释里，一目了然**： ```javascript const PORT = 8080; // 监听端口 const WebSocket = require("ws"); // 引入 ws 库 const wss = new WebSocket.Server({ port: PORT }); // 声明wss对象 /** * 向除了本身之外所有客户端发送消息，实现群聊功能 * @param {*} data 要发送的数据 * @param {*} ws 客户端连接对象 */ wss.broadcastToElse = function broadcast(data, ws) { wss.clients.forEach(function each(client) { if (client !== ws && client.readyState === WebSocket.OPEN) { client.send(data); } }); }; /* 客户端接入，触发 connection */ wss.on("connection", function connection(ws, req) { let ip = req.connection.remoteAddress; // 通过req对象可以获得客户端信息，比如：ip，headers等 /* 客户端发送消息，触发 message */ ws.on("message", function incoming(message) { ws.send(message); // 向客户端发送消息 wss.broadcastToElse(message, ws); // 向 其他的 客户端发送消息，实现群聊效果 }); }); ``` ### 4.2 群聊 客户端实现 为了方便编写，这里引入了`jquery`和`bootstrap`这两个库，只需要关注js代码即可。 ```html

``` ### 4.3 群聊 效果展示 首先启动我们的服务端代码：`node server.js` 。其中，`server.js`是放置服务端代码的文件。 然后，我们打开2次编写的`html`代码，这相当于，打开2个客户端。来检测群聊功能。  ## 5. 相关资料 - 概念解释： - http://www.ruanyifeng.com/blog/2017/05/websocket.html - https://www.cnblogs.com/jingmoxukong/p/7755643.html - `ws`文档：https://www.npmjs.com/package/ws **本篇文章来自[董沅鑫的个人网站](https://godbmw.com/passage/38)，引用、转载请指明出处**。 **查看更多知识，或者技术交流：请访问[`godbmw`](https://godbmw.com/)**