websocket详解

一、什么是Websocket

WebSocket 是一种在单个 TCP 连接上进行 全双工 通信的协议，它可以让客户端和服务器之间进行实时的双向通信。

WebSocket 使用一个长连接，在客户端和服务器之间保持持久的连接，从而可以实时地发送和接收数据。

在 WebSocket 中，客户端和服务器之间可以互相发送消息，客户端可以使用 JavaScript 中的 WebSocket API 发送消息到服务器，也可以接收服务器发送的消息。

二、Websocket特点

简单来说，websocket 具有 双向通信，实时性强，支持二进制，控制开销 的特点。

1、协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

2、实时通信，服务器可以随时主动给客户端下发数据。

3、保持连接状态，Websocket需要先创建连接，所以是一种有状态的协议，之后通信时就可以省略部分状态信息。

4、控制开销，连接创建后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小。在不包含扩展的情况下，对于服务器到客户端的内容，此头部大小只有2至10字节（和数据包长度有关）；对于客户端到服务器的内容，头部还需要加上额外的4字节的掩码。

5、实现简单，建立在 TCP 协议之上，服务器端的实现比较容易，并且没有同源限制，客户端可以与任意服务器通信。

6、支持二进制传输，Websocket定义了二进制帧，可以发送文本，也可以发送二进制数据。

7、与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

8、支持扩展，用户可以扩展协议、实现部分自定义的子协议，如部分浏览器支持压缩等。

三、WebSocket与HTTP的区别

websocket和http都是基于TCP的应用层协议，使用的也是 80 端口（若运行在 TLS 之上时，默认使用 443 端口）。

其区别主要就在于连接的性质和通信方式。

WebSocket是一种双向通信的协议，通过一次握手即可建立持久性的连接，服务器和客户端可以随时发送和接收数据。

而HTTP协议是一种请求-响应模式的协议，每次通信都需要发送一条请求并等待服务器的响应。

WebSocket的实时性更好，延迟更低，并且在服务器和客户端之间提供双向的即时通信能力，适用于需要实时数据传输的场景。

四、常见应用场景

  1. 实时聊天：WebSocket能够提供双向、实时的通信机制，使得实时聊天应用能够快速、高效地发送和接收消息，实现即时通信。
  2. 实时协作：用于实时协作工具，如协同编辑文档、白板绘画、团队任务管理等，团队成员可以实时地在同一页面上进行互动和实时更新。
  3. 实时数据推送：用于实时数据推送场景，如股票行情、新闻快讯、实时天气信息等，服务器可以实时将数据推送给客户端，确保数据的及时性和准确性。
  4. 多人在线游戏：实时的双向通信机制，适用于多人在线游戏应用，使得游戏服务器能够实时地将游戏状态和玩家行为传输给客户端，实现游戏的实时互动。
  5. 在线客服：WebSocket可以用于在线客服和客户支持系统，实现实时的客户沟通和问题解决，提供更好的用户体验，减少等待时间。

五、websocket实例

在这里插入图片描述
为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

1）Websocket事件

  • onopen: 客户端和服务器建立连接后触发，被称为客户端和服务器之间的初始握手。如果接收到open, 说明已经连接成功，可以进行通信了。
  • onmessage： 接收到消息时触发。服务器发送给客户端的消息可包括纯文本消息，二进制数据（Blob消息或者ArrayBuffer消息）。
  • onerror： 响应意外故障时触发，在错误之后总是会终止连接。
  • onclose：连接关闭时触发。一旦连接关闭后，客户端和服务端将不会再进行消息的收发。也可主动调用close()方法关闭连接。

2）Websocket方法

  • send() : 在连接成功后关闭前，发送消息（onopen后和onclose前才可发送消息）
  • close() : 关闭连接
3）Websocket对象属性
  • readyState：只读属性，表示Websocket的连接状态。
    • CONNECTING — 正在连接中，对应的值为 0；
    • OPEN — 已经连接并且可以通讯，对应的值为 1；
    • CLOSING — 连接正在关闭，对应的值为 2；
    • CLOSED — 连接已关闭或者没有连接成功，对应的值为 3。
  • bufferedAmount：只读属性。已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。
  • Protocol：打开握手期间使用的协议。

4）websocket请求报文

// websocket握手：客户端发送的请求头
GET wss://www.example.cn/webSocket HTTP/1.1  // 使用的https协议, 对应的wss请求
Host: www.example.cn
Connection: Upgrade  // 带upgrade头的http1.1消息必须含有connection头，表示任何接受此消息的人都在转发此消息之前处理掉connection中指定的域（即不转发upgrade域）
Upgrade: websocket  				// 定义转换协议的header域，如果服务器支持，客户端希望使用已经建立好的http（tcp）连接
Sec-WebSocket-Version: 13 	// 客户端支持的WebSocket协议的版本列表
Origin: http://example.cn 	// Origin为安全使用，防止跨站攻击，浏览器一般会使用这个来标识原始域，类似于Referer。但与Referer 不同的是，Origin 只包含了协议和主机名称
Sec-WebSocket-Key: afmbhhBRQuwCLmnWDRWHxw== // 客户端随机生成的字符串，服务器会使用此字段组装成另一个key值（构造出一个SHA-1 的信息摘要）放在握手返回信息里，用于客户端到服务器websocket的初始握手，避免夸协议攻击
Sec-WebSocket-Protocol: chat, superchat 		// 首标，告诉客户端应用程序可使用的协议
Sec-WebSocket-Extensions: permessage-deflate // 首标，permessage-deflate：协商使用传输数据压缩，client_max_window_bits：擦采用LZ77压缩算法时，滑动窗口相关SIZE大小// websocket握手：服务器发出的响应头
HTTP/1.1 101 // 服务端响应101状态码、Upgrade和Sec-WebSocket-Accept首标才算连接成功，否则不能连接成功。
Server: nginx/1.12.2
Date: Sat, 11 Aug 2018 13:21:27 GMT
Connection: upgrade // 指定一项或多项协议名，按优先级排序，以逗号分隔，这里表示升级为 WebSocket 协议
Upgrade: websocket
Sec-WebSocket-Accept: sLMyWetYOwus23qJyUD/fa1hztc= // 根据Sec-WebSocket-Key加上特殊字符串，计算SHA-1摘要，再进行 Base64编码协议生成（可尽量避免普通HTTP请求被误认为WebSocket协议）
Sec-WebSocket-Protocol: chat
Sec-WebSocket-Extensions: permessage-deflate;client_max_window_bits=15

在这里插入图片描述
在这里插入图片描述

5）简单应用示例

<template><div><input type="text" :value="inputVal" /><button @click="handleSend">send</button></div>
</template><script setup lang="ts">
import { ref } from "vue";const inputVal = ref("");const handleSend = () => {socket.send(inputVal.value);
};// 创建WebSocket对象，并指定服务器的地址
const socket = new WebSocket("ws://82.157.123.54:9010/ajaxchattest");// 与服务器建立连接：发送消息到服务器
socket.onopen = () => {console.log("connect: ");
};
// 收到服务器发送的消息：event处理服务器返回的数据
socket.onmessage = (event) => {console.log("receive: ", event.data);
};
// 连接或通信过程中发生错误
socket.onerror = (event) => {console.log("errror: ", event.error);
};
// 与服务器断开连接
socket.onclose = (event) => {console.log("close: ", event.code);
};
</script>

六、websocket心跳机制

1、作用：使 WebSocket 连接保持长连接，避免断开连接的情况发生。同时，心跳机制也可以检查WebSocket连接的状态，及时处理异常情况。还可以减少WebSocket连接及服务器资源的消耗。

2、原理：是利用心跳包及时发送和接收数据，保证WebSocket长连接不被断开。

3、详细流程：

  • 客户端建立WebSocket连接。

  • 客户端向服务器发送心跳数据包（心跳包是指在一定时间间隔内，WebSocket发送的空数据包），服务器接收并返回一个表示接收到心跳数据包的响应。

  • 当服务器没有及时接收到客户端发送的心跳数据包时，服务器会发送一个关闭连接的请求。

  • 服务器定时向客户端发送心跳数据包，客户端接收并返回一个表示接收到心跳数据包的响应。

  • 当客户端没有及时接收到服务器发送的心跳数据包时，客户端会重新连接WebSocket

4、实现方式

  1. 使用setInterval定时发送心跳包。对服务器造成很大的压力，因为即使WebSocket连接正常，也要定时发送心跳包，从而消耗服务器资源。

  2. 在前端监听到WebSocket的onclose()事件时，重新创建WebSocket连接。减轻了服务器的负担，但是在重连时可能会丢失一些数据。

5、WebSocket重连

重连意思就是在WebSocket断开之后重新建立连接，这里指由于异常断开需要重新连接。

常用实现方法有下：
1）前端监听WebSocket的onclose()事件，重新创建WebSocket连接。
2）使用WebSocket插件或库，例如Sockjs、Stompjs等。
3）使用心跳机制检测WebSocket连接状态，自动重连。
4）使用断线重连插件或库，例如ReconnectingWebSocket等。

6、通过WebSocket心跳机制，实现重连

思路： 在建立长连接的时候开启心跳 > 通过和服务端发送信息，得到服务端给返回的信息，然后重置心跳 > 清除时间，再重新开启心跳。（如果网络断开的话，会执行方法，重新连接）

<template><div><input type="text" :value="inputVal" /><button @click="handleSend">send</button></div>
</template><script setup lang="ts">
import { ref } from "vue";const inputVal = ref("");let ws: any = null; // websocket实例
let isConnect: Boolean = false; // 连接标识 避免重复连接
let reciveCode: any = null; // 断线重连后，延迟5秒重新创建WebSocket连接，reciveCode用来存储延迟请求的代码
let timeoutObj: any = null; // 延时发送消息对象（启动心跳时新建这个对象，收到消息后重置这个对象）// websocket重连
const reConnect = () => {// 如果已经连上就不在重连了if (isConnect) {return;}clearTimeout(reciveCode);// 延迟5秒重连 避免过多次过频繁请求重连reciveCode = setTimeout(() => {newWebSocket();}, 5000);
};// 创建并初始化websocket实例
const newWebSocket = () => {// 判断当前环境是否支持Websocketif (window.WebSocket) {if (!ws) {// 创建WebSocket对象，并指定服务器的地址ws = new WebSocket("ws://82.157.123.54:9010/ajaxchattest");}// 与服务器建立连接ws.onopen = () => {console.log("connect: ");isConnect = true;// 5分钟发一次心跳，比server端设置的连接时间稍微小一点，在接近断开的情况下以通信的方式去重置连接时间。timeoutObj = setTimeout(() => {if (isConnect) ws.send(inputVal.value);}, 300000);};// 收到服务器发送的消息ws.onmessage = (event: any) => {console.log("receive: ", event, event.data);clearTimeout(timeoutObj);};// 连接或通信过程中发生错误ws.onerror = (event: any) => {console.log("errror: ", event.error);isConnect = false; //连接错误 需要重连reConnect();};// 与服务器断开连接ws.onclose = (event: any) => {console.log("close: ", event.code);isConnect = false;// 连接错误 需要重连reConnect();};} else {console.log("当前浏览器不支持websocket");}
};const handleSend = () => {newWebSocket();if (ws.readyState === ws.OPEN) {// ws开启状态ws.send(inputVal.value);} else if (ws.readyState === ws.CONNECTING) {// 正在开启状态，则等待1s后重新调用setTimeout(function () {handleSend();}, 1000);} else {// 若未开启 ，则等待1s后重新调用setTimeout(function () {handleSend();}, 1000);}
};
</script>

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

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

相关文章

ElasticSearch快速入门

ElasticSearch快速入门

一、全文检索 1、什么是全文检索 全文索引是一种通过对文本内容进行全面索引和搜索的技术。它可以快速的在大量文本数据中查找包含特定关键词或短语的文档&#xff0c;并返回相关的搜索结果。 全文检索广泛应用于各种信息管理系统和应用中&#xff0c;如搜索引擎、文档管理系…
阅读更多...
Android SdkManager简介

Android SdkManager简介

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、商业变现、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览三、 安装使用3.1 安装3.2 使用3.3 选项…
阅读更多...
量化交易：开发传统趋势策略之---双均线策略

量化交易：开发传统趋势策略之---双均线策略

本文以双均线策略为例&#xff0c;描述如何在BigQuant策略平台上&#xff0c;开发一个传统的趋势跟踪策略&#xff0c;以更好地理解BigQuant回测机制。 双均线策略的策略思想是&#xff1a;当短期均线上穿长期均线时&#xff0c;形成金叉&#xff0c;此时买入股票。当短期均线…
阅读更多...
【2023春李宏毅机器学习】生成式学习的两种策略

【2023春李宏毅机器学习】生成式学习的两种策略

文章目录 1 各个击破2 一步到位3 两种策略的对比 生成式学习的两种策略&#xff1a;各个击破、一步到位 对于文本生成&#xff1a;把每一个生成的元素称为token&#xff0c;中文当中token指的是字&#xff0c;英文中的token指的是word piece。比如对于unbreakable&#xff0c;他…
阅读更多...
优化｜优化求解器自动调参

优化｜优化求解器自动调参

原文信息&#xff1a;MindOpt Tuner: Boost the Performance of Numerical Software by Automatic Parameter Tuning 作者&#xff1a;王孟昌 &#xff08;达摩院决策智能实验室MindOpt团队成员&#xff09; 一个算法开发者&#xff0c;可能会幻想进入这样的境界&#xff1a;算…
阅读更多...
【Android】如何使用模拟器调试安卓项目

【Android】如何使用模拟器调试安卓项目

1、电脑安装逍遥模拟器&#xff0c;用来跑安卓项目。安装好模拟器之后&#xff0c;直接起安卓项目&#xff0c;自动会在选择设备处显示 2、如果前端是安卓后端是其他语言的话&#xff0c;这种前后端分离的模式&#xff0c;需要监听端口&#xff0c;原因是运行安卓和后端编译器都…
阅读更多...
NC65 如何设置现金流量明细查询的查询框中核算账簿可多选？？

NC65 如何设置现金流量明细查询的查询框中核算账簿可多选？？

NC65 如何设置现金流量明细查询的查询框中核算账簿可多选&#xff1f;&#xff1f; NC65 如何设置现金流量明细查询的查询框中核算账簿可多选&#xff1f;&#xff1f;效果如下图 解决方案二开&#xff0c;即在 nc.ui.gl.cashflowcase.CashFlowDetailQueryUI 的 onButtonQuer…
阅读更多...
安装银河麒麟linux系统docker(docker-compose)环境，注意事项(一定能解决,有环境资源)

安装银河麒麟linux系统docker(docker-compose)环境，注意事项(一定能解决,有环境资源)

1&#xff1a;安装docker环境必须使用麒麟的版本如下 2&#xff1a;使用docker-compse up -d启动容器遇到的文件 故障1&#xff1a;如果运行docker-compose up 报“Cannot create redo log files because data files are corrupt or the database was not shut down cleanly a…
阅读更多...
使用docker部署nacos分布式集群

使用docker部署nacos分布式集群

本文目的 在服务器中部署nacos集群&#xff0c;并连接外置数据库关于外置的mysql部署和单例nacos如何部署请看下面的两个链接 如何使用docker部署mysql docker部署容器化mysql5.7-CSDN博客 如何使用docker部署nacos 容器化部署Nacos&#xff1a;从环境准备到启动-CSDN博客…
阅读更多...
mfc140u.dll丢失的解决方法，以及针对每个解决mfc140u.dll丢失办法的优缺点

mfc140u.dll丢失的解决方法，以及针对每个解决mfc140u.dll丢失办法的优缺点

在使用电脑的过程中&#xff0c;有时会遇到一些与动态链接库文件&#xff08;DLL&#xff09;相关的错误。其中&#xff0c;mfc140u.dll丢失是一种常见的问题&#xff0c;它可能导致应用程序无法正常运行。在本文中&#xff0c;我们将探讨关于mfc140u.dll丢失的解决办法&#x…
阅读更多...
WordPress主题WoodMart v7.3.2 WooCommerce主题和谐汉化版下载

WordPress主题WoodMart v7.3.2 WooCommerce主题和谐汉化版下载

WordPress主题WoodMart v7.3.2 WooCommerce主题和谐汉化版下载 WoodMart是一款出色的WooCommerce商店主题&#xff0c;它不仅提供强大的电子商务功能&#xff0c;还与流行的Elementor页面编辑器插件完美兼容。 主题文件在WoodMart Theme/woodmart.7.3.2.zip&#xff0c;核心在P…
阅读更多...
利用 Pandoc + ChatGPT 优雅地润色论文，并保持 Word 公式格式：Pandoc将Word和LaTeX文件互相转化

利用 Pandoc + ChatGPT 优雅地润色论文，并保持 Word 公式格式：Pandoc将Word和LaTeX文件互相转化

论文润色完美解决方案&#xff1a;Pandoc 与 ChatGPT 的强强联合 写在最前面其他说明 一、通过 Pandoc 将 Word 转换为 LaTeX 的完整指南步骤 1: 安装 PandocWindows:macOS:Linux: 步骤 2: 准备 Word 文档步骤 3: 转换文档步骤 4: 检查并调整输出步骤 5: 编译 LaTeX 文档总结 二…
阅读更多...
Ubuntu 22.04安装Rust编译环境并且测试

Ubuntu 22.04安装Rust编译环境并且测试

我参考的博客是《Rust使用国内Crates 源、 rustup源 |字节跳动新的 Rust 镜像源以及安装rust》 lsb_release -r看到操作系统版本是22.04,uname -r看到内核版本是uname -r。 sudo apt install -y gcc先安装gcc&#xff0c;要是结果给我的一样的话&#xff0c;那么就是安装好了…
阅读更多...
【SpringBoot篇】分页查询 | 扩展SpringMvc的消息转换器

【SpringBoot篇】分页查询 | 扩展SpringMvc的消息转换器

文章目录 &#x1f6f8;什么是分页查询&#x1f339;代码实现⭐问题&#x1f384;解决方法 做了几个项目&#xff0c;发现在这几个项目里面&#xff0c;都实现了分页查询效果&#xff0c;所以就总结一下&#xff0c;方便学习 我们基于黑马程序员的苍穹外卖来讲解分页查询的要点…
阅读更多...
Java中如何通过路径表达式找值：XPath和JsonPath以及SpEL详解及对比

Java中如何通过路径表达式找值：XPath和JsonPath以及SpEL详解及对比

大家好&#xff0c;我是G探险者。 我们编程时&#xff0c;在前后端数据交互和传输过程中&#xff0c;往往需要对报文中的某个字段或者某个标签的值进行解析读取&#xff0c;报文通常是以json或者xml作为数据交换格式&#xff0c;而json和xml这两种格式的报文结构都是具备一定的…
阅读更多...
docker容器自启动

docker容器自启动

场景 当服务器关机重启后&#xff0c;docker容器每次都要去docker start 容器id 怎么可以下次让它自启动呢&#xff1f; 解决 先 # docker ps -a 查到之前启动过的容器id # docker update --restartalways 容器id重启后&#xff0c;reboot&#xff0c;就不用再单独去启动容…
阅读更多...
string类的总结

string类的总结

目录 1.为什么要学习string类 2.string的标准库 3.string类的常用接口说明 1.string类对象的常见构造 2.string类对象的容量操作 3.string类对象的3种遍历方法 3.1 [ ] 下标 3.2 基于范围的for循环 3.3 迭代器 4 string类对象的元素访问 4.1 operator[]&#xff1a; 4.…
阅读更多...
目标检测—YOLO系列(二 ) 全面解读复现YOLOv1 PyTorch

目标检测—YOLO系列(二 ) 全面解读复现YOLOv1 PyTorch

精读论文 前言 从这篇开始&#xff0c;我们将进入YOLO的学习。YOLO是目前比较流行的目标检测算法&#xff0c;速度快且结构简单&#xff0c;其他的目标检测算法如RCNN系列&#xff0c;以后有时间的话再介绍。 本文主要介绍的是YOLOV1&#xff0c;这是由以Joseph Redmon为首的…
阅读更多...
交通 | 神奇动物在哪里？Operations Research经典文章

交通 | 神奇动物在哪里？Operations Research经典文章

论文作者&#xff1a;Robert G. Haight, Charles S. Revelle, Stephanie A. Snyder​ 论文原文&#xff1a;Robert G. Haight, Charles S. Revelle, Stephanie A. Snyder, (2000) An Integer Optimization Approach to a Probabilistic Reserve Site Selection Problem. Operat…
阅读更多...
VR智慧景区：VR赋能文旅产业，激活消费潜能

VR智慧景区：VR赋能文旅产业，激活消费潜能

随着国家数字化战略的不断深入实施&#xff0c;文旅产业数字化转型的步伐也在逐渐加快&#xff0c;以VR技术赋能文旅产业&#xff0c;让文旅景区线上线下双渠道融合&#xff0c;进一步呈现文化底蕴、激活消费潜能。 VR智慧景区以沉浸式、互动式、科技感的方式&#xff0c;将景区…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023