[特殊字符]我在 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

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⭐!

相关推荐
山楂树の8 分钟前
计算机网络 TCP/IP参考模型
网络·tcp/ip·计算机网络
卓应2 小时前
2025年华为HCIP题库分享
网络·华为·智能路由器
CryptoPP2 小时前
基于WebSocket的金融数据实时推送系统架构设计对接多国金融数据API
websocket·网络协议·金融·系统架构·区块链
WoTrusSSL3 小时前
SSL证书如何保障人脸识别系统安全?
网络协议·系统安全·ssl
榆榆欸4 小时前
7.从Server到Acceptor,优化Reactor模式的实现
linux·服务器·网络
Mars--4 小时前
IP数据报报文格式
网络
榆榆欸5 小时前
6.实现 Reactor 模式的 EventLoop 和 Server 类
linux·服务器·网络·c++·tcp/ip
智联视频超融合平台5 小时前
视频联网平台智慧运维系统:智能时代的城市视觉中枢
运维·网络协议·安全·音视频·智慧城市·视频编解码
快乐的蛋糕6 小时前
【Linux】进程间通信(IPC)-- 无名管道、命名管道
linux·服务器·网络
XMYX-06 小时前
如何加强 SSH 安全:内网和专用网络环境下的防护策略
网络·安全·ssh