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 = () => {
  // 判断当前环境是否支持Websocket
  if (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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

工业镜头中远心镜头的特点

工业镜头中远心镜头的特点

远心镜头 在Z轴&#xff08;光轴&#xff09;方向&#xff0c;理论上具有同样成像范围。 消除了透视效应。 消除了渐晕现像。
阅读更多...
OpenCV快速入门：像素操作和图像变换

OpenCV快速入门：像素操作和图像变换

文章目录 前言1. 像素操作1.1 像素统计1.2 两个图像之间的操作1.2.1 图像加法操作1.2.3 图像加权混合 1.3 二值化1.4 LUT&#xff08;查找表&#xff09;1.4.1 查找表原理1.4.2 代码演示 2 图像变换2.1 旋转操作2.1.1 旋转的基本原理2.1.2 代码实现 2.2 缩放操作2.3 平移操作2.…
阅读更多...
【字符编码系列一】ASCII编码是什么？

【字符编码系列一】ASCII编码是什么？

介绍 ASCII 编码于 1967 年第一次发布&#xff0c;最后一次更新是在 1986 年&#xff0c;迄今为止共收录了 128 个字符&#xff0c;包含了基本的拉丁字母&#xff08;英文字母&#xff09;、阿拉伯数字&#xff08;也就是 1234567890&#xff09;、标点符号&#xff08;,.!等&…
阅读更多...
直线插补-逐点比较法

直线插补-逐点比较法

直线插补-逐点比较法 逐点比较法四个节拍的工作流程如图所示举例1 逐点比较法 逐点比较法逐点比较法是通过逐点比较刀具与所需插补曲线之间的相对位置&#xff0c;确定刀具的进给方向&#xff0c;进而加工出工件轮廓的插补方法。刀具从加工起点开始&#xff0c;按照“靠近曲线…
阅读更多...
TP_Link WR886N 硬改闪存16M内存64M,刷入openwrt

TP_Link WR886N 硬改闪存16M内存64M,刷入openwrt

一、换内存&#xff0c;拆闪存&#xff1a; 1、先原机开机试试是否功能正常&#xff1b; 2、拆机&#xff0c;比较难拆&#xff0c;容易坏外壳&#xff1b; 3、找到内存和闪存&#xff0c;用胶带把边上的小元件&#xff0c;电阻都贴好&#xff1b; 4、加助焊油&#xff0c;用风…
阅读更多...
人脸识别4G执法记录仪、一体化智能AI布控球在智慧社区、智能网格中的应用

人脸识别4G执法记录仪、一体化智能AI布控球在智慧社区、智能网格中的应用

智慧社区守护者&#xff1a;人脸识别与智能监控技术的融合创新 随着城市的飞速发展和科技的不断进步&#xff0c;智慧社区和智能网格的概念已经成为现代城市管理的一个重要趋势。在这一过程中&#xff0c;人脸识别技术、4G执法记录仪以及一体化智能AI布控球等智能监控设备&…
阅读更多...
探索计算机视觉技术的应用前景

探索计算机视觉技术的应用前景

计算机视觉技术是人工智能领域中一项至关重要的技术&#xff0c;它通过模拟人类视觉系统的工作原理&#xff0c;使计算机能够以一种类似于人类的方式理解和解释图像和视频。这项技术不仅在学术界受到了广泛关注&#xff0c;而且在商业领域也得到了广泛应用。 计算机视觉技术的应…
阅读更多...
Libvirt-Qemu-Kvm 操作手记

Libvirt-Qemu-Kvm 操作手记

(持续更新~) 本文主要用于记录在操作libvirt qemu kvm过程中遇到的问题及原因分析。 Hugepage 让qemu使用大页可以减少tdp的size&#xff0c;一定程度上可以提高性能&#xff1b;使用大页可以用memfd或者file backend。 memfd 操作步骤如下&#xff1a; 在系统中reserv…
阅读更多...
接口测试系列之 —— 接口安全测试

接口测试系列之 —— 接口安全测试

“开源 Web 应用安全项目”(OWASP)在 2019 年发布了 API 十大安全风险 《OWASP API 安全 Top10》&#xff1a;失效的对象级别授权、失效的用户身份验证、过 度的数据暴露、资源缺乏和速率限制、失效的功能级授权、批量分配、安全配置 错误、注入、资产管理不当、日志和监视不足…
阅读更多...
6. hdfs的命令操作

6. hdfs的命令操作

简介 本文主要介绍hdfs通过命令行操作文件 操作文件有几种方式&#xff0c;看个人习惯 hdfs dfs hdfs fs hadoop fs个人习惯使用 hadoop fs 可操作任何对象&#xff0c;命令基本上跟linux命令一样 Usage [hadoophadoop01 ~]$ hadoop fs Usage: hadoop fs [generic option…
阅读更多...
hcia学习：

hcia学习：

视频学习&#xff1a; 第一部分&#xff1a;基础学习。 19——子网掩码。
阅读更多...
Netty中粘包拆包问题解决探讨

Netty中粘包拆包问题解决探讨

⭐️ 前言 开发的小伙伴们对于Netty并不陌生&#xff0c;本文就Netty粘包拆包问题及其解决方案做一个介绍&#xff0c;希望能对大家有所帮助。 ⭐️ 什么是粘包拆包问题 我们知道&#xff0c;传统的IO是面向流的&#xff0c;而Netty&#xff08;它的底层是Java NIO&#xf…
阅读更多...
2023解析企业数据中台：突破数据孤岛，实现数据化管理升级-亿发

2023解析企业数据中台：突破数据孤岛，实现数据化管理升级-亿发

当前&#xff0c;各大企业纷纷将业务中台、数据中台、安全中台等纳入建设计划&#xff0c;其中&#xff0c;数据中台被视为重中之重。但是&#xff0c;对于初接触者而言&#xff0c;对数据中台的定义可能存在一些模糊。 下面我们将讨论和讲解对企业建设数据中台的3点建议&#…
阅读更多...
字节跳动小程序开发：探索创新的数字化世界

字节跳动小程序开发：探索创新的数字化世界

在数字化时代&#xff0c;字节跳动小程序开发成为企业数字化转型的关键一环。通过这一平台&#xff0c;企业能够借助先进的技术和丰富的功能&#xff0c;实现创新、引领市场潮流。本文将通过一些简单的技术代码示例&#xff0c;带你深入了解字节跳动小程序开发的魅力。 1. 小…
阅读更多...
浙大恩特客户资源管理系统CustomerAction.entphone；.js 接口任意文件上传漏洞复现 [附POC]

浙大恩特客户资源管理系统CustomerAction.entphone；.js 接口任意文件上传漏洞复现 [附POC]

文章目录 浙大恩特客户资源管理系统CustomerAction.entphone;.js 接口任意文件上传漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 浙大恩特客户资源管理系统CustomerAction.entphone;.js 接口任…
阅读更多...
PostgreSQL 数据定义语言 DDL

PostgreSQL 数据定义语言 DDL

文章目录 表创建主键约束非空唯一约束检查约束外键约束默认值约束 触发器表空间构建表空间 视图索引索引的基本概念索引的分类创建索引 物化视图 表创建 PostgreSQL表的构建语句与所有数据库都一样&#xff0c;结构如下&#xff0c;其核心在于构建表时&#xff0c;要指定上一些…
阅读更多...
消除“数据烟囱”，瓴羊港如何打破壁垒将多数据融通成大数据？

消除“数据烟囱”，瓴羊港如何打破壁垒将多数据融通成大数据？

作为数字经济时代的“新石油”&#xff0c;数据已成为重要的生产要素。阿里巴巴副总裁、瓴羊CEO朋新宇认为&#xff0c;目前正处在数据流通变革的时代&#xff0c;其中最核心的问题是如何破解数实融合发展的堵点。数据流通中最重要的原则是&#xff0c;不流通无价值&#xff0c…
阅读更多...
Docker安装MinIO遇到的问题汇总——持续更新中

Docker安装MinIO遇到的问题汇总——持续更新中

文章目录 Docker安装MinIO遇到的坑前言问题1&#xff1a;执行docker run报错Error response from daemon问题2&#xff1a;启动MinIO容器浏览器无法访问问题3&#xff1a;上传文件报错InvalidResponseException问题4&#xff1a;上传文件报错Connection refused最终的启动指令问…
阅读更多...
O2OA(翱途)开发平台 V8.2即将发布，更安全、更高效、更开放

O2OA(翱途)开发平台 V8.2即将发布，更安全、更高效、更开放

尊敬的O2OA(翱途)平台合作伙伴、用户以及亲爱的开发小伙伴们&#xff0c;平台新的版本就要发布啦&#xff01; 上次8.1的发布是在9月1日&#xff0c;又过去两个多月&#xff0c;O2OA研发团队始终踏踏实实地做好产品的研发及优化工作&#xff0c;只为给客户带去更好的服务和产品…
阅读更多...
Pixhawk+PX4+VRPN +NOKOV无人机飞控平台动捕数据传输

Pixhawk+PX4+VRPN +NOKOV无人机飞控平台动捕数据传输

NOKOV度量动作捕捉系统可以很好的适配PX4无人机飞控平台。进行数据通信的时候&#xff0c;使用SDK或者VRPN的方式都是可以的。本文演示NOKOV度量动作捕捉系统通过VRPN与PX4平台进行数据传输的方法。 一、硬件准备 1、准备无人机 这里准备的无人机&#xff0c;飞控版是Pixhaw…
阅读更多...
最新文章

Copyright @ 2022~2023