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

相关推荐
Suckerbin1 小时前
pikachu靶场-敏感信息泄露
网络·学习·安全·网络安全
喝养乐多长不高1 小时前
详细PostMan的安装和基本使用方法
java·服务器·前端·网络协议·测试工具·https·postman
嘿嘿-g1 小时前
华为IP(5)
网络·华为
薯条不要番茄酱1 小时前
【网络原理】从零开始深入理解TCP的各项特性和机制.(二)
服务器·网络·tcp/ip
薯条不要番茄酱2 小时前
【网络原理】从零开始深入理解TCP的各项特性和机制.(三)
网络·网络协议·tcp/ip
专注API从业者3 小时前
反爬策略应对指南:淘宝 API 商品数据采集的 IP 代理与请求伪装技术
网络·网络协议·tcp/ip
狐凄5 小时前
Python实例题:使用Pvthon3编写系列实用脚本
java·网络·python
一颗星星辰12 小时前
路由交换网络专题 | 第八章 | GVRP配置 | 端口安全 | 端口隔离 | Mux-VLAN | Hybrid
网络·安全
自由鬼12 小时前
高性能的开源网络入侵检测和防御引擎:Suricata介绍
网络·安全·网络安全·开源·系统安全·入侵检测
老六ip加速器12 小时前
如何获取静态IP地址?完整教程
网络·网络协议·tcp/ip