本文共 2457 字,大约阅读时间需要 8 分钟。
WebSocket
协议可以实现前后端全双工通信,从而取代浪费资源的长轮询。在此协议的基础上,可以实现前后端数据、多端数据,真正的实时响应。在学习WebSocket
的过程中,实现了一个简化版群聊,过程和代码详细记录在这篇文章中。
了解计算机网络协议的人,应该都知道:HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起,服务端对请求做出应答处理。
这种通信模型有一个弊端:HTTP 协议无法实现服务器主动向客户端发起消息。
因此,如果在客户端想实时监听服务器变化,必须使用 ajax 来进行轮询,效率低,浪费资源。
而 websocket 就可以使得前后端进行全双工通信(两方都可以向对方进行数据推送),是真正的平等对话。
支持HTML5
的浏览器支持 WebSocket 协议:
1 | var ws = new WebSocket(url); // 创建一个websocket对象 |
属性 | 描述 |
---|---|
ws.readyState | 只读属性 readyState 表示连接状态,可以是以下值:0 - 表示连接尚未建立。1 - 表示连接已建立,可以进行通信。2 - 表示连接正在进行关闭。3 - 表示连接已经关闭或者连接不能打开。 |
ws.bufferedAmount | 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。 |
属性 | 描述 |
---|---|
ws.send() | 数据发送 |
ws.close() | 关闭连接 |
属性 | 描述 |
---|---|
open | 连接建立触发 |
message | 通信时触发 |
error | 出错触发 |
close | 关闭连接触发 |
假设我们在本地8080
端口打开了websocket服务,那么,下面代码可以在浏览器中实现和这个服务的通信:
123456789101112131415161718192021 | |
关于服务端实现,根据技术选型不同,可以选用不同的库和包。我这里使用的是
node
的ws
库来websocket服务端。
在提到的socket.io
库,在浏览器端的写法不兼容原生API,准确来说,它们自己实现了一套websocket。所以,使用的时候前后端都应该引用第三方库。这样就造成了代码迁移性,严重下降。
综上所述,ws
库有以下优点:
首先,在命令行中,安装ws
库: npm install ws --save
现在,利用ws
来实现一个监听8080
端口的websocket服务器,讲解都在代码注释里,一目了然:
1234567891011121314151617181920212223242526272829 | 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); // 向 其他的 客户端发送消息,实现群聊效果 });}); |
为了方便编写,这里引入了jquery
和bootstrap
这两个库,只需要关注js代码即可。
1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
|
首先启动我们的服务端代码:node server.js
。其中,server.js
是放置服务端代码的文件。
然后,我们打开2次编写的html
代码,这相当于,打开2个客户端。来检测群聊功能。
ws
文档:原文
转载地址:http://tdwii.baihongyu.com/