>
`WebSocket`协议可以实现前后端全双工通信,从而取代浪费资源的长轮询。在此协议的基础上,可以实现前后端数据、多端数据,真正的**实时响应**。在学习`WebSocket`的过程中,实现了一个简化版群聊,过程和代码详细记录在这篇文章中。
**本篇文章来自[董沅鑫的个人网站](
**查看更多知识,或者技术交流:请访问[`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对象

$(‘#resourceTabs’).tabs(‘unselect’, 0);
$(‘#resourceTabs’).tabs(‘select’, 0);

1. 外部js调用vue的方法等

将vue实例中的this传入外部js文件(比如作为某方法的参数),即可访问传入实例的所有内容。调用该实例中子组件的方法,用$refs

“` ### 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服务端。
在[阮一峰的博文](
综上所述,`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. 相关资料 – 概念解释: –


`ws`文档:
**本篇文章来自[董沅鑫的个人网站](
**查看更多知识,或者技术交流:请访问[`godbmw`](

2. 路由参数

传递:vm.$router.push({ name: '', params: { id: 1 } }); // 注意,用path属性,在目标路由中取不到参数值
获取:vm.$route.params.id;

发表评论

电子邮件地址不会被公开。 必填项已用*标注