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应用更加实时和交互,希望本文能对你有所帮助。
评论区