1、什么是websocket？
WebSocket是一种在单个TCP连接上进行全双工通信的协议，它可以实现浏览器和服务器之间的双向数据传输。在WebSocket中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输，客户端和服务器之间的数据交换变得更加简单。WebSocket的优点是，它可以避免HTTP的轮询机制，减少网络开销和延迟，提高性能和用户体验。
1.1 websocket的特点
- websocket是一种基于TCP的双向通信协议，可以实现浏览器和服务器之间的实时数据交互
- websocket不受同源策略的限制，可以跨域通信，使用ws或wss协议
- websocket采用了二进制帧结构，数据传输效率高，支持文本和二进制数据
- websocket通过一个握手的机制建立连接，连接成功后可以保持长连接，实现真正意义上的推送功能
1.2 websocket与HTTP、TCP之间的关系
WebSocket是一种基于TCP的应用层协议，它可以实现客户端和服务器之间的双向通信。WebSocket与HTTP有一些共同点，比如都是建立在TCP之上，都是可靠性传输协议，都是应用层协议。但是WebSocket也有很多不同点，比如WebSocket支持持久连接，而HTTP不支持；WebSocket是双向通信协议，而HTTP是单向协议，只能由客户端发起请求；WebSocket可以穿越防火墙，而HTTP可能会被阻拦。
WebSocket与TCP的关系也比较复杂。WebSocket是一个抽象层，它使用TCP作为传输层协议，但是它也可以使用其他的传输层协议，比如UDP。WebSocket在建立连接时，需要通过HTTP协议进行一次握手，然后升级到WebSocket协议。握手成功后，数据就直接从TCP通道传输，与HTTP无关了。WebSocket的数据格式也不同于TCP，它使用了一种帧的结构，每个帧包含了控制信息和有效载荷。
2、websocket的原理
2.1 如何建立连接
-
客户端向服务器发送一个HTTP请求，请求头中包含了一些特殊的字段，如Upgrade、Connection、Sec-WebSocket-Key等，表示这是一个升级协议的请求。
-
服务器收到请求后，如果同意升级协议，就会返回一个HTTP响应，响应头中也包含了一些特殊的字段，如Upgrade、Connection、Sec-WebSocket-Accept等，表示这是一个升级协议的响应。
-
客户端和服务器通过HTTP握手后，就建立了一个WebSocket连接，后续的数据交换就遵循WebSocket协议的格式，不再使用HTTP协议。
测试地址：https://www.goeasy.io/cn/demos/demos.html
请求端👇️
图中的几个注意的地方：
1、状态码101：HTTP 101 Switching Protocol（协议切换）状态码表示服务器应客户端升级协议的请求（Upgrade (en-US)请求头）正在切换协议。服务器会发送一个Upgrade (en-US)响应头来表明其正在切换过去的协议。 该过程在协议升级机制（Protocol upgrade mechanism）中详细描述。2、connection：HTTP/1.1 协议提供了一种使用 Upgrade (en-US) 标头字段的特殊机制，这一机制允许将一个已建立的连接升级成新的、不相容的协议。
3、Upgrade：表示已经升级为websocket连接，通讯内容并在浏览器控制台 - 网络一栏中不可见
4、Sec-WebSocket-Version: 13：表示websocket的版本。如果服务端不支持该版本，需要返回一个Sec-WebSocket-Versionheader，里面包含服务端支持的版本号
5、Sec-WebSocket-Key：与后面服务端响应首部的Sec-WebSocket-Accept是配套的，提供基本的防护，比如恶意的连接，或者无意的连接。
服务端👇️
1、状态码101：同意协议升级
2、Upgrade：升级为websocket
Tips:
Sec-WebSocket-Accept的计算：
Sec-WebSocket-Accept根据客户端请求首部的Sec-WebSocket-Key计算出来。计算公式为：
将Sec-WebSocket-Key加上258EAFA5-E914-47DA-95CA-C5AB0DC85B11。
通过SHA1计算出摘要，并转成base64字符串。伪代码如下：
验证返回结果const crypto = require('crypto'); const magic = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'; const secWebSocketKey = 'TOjABBQN4fUhBwMt7vaMSA=='; let secWebSocketAccept = crypto.createHash('sha1') .update(secWebSocketKey + magic) .digest('base64'); console.log(secWebSocketAccept);
3、websocket应用场景
| 业务场景 | 场景概述 |
|---|---|
| 弹幕 | 终端用户A在自己的手机端发送了一条弹幕信息，但是您也需要在客户A的手机端上将其他N个客户端发送的弹幕信息一并展示。需要通过WebSocket协议将其他客户端发送的弹幕信息从服务端全部推送至客户A的手机端，从而使客户A可以同时看到自己发送的弹幕和其他用户发送的弹幕。 |
| 在线教育 | 老师进行一对多的在线授课，在客户端内编写的笔记、大纲等信息，需要实时推送至多个学生的客户端，需要通过WebSocket协议来完成。 |
| 股票等金融产品实时报价 | 股票黄金等价格变化迅速，变化后，可以通过WebSocket协议将变化后的价格实时推送至世界各地的客户端，方便交易员迅速做出交易判断。 |
| 体育实况更新 | 由于全世界体育爱好者数量众多，因此比赛实况成为其最为关心的热点。这类新闻中最好的体验就是利用WebSocket达到实时的更新。 |
| 视频会议和聊天 | 尽管视频会议并不能代替和真人相见，但是应用场景众多。WebSocket可以帮助两端或多端接入会议的用户实时传递信息。 |
| 基于位置的应用 | 越来越多的开发者借用移动设备的GPS功能来实现基于位置的网络应用。如果您一直记录终端用户的位置（例如：您的 App记录用户的运动轨迹），就可以收集到更加细致化的数据。 |
要使用WebSocket，首先需要创建一个WebSocket对象，传入服务器的URL作为参数，例如：
var ws = new WebSocket("ws://example.com");
然后，需要为WebSocket对象添加四个事件监听器，分别是：
onopen：当WebSocket连接建立成功时触发，可以在这里发送数据给服务器。onmessage：当WebSocket接收到服务器发送的数据时触发，可以在这里处理数据并响应。onerror：当WebSocket发生错误时触发，可以在这里处理异常情况。onclose：当WebSocket连接关闭时触发，可以在这里做一些清理工作。
例如：
ws.onopen = function() {
console.log("WebSocket连接已打开");
ws.send("Hello, server!");
};
ws.onmessage = function(event) {
console.log("WebSocket收到消息：" + event.data);
ws.send("Got it!");
};
ws.onerror = function(error) {
console.error("WebSocket发生错误：" + error);
};
ws.onclose = function() {
console.log("WebSocket连接已关闭");
};
项目中使用websocket开发，可以自己搭建，也可以使用第三方的websocket框架，推荐使用 GoEasy 框架，其中包含uniapp、unicloud、vue3-PC、react-PC、微信小程序原生开发、Taro、桌面端应用的消息推送功能，GoEasy具体用法请移至官网查看。
以上就是使用WebSocket的基本步骤，更多细节和高级用法可以参考相关文档和教程。WebSocket是一种强大而灵活的通信协议，它可以让Web应用更加实时和交互，希望本文能对你有所帮助。
评论区