[特殊字符]我在 Chatterbox（话匣子）中 Websocket 的使用-上篇（基本介绍）

背景

🎃认识我的人应该知道我最近重构了即时聊天系统并改名为 🎈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，

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：用于关闭当前与服务器的连接。

// 完整示例
const url = `ws://ip:端口/路径` // wss://域名/路径
const websocket = new WebSocket(url);
websocket.onopen = () => {
    // ✌连接成功
}
websocket.onerror = () => {
    // 😞连接失败
}
websocket.onclose = () => {
    // 🤐连接关闭
}
websocket.onmessage = (data) => {
    // 📨接收到服务器发送的消息 data
}

演示

以上就是本次分享的内容，附上源码。

🦀🦀感谢看官看到这里，如果觉得文章不错的话，可以给小生的几个开源项目点个Star⭐！

• 基于 Vue3 + Element-plus 管理后台基础功能框架
  • 预览：http://admin.gumingchen.icu
  • Github：https://github.com/gmingchen/agile-admin
  • Gitee：https://gitee.com/shychen/agile-admin
  • 基础版后端：https://github.com/gmingchen/java-spring-boot-admin
  • 文档：http://admin.gumingchen.icu/doc/
• 基于 Vue3 + Element-plus + websocket 即时聊天系统
  • 预览：https://chatterbox.gumingchen.icu/
  • Github：https://github.com/gmingchen/chatterbox
  • Gitee：https://gitee.com/shychen/chatterbox
• 基于 node 开发的后端服务：https://github.com/gmingchen/node-server