WebSocked基础

一. WebSocket 基本概念

WebSocket是什么?

WebSocket 是基于 TCP 的一种新的应用层网络协议。它提供了一个全双工的通道,允许服务器和客户端之间实时双向通信。因此,在 WebSocket 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输,客户端和服务器之间的数据交换变得更加简单。

与 HTTP 协议的区别

与 HTTP 协议相比,WebSocket 具有以下优点:

  • 更高的实时性能:WebSocket 允许服务器和客户端之间实时双向通信,从而提高了实时通信场景中的性能

  • 更少的网络开销:HTTP 请求和响应之间需要额外的数据传输,而 WebSocket 通过在同一个连接上双向通信,减少了网络开销

  • 更灵活的通信方式:HTTP 请求和响应通常是一一对应的,而 WebSocket 允许服务器和客户端之间以多种方式进行通信,例如消息 Push、事件推送等

  • 更简洁的 API:WebSocket 提供了简洁的 API,使得客户端开发人员可以更轻松地进行实时通信

当然肯定有缺点的:

  • 不支持无连接: WebSocket 是一种持久化的协议,这意味着连接不会在一次请求之后立即断开。这是有利的,因为它消除了建立连接的开销,但是也可能导致一些资源泄漏的问题

  • 不支持广泛: WebSocket 是 HTML5 中的一种标准协议,虽然现代浏览器都支持,但是一些旧的浏览器可能不支持 WebSocket

  • 需要特殊的服务器支持: WebSocket 需要服务端支持,只有特定的服务器才能够实现 WebSocket 协议。这可能会增加系统的复杂性和部署的难度

  • 数据流不兼容: WebSocket 的数据流格式与 HTTP 不同,这意味着在不同的网络环境下,WebSocket 的表现可能会有所不同

WebSocket工作原理

握手阶段

  1. WebSocket在建立连接时需要进行握手阶段。握手阶段包括以下几个步骤:
  • 客户端向服务端发送请求,请求建立WebSocket连接。请求中包含一个Sec-WebSocket-Key参数,用于生成WebSocket的随机密钥
  • 服务端接收到请求后,生成一个随机密钥,并使用随机密钥生成一个新的Sec-WebSocket-Accept参数
  • 客户端接收到服务端发送的新的Sec-WebSocket-Accept参数后,使用原来的随机密钥和新的Sec-WebSocket-Accept参数共同生成一个新的Sec-WebSocket-Key参数,用于加密数据传输
  • 客户端将新的Sec-WebSocket-Key参数发送给服务端,服务端接收到后,使用该参数加密数据传输
  1. 数据传输阶段

建立连接后,客户端和服务端就可以通过WebSocket进行实时双向通信。数据传输阶段包括以下几个步骤:

  • 客户端向服务端发送数据,服务端收到数据后将其转发给其他客户端

  • 服务端向客户端发送数据,客户端收到数据后进行处理

双方如何进行相互传输数据的 具体的数据格式是怎么样的呢?WebSocket 的每条消息可能会被切分成多个数据帧(最小单位)。发送端会将消息切割成多个帧发送给接收端,接收端接收消息帧,并将关联的帧重新组装成完整的消息。

发送方 -> 接收方:ping

接收方 -> 发送方:pong

ping 、pong 的操作,对应的是 WebSocket 的两个控制帧

  1. 关闭阶段
    当不再需要WebSocket连接时,需要进行关闭阶段。关闭阶段包括以下几个步骤:
  • 客户端向服务端发送关闭请求,请求中包含一个WebSocket的随机密钥

  • 服务端接收到关闭请求后,向客户端发送关闭响应,关闭响应中包含服务端生成的随机密钥

  • 客户端收到关闭响应后,关闭WebSocket连接

  • 总的来说,WebSocket通过握手阶段、数据传输阶段和关闭阶段实现了服务器和客户端之间的实时双向通信。

二. WebSocket 数据帧结构和控制帧结构

  1. 数据帧结构

WebSocket 数据帧主要包括两个部分:帧头和有效载荷。以下是 WebSocket 数据帧结构的简要介绍:

  • 帧头:帧头包括四个部分:fin、rsv1、rsv2、rsv3、opcode、masked 和 payload_length。其中,fin 表示数据帧的结束标志,rsv1、rsv2、rsv3 表示保留字段,opcode 表示数据帧的类型,masked 表示是否进行掩码处理,payload_length 表示有效载荷的长度
  • 有效载荷:有效载荷是数据帧中实际的数据部分,它由客户端和服务端进行数据传输
  1. 控制帧结构

除了数据帧之外,WebSocket 协议还包括一些控制帧,主要包括 Ping、Pong 和 Close 帧。以下是 WebSocket 控制帧结构的简要介绍:

  • Ping 帧:Ping 帧用于测试客户端和服务端之间的连接状态,客户端向服务端发送 Ping 帧,服务端收到后需要向客户端发送 Pong 帧进行响应
  • Pong 帧:Pong 帧用于响应客户端的 Ping 帧,它用于测试客户端和服务端之间的连接状态
  • Close 帧:Close 帧用于关闭客户端和服务端之间的连接,它包括四个部分:fin、rsv1、rsv2、rsv3、opcode、masked 和 payload_length。其中,opcode 的值为 8,表示 Close 帧

三. JavaScript 中 WebSocket 对象的属性和方法,以及如何创建和连接 WebSocket

WebSocket 对象的属性和方法:

  1. WebSocket 对象:WebSocket 对象表示一个新的 WebSocket 连接。
  2. WebSocket.onopen 事件处理程序:当 WebSocket 连接打开时触发。
  3. WebSocket.onmessage 事件处理程序:当接收到来自 WebSocket 的消息时触发。
  4. WebSocket.onerror 事件处理程序:当 WebSocket 发生错误时触发。
  5. WebSocket.onclose 事件处理程序:当 WebSocket 连接关闭时触发。
  6. WebSocket.send 方法:向 WebSocket 发送数据。
  7. WebSocket.close 方法:关闭 WebSocket 连接。

创建和连接 WebSocket:

  1. 创建 WebSocket 对象:
var socket = new WebSocket('ws://example.com');

其中,ws://example.com 是 WebSocket 的 URL,表示要连接的服务器。

  1. 连接 WebSocket:

使用 WebSocket.onopen 事件处理程序检查 WebSocket 是否成功连接。

socket.onopen = function() {console.log('WebSocket connected');
};
  1. 接收来自 WebSocket 的消息:

使用 WebSocket.onmessage 事件处理程序接收来自 WebSocket 的消息。

 socket.onmessage = function(event) {console.log('WebSocket message:', event.data);
};
  1. 向 WebSocket 发送消息:

使用 WebSocket.send 方法向 WebSocket 发送消息。

socket.send('Hello, WebSocket!');
  1. 关闭 WebSocket:

当需要关闭 WebSocket 时,使用 WebSocket.close 方法。

socket.close();

注意:在 WebSocket 连接成功打开和关闭时,会分别触发 WebSocket.onopenWebSocket.onclose 事件。在接收到来自 WebSocket 的消息时,会触发 WebSocket.onmessage 事件。当 WebSocket 发生错误时,会触发 WebSocket.onerror 事件。

四. webSocket简单示例

以下是一个简单的 WebSocket 编程示例,通过 WebSocket 向服务器发送数据,并接收服务器返回的数据:

  1. 首先,创建一个 HTML 文件,添加一个按钮和一个用于显示消息的文本框:
WebSocket 示例 发送消息
  1. 接下来,创建一个 JavaScript 文件(例如 main.js),并在其中编写以下代码:
// 获取按钮和文本框元素
const sendBtn = document.getElementById('sendBtn');
const messageBox = document.getElementById('messageBox');// 创建 WebSocket 对象
const socket = new WebSocket('ws://echo.websocket.org'); // 使用一个 WebSocket 服务器进行测试// 设置 WebSocket 连接打开时的回调函数
socket.onopen = function() {console.log('WebSocket 连接已打开');
};// 设置 WebSocket 接收到消息时的回调函数
socket.onmessage = function(event) {console.log('WebSocket 接收到消息:', event.data);messageBox.value += event.data + '\n';
};// 设置 WebSocket 发生错误时的回调函数
socket.onerror = function() {console.log('WebSocket 发生错误');
};// 设置 WebSocket 连接关闭时的回调函数
socket.onclose = function() {console.log('WebSocket 连接已关闭');
};// 点击按钮时发送消息
sendBtn.onclick = function() {const message = 'Hello, WebSocket!';socket.send(message);messageBox.value += '发送消息: ' + message + '\n';
};

#五. webSocket应用场景

  1. 实时通信:WebSocket 非常适合实时通信场景,例如聊天室、在线游戏、实时数据传输等。通过 WebSocket,客户端和服务器之间可以实时通信,无需依赖轮询,从而提高通信效率和减少网络延迟。
  2. 监控数据传输:WebSocket 可以在监控系统中实现实时数据传输,例如通过 WebSocket,客户端可以实时接收和处理监控数据,而无需等待轮询数据。
  3. 自动化控制:WebSocket 可以在自动化系统中实现远程控制,例如通过 WebSocket,客户端可以远程控制设备或系统,而无需直接操作。
  4. 数据分析:WebSocket 可以在数据分析场景中实现实时数据传输和处理,例如通过 WebSocket,客户端可以实时接收和处理数据,而无需等待数据存储和分析。
  5. 人工智能:WebSocket 可以在人工智能场景中实现实时数据传输和处理,例如通过 WebSocket,客户端可以实时接收和处理数据,而无需等待数据处理和分析。

六. WebSocket 错误处理

  1. WebSocket is not supported:当浏览器不支持 WebSocket 时,会出现此错误。解决方法是在浏览器兼容性列表中检查是否支持 WebSocket。

  2. WebSocket connection closed:当 WebSocket 连接被关闭时,会出现此错误。解决方法是在 WebSocket.onclose 事件处理程序中进行错误处理。

  3. WebSocket error:当 WebSocket 发生错误时,会出现此错误。解决方法是在 WebSocket.onerror 事件处理程序中进行错误处理。

  4. WebSocket timeout:当 WebSocket 连接超时时,会出现此错误。解决方法是在 WebSocket.ontimeout 事件处理程序中进行错误处理。

  5. WebSocket handshake error:当 WebSocket 握手失败时,会出现此错误。解决方法是在 WebSocket.onerror 事件处理程序中进行错误处理。

  6. WebSocket closed by server:当 WebSocket 连接被服务器关闭时,会出现此错误。解决方法是在 WebSocket.onclose 事件处理程序中进行错误处理。

  7. WebSocket closed by protocol:当 WebSocket 连接被协议错误关闭时,会出现此错误。解决方法是在 WebSocket.onclose 事件处理程序中进行错误处理。

  8. WebSocket closed by network:当 WebSocket 连接被网络错误关闭时,会出现此错误。解决方法是在 WebSocket.onclose 事件处理程序中进行错误处理。

  9. WebSocket closed by server:当 WebSocket 连接被服务器错误关闭时,会出现此错误。解决方法是在 WebSocket.onclose 事件处理程序中进行错误处理。

  10. 通过为 WebSocket 对象的 oncloseonerrorontimeout 事件添加处理程序,可以及时捕获和处理 WebSocket 错误,从而确保程序的稳定性和可靠性。

#七.利用单例模式创建完整的wesocket连接

class webSocketClass {constructor(thatVue) {this.lockReconnect = false;this.localUrl = process.env.NODE_ENV === 'production' ? 你的websocket生产地址' : '测试地址';this.globalCallback = null;this.userClose = false;this.createWebSocket();this.webSocketState = falsethis.thatVue = thatVue}createWebSocket() {let that = this;// console.log('开始创建websocket新的实例', new Date().toLocaleString())if( typeof(WebSocket) != "function" ) {alert("您的浏览器不支持Websocket通信协议,请更换浏览器为Chrome或者Firefox再次使用!")}try {that.ws = new WebSocket(that.localUrl);that.initEventHandle();that.startHeartBeat()} catch (e) {that.reconnect();}}//初始化initEventHandle() {let that = this;// //连接成功建立后响应that.ws.onopen = function() {console.log("连接成功");}; //连接关闭后响应that.ws.onclose = function() {// console.log('websocket连接断开', new Date().toLocaleString())if (!that.userClose) {that.reconnect(); //重连}};that.ws.onerror = function() {// console.log('websocket连接发生错误', new Date().toLocaleString())if (!that.userClose) {that.reconnect(); //重连}};that.ws.onmessage = function(event) {that.getWebSocketMsg(that.globalCallback);// console.log('socket server return '+ event.data);};}startHeartBeat () {// console.log('心跳开始建立', new Date().toLocaleString())setTimeout(() => {let params = {request: 'ping',}this.webSocketSendMsg(JSON.stringify(params))this.waitingServer()}, 30000)}//延时等待服务端响应,通过webSocketState判断是否连线成功waitingServer () {this.webSocketState = false//在线状态setTimeout(() => {if(this.webSocketState) {this.startHeartBeat()return}// console.log('心跳无响应,已断线', new Date().toLocaleString())try {this.closeSocket()} catch(e) {console.log('连接已关闭,无需关闭', new Date().toLocaleString())}this.reconnect()//重连操作}, 5000)}reconnect() {let that = this;if (that.lockReconnect) return;that.lockReconnect = true; //没连接上会一直重连,设置延迟避免请求过多setTimeout(function() {that.createWebSocket();that.thatVue.openSuccess(that) //重连之后做一些事情that.thatVue.getSocketMsg(that)that.lockReconnect = false;}, 15000);}webSocketSendMsg(msg) {this.ws.send(msg);}getWebSocketMsg(callback) {this.ws.onmessage = ev => {callback && callback(ev);};}onopenSuccess(callback) {this.ws.onopen = () => {// console.log("连接成功", new Date().toLocaleString())callback && callback()}}closeSocket() {let that = this;if (that.ws) {that.userClose = true;that.ws.close();}}}export default webSocketClass;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/55634.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《基于AGCN-LSTM模型的海上风电场功率概率预测 》

本专栏栏目提供文章与程序复现思路,具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

端到端自动驾驶模型SparseDrive部署过程

SparseDrive 论文链接 https://arxiv.org/pdf/2405.19620 仓库链接 https://github.com/swc-17/SparseDrive 论文和模型的相关介绍大家可以参考其他博客的介绍,这里只介绍模型部署的过程和中间可能遇到的问题解决办法,以及代码解析和使用记录。 模型部署…

解决ubuntu20 启动卡死在 installing open-vm-tools 问题

------------------------------------------------------------------------------- 1. 解决ubuntu20 启动卡死在 installing open-vm-tools 问题 ------------------------------------------------------------------------------- 最近VMware 安装ubuntu-20.04.6-desktop…

FLINK SQL时区问题

SQL时区问题 在Flink SQL中,时区问题是一个需要特别关注的点,因为时区的不一致可能会导致数据的不一致性。以下是对Flink SQL时区问题的详细解释和解决方案: 一、时区问题背景 时间类型与时区: 在Flink SQL中,时间类…

CyberRT通信介绍与基于Reader、Writer的通信实践(apollo9.0)

目录 数据通信场景 CyberRT中的通信方式 ​编辑 通信模式 话题通信 服务通信 参数通信 protobuf protobuf简介 protobuf文件编写 topic通信实验 实验环境 实验准备 代码编写 定义消息格式 发送消息 接收消息 定义编译规则 程序编译 运行程序 数据通信场景 …

fabric-sdk-go

Fabric-SDK-go 区块链网络搭建fabric-sdk代码代码结构:代码eg: 区块链网络搭建 使用fabric-sample的网络结构用容器搭建起测试网络即可。 fabric-sdk代码 代码很简易,主要为了了解怎么使用fabric为编程人员提供的sdk从而提供HTTP接口的情况…

Git 修改分支名

在Git中修改分支名称&#xff0c;可以使用以下步骤&#xff1a; 切换到要重命名分支之外的其他分支&#xff1a; git checkout <其他分支名>重命名本地分支&#xff1a; git branch -m <旧分支名> <新分支名>如果需要删除远程的旧分支并创建新分支&#xff1…

浅谈华为 HarmonyOS Next

1. 万物互联时代的新机遇 随着万物互联时代的到来&#xff0c;智能应用从几十亿部手机扩展到数百亿个IoT设备&#xff0c;深刻改变了人们的生活方式。这为我们应用开发者带来了新的机遇和挑战。 机遇 : 目前正处于万物互联时代的前夕&#xff0c;正在经历手机单设备到全场景多…

技术分享:A-23OH型树脂在汽车涂装废溶剂回收中的应用

在当今汽车制造业竞争激烈的环境下&#xff0c;提高生产效率、降低成本的同时&#xff0c;满足环保要求已成为各制造商追求的核心目标。水性涂料因其环保、节能等多重优势&#xff0c;在汽车涂装领域的应用日益广泛。然而&#xff0c;随之而来的喷涂废溶剂处理问题也日益凸显。…

从 Hadoop 迁移到数据 Lakehouse 的架构师指南

从 Hadoop 到数据湖仓一体架构的演变代表了数据基础架构的重大飞跃。虽然 Hadoop 曾经以其强大的批处理能力统治着大数据领域&#xff0c;但如今的组织正在寻求更敏捷、更具成本效益和现代化的解决方案。尤其是当他们越来越多地开始实施 AI 计划时。根本没有办法让 Hadoop 为 A…

计算机网络架构实例

小型企业网络 1. 终端设备&#xff1a; - 员工的台式电脑和笔记本电脑&#xff0c;用于日常办公&#xff0c;如文档处理、邮件收发、业务软件使用等。 - 智能手机和平板电脑&#xff0c;方便员工在外出或移动办公时也能接入公司网络&#xff0c;查看邮件和处理紧急事务。 2.…

三周精通FastAPI:1 第一步入门

FastAPI是一个非常棒的python web和api框架&#xff0c;准备用三周的时间“精通它” 学习流程参考FastAPI官网的用户教程&#xff1a;教程 - 用户指南 - FastAPI 学前提示 运行代码 所有代码片段都可以复制后直接使用&#xff08;它们实际上是经过测试的 Python 文件&#x…

UG NX12.0建模入门笔记:1.0 UG NX12.0安装教程

一、如何关闭防火墙&#xff1f; 提示&#xff1a;安装软件之前&#xff0c;建议先 关闭防火墙和杀毒软件&#xff01;&#xff01;&#xff01; 文章目录 一、如何关闭防火墙&#xff1f;二、UG NX12.0安装包三、UG NX12.0安装教程1.新建文件夹2.安装JAVA环境3.安装许可证管理…

LeetCode_2235. 两整数相加_java

1、问题 2235. 两整数相加https://leetcode.cn/problems/add-two-integers/ 给你两个整数 num1 和 num2&#xff0c;返回这两个整数的和。 示例 1&#xff1a; 输入&#xff1a;num1 12, num2 5 输出&#xff1a;17 解释&#xff1a;num1 是 12&#xff0c;num2 是 5 &am…

智慧监管:EasyCVR视频汇聚智能分析平台助力有限空间作业实现全天候可视化监控

随着工业化和城市化进程的加快&#xff0c;有限空间作业&#xff08;如地下管道、储罐、隧道等&#xff09;在各类企事业单位中日益频繁。然而&#xff0c;这类作业环境复杂、危险系数高&#xff0c;对作业人员的安全管理和实时监控提出了严峻挑战。为了保障有限空间作业的安全…

021_Thermal_Transient_in_Matlab统一偏微分框架之热传导问题

Matlab求解有限元专题系列 固体热传导方程 固体热传导的方程为&#xff1a; ρ C p ( ∂ T ∂ t u t r a n s ⋅ ∇ T ) ∇ ⋅ ( q q r ) − α T d S d t Q \rho C_p \left( \frac{\partial T}{\partial t} \mathbf{u}_{\mathtt{trans}} \cdot \nabla T \right) \nab…

开发一个微信小程序要多少钱?

在当今数字化时代&#xff0c;微信小程序成为众多企业和个人拓展业务、提供服务的热门选择。那么&#xff0c;开发一个微信小程序究竟需要多少钱呢&#xff1f; 开发成本主要取决于多个因素。首先是功能需求的复杂程度。如果只是一个简单的信息展示小程序&#xff0c;功能仅限…

Hadoop集群基础搭建

目录 一.虚拟机安装 1.配置虚拟机的ip 2.配置本机的ip 3.新建虚拟机 4.克隆三台虚拟机 二.虚拟机网络配置 1.修改ip配置 2.配置主机名和主机映射 3.配置SSH免密登陆 三.安装JDK 1.tar命令解压JDK安装包 2.配置JDK的环境变量 四.安装Hadoop 1.tar命令解压Hadoop安…

Maven项目打包为jar的几种方式

1.直接打包 通过不打依赖包的方式&#xff0c;仅仅只是打包出项目中的代码到JAR包中。在POM文件合适的位置添加如下plugin即可&#xff0c;随后执行maven install <plugin> <groupId>org.apache.maven.plugins</groupId> &l…

快速了解kubernetes中的存储管理

目录 一 configmap 1.1 configmap的功能 1.2 configmap的使用场景 1.3 configmap创建方式 1.3.1 字面值创建 1.3.2 通过文件创建 1.3.3 通过目录创建 1.3.4 通过yaml文件创建 1.3.5 configmap的使用方式 1.3.5.1 使用configmap填充环境变量 1.3.5.2 通过数据卷使用c…