背景
🎃认识我的人应该知道我最近重构了即时聊天系统并改名为 🎈Chatterbox(话匣子),既然是聊天系统那必然少不了使用WebSocket
。下面我将通过在 Chatterbox(话匣子)中应用的简单聊一下我如何使用WebSocket
的。
WebSocket介绍
📢WebSocket
是一种在单个TCP连接上进行全双工通信协议,它允许客户端和服务器之间进行双向、实时、低延迟的数据交换。WebSocket API
也被W3C定为标准,是现代浏览器的标准特性之一。
特性与优势
- 实现了双向通信,即服务器可以主动推送数据到客户端,而无需客户端发起请求。
- 一旦握手成功,连接将保持打开状态,直到显式关闭。这减少了频繁建立和销毁连接带来的开销,尤其适合需要持续通信的场景。
- 数据帧采用紧凑的二进制格式,减少了不必要的头部信息,提高了数据传输效率。
- 由于数据可以直接在已建立的连接上传输,WebSocket能够实现实时或接近实时的数据交互。
- 与HTTP一样,WebSocket允许跨域通信,只需服务器端设置相应的CORS头。
原理
- 客户端通过HTTP升级机制(Upgrade header)发送一个特殊的WebSocket握手请求到服务器。请求头中包含Upgrade字段,值为WebSocket,以及Sec-WebSocket-Version和Sec-WebSocket-Key等字段。
- 服务器收到客户端的握手请求后,根据协议进行解析,验证请求头信息的正确性,并生成Key和Accept等字段。服务器通过HTTP响应返回这些信息,并将HTTP状态码设为101表示切换到了WebSocket协议。
- 握手成功后,客户端和服务端开始通过已升级的TCP连接直接交换数据帧。数据帧可以承载文本、二进制数据或特定的控制消息(如关闭连接)。
- 当客户端或服务器决定关闭连接时,可以发送特殊的关闭数据帧来通知对方关闭连接。对方收到关闭数据帧后,也会进行关闭操作。
使用场景
🎬首先就是即时聊天可实现低延迟、高效的在线交流;大屏数据统计可实时更新数据(这也有循环调用接口查询数据的);消息通知实现服务端主动通知用户等等。
API
WebSocket MDN API:https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket
🔗在 Web API 中有一个WebSocket
对象提供了用于创建和管理WebSocket
连接,以及可以通过该连接发送和接收数据的 API。
WebSocket()
构造器会返回一个WebSocket
,
js
const websocket = new WebSocket(url [, protocols]);
参数
- url:必要参数-要连接的 URL。
- protocols:可选参数-协议字符串或数组,单个服务器可以实现多个子协议,根据不同协议处理不同的交互。
常量
- websocket.CONNECTING :表示正在与服务器连接中,对应值为
0
。 - websocket.OPEN :表示已与服务器连接,对应值为
1
。 - websocket.CLOSING :表示正在关闭与服务器的连接中,对应值为
2
。 - websocket.CLOSED :表示已与服务器断开连接,对应值为
3
。
属性(介绍几个重要的)
- websocket.onopen:连接服务器成功后触发该属性指定的函数。
- websocket.onmessage :接收到服务器发送到的信息后触发该属性指定的函数。返回参数
event.data
为服务器发送的内容。 - websocket.onclose:与服务器断开连接后触发该属性指定的函数。主动关闭不会触发。
- websocket.onerror:与服务器连接失败后触发该属性指定的函数。
方法
- websocket.send:用于传输至服务器的数据。它支持文本字符串、二进制、Blob、二进制帧参数。
- websocket.close:用于关闭当前与服务器的连接。
js
// 完整示例
const url = `ws://ip:端口/路径` // wss://域名/路径
const websocket = new WebSocket(url);
websocket.onopen = () => {
// ✌连接成功
}
websocket.onerror = () => {
// 😞连接失败
}
websocket.onclose = () => {
// 🤐连接关闭
}
websocket.onmessage = (data) => {
// 📨接收到服务器发送的消息 data
}
演示
以上就是本次分享的内容,附上源码。
🦀🦀感谢看官看到这里,如果觉得文章不错的话,可以给小生的几个开源项目点个Star⭐!
- 基于 Vue3 + Element-plus 管理后台基础功能框架
- 基于 Vue3 + Element-plus + websocket 即时聊天系统
- 基于 node 开发的后端服务:https://github.com/gmingchen/node-server