目 录CONTENT

文章目录

WebSocket:HTML5提供的全双工通讯技术,让你的网站更加实时!

萧瑟
2023-05-15 / 0 评论 / 0 点赞 / 94 阅读 / 3,604 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-08-04,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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 如何建立连接

  1. 客户端向服务器发送一个HTTP请求,请求头中包含了一些特殊的字段,如Upgrade、Connection、Sec-WebSocket-Key等,表示这是一个升级协议的请求。

  2. 服务器收到请求后,如果同意升级协议,就会返回一个HTTP响应,响应头中也包含了一些特殊的字段,如Upgrade、Connection、Sec-WebSocket-Accept等,表示这是一个升级协议的响应。

  3. 客户端和服务器通过HTTP握手后,就建立了一个WebSocket连接,后续的数据交换就遵循WebSocket协议的格式,不再使用HTTP协议。

测试地址:https://www.goeasy.io/cn/demos/demos.html

请求端👇️
image-1684222873362

图中的几个注意的地方:
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);

image-1684229540025

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


weixin

0

评论区