关于WebSocket

WebSocket 与传统的 HTTP 协议对比

在实时通信领域,传统的 HTTP 协议存在以下一些问题:

  1. 频繁的请求和响应:每次通信都需要建立和关闭连接,带来额外的开销
  2. 高延迟:每次通信都需要经过多个网络层的传输,延迟较高。
  3. 单向通信:HTTP 是一种单向的请求/响应模式,客户端无法主动向服务器推送数据。

image.png

我们将从连接方式、数据传输方式、通信效率、数据格式、服务器推送和适用场景等方面,对比一下websocket与http的区别

特点WebSocketHTTP
连接方式持久连接,通过握手建立单个连接每次请求/响应建立新的连接
数据传输方式全双工通信,客户端和服务器可以同时发送和接收数据单向通信,客户端发送请求,服务器返回响应
通信效率低延迟,实时性强,数据传输效率高高延迟,每次请求都需要重新建立连接,数据传输效率较低
数据格式支持任意格式的数据,如文本、二进制数据等基于文本的格式,如HTML、JSON等
服务器推送服务器可以主动向客户端推送消息服务器无法主动向客户端推送消息,需要客户端主动发起请求
适用场景实时通信、聊天应用、多人协作、实时数据展示等场景请求/响应模式的数据交互、静态内容展示、数据查询等场景

实现一个简单的websocket

前端代码

先使用new WebSocket创建一个websocket实例,然后通过onopen事件与websocket服务器建立连接

// 创建WebSocket连接 const socket = new WebSocket('ws://localhost:8080'); // 建立连接事件 socket.onopen = function() { console.log('WebSocket连接已建立'); // 向服务器发送消息 socket.send('Hello, server!'); };

然后通过onmessage,oncloseonerror事件,分别监听服务器发来的消息,连接关闭,错误事件

// 监听接收到服务器消息的事件 socket.onmessage = function(event) {

const message = event.data;

console.log('接收到服务器消息:', message);

};

// 监听连接关闭事件

socket.onclose = function() {

console.log('WebSocket连接已关闭');

}; // 监听连接错误事件 socket.onerror = function(error) {

console.error('WebSocket连接错误:', error);

};

image.png


前端API:
方法描述
new WebSocket(url)创建一个 WebSocket 实例,指定要连接的 WebSocket 服务器的 URL。
ws.onopen当 WebSocket 连接成功建立时触发的事件。
ws.onmessage当接收到来自 WebSocket 服务器的消息时触发的事件。
ws.onerror当 WebSocket 发生错误时触发的事件。
ws.onclose当 WebSocket 连接关闭时触发的事件。
ws.send(data)向 WebSocket 服务器发送消息,可以是字符串、ArrayBuffer 或 Blob。
ws.close()关闭 WebSocket 连接。

webSocket的使用场景

WebSocket可以提供实时、双向、持久的通信能力,使得 Web 应用能够实现高效、实时的数据传输和即时通信。

它适用于各种需要实时数据交互和即时通信的场景,如实时聊天应用、在线多人游戏、实时数据更新、即时通知和提醒、实时协作和协同编辑等。

简述一下WebSocket的工作原理

  1. 建立握手:客户端发起WebSocket连接请求,包含一些特定的头部信息,例如Upgrade和Connection字段。服务器接收到请求后,如果支持WebSocket协议,会返回一个握手响应,其中包含状态码101 Switching Protocols和一些额外的头部信息。
  2. 建立连接:一旦握手成功,客户端和服务器之间建立了持久连接。这个连接是基于TCP协议的,使用WebSocket协议进行通信。
  3. 数据传输:一旦连接建立,客户端和服务器可以通过发送消息来进行双向通信。客户端和服务器可以发送文本数据或二进制数据。数据以数据帧的形式传输,帧中包含有效负载和一些控制信息。
  4. 关闭连接:当客户端或服务器决定关闭连接时,它们可以发送关闭帧来表示关闭连接。收到关闭帧的一方也会发送一个关闭帧作为确认,并且双方会协商关闭连接的过程。

websocket的兼容性情况

通过can i use网址我们可以知道,WebSocket 在现代的 Web 浏览器中具有广泛的兼容性,但在一些旧版本的浏览器中可能存在兼容性问题。

image.png

WebSocket的安全性

WebSocket 本身并不提供加密功能,它是一种基于 TCP 的协议,数据是以明文形式传输的。因此,如果在使用 WebSocket 时不进行任何加密措施,那么数据在传输过程中可能会被窃听、篡改或伪造。

为了保护 WebSocket 通信的安全性,推荐使用 SSL/TLS 协议对 WebSocket 连接进行加密。通过在建立 WebSocket 连接时使用加密传输,可以确保数据在传输过程中被加密,并防止第三方窃听或篡改数据。

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

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

相关文章

Stm32的DMA的学习

一,介绍 二,DMA框图 三,DMA通道 四,相关HAL库函数 五,配置DMA 六,Stm32CubeMX配置 【13.1】减少CPU传输负载 DMA直接存储器访问—Kevin带你读《STM32Cube高效开发教程基础篇》_哔哩哔哩_bilibili

【鸿蒙 HarmonyOS】尺寸设置:size/layoutWeight/constraintSize

一、背景 常见尺寸:width(宽度)、height(高度)、padding(内边距)、margin(外边距) 主要整理下size(设置高宽尺寸)、layoutWeight(对…

主干网络篇 | YOLOv5/v7 更换骨干网络之 PP-LCNet | 轻量级CPU卷积神经网络

主干网络篇 | YOLOv5/v7 更换骨干网络之 PP-LCNet | 轻量级CPU卷积神经网络:中文详解 1. 简介 YOLOv5 和 YOLOv7 是目前主流的目标检测算法之一,具有速度快、精度高的特点。但 YOLOv5 和 YOLOv7 的原始模型结构中使用的是 MobileNetV3 作为骨干网络&am…

Redis数据库(五):Redis数据库基本特性

这一节我们来介绍如何使用C语言的库来操作Redis数据库。 目录 一、hiredis的安装 1.1 下载源码 1.2 解压 1.3 进入hiredis路径下 1.4 利用makefile文件进行编译 二、接口介绍 三、C程序操作Redis代码 四、redis.conf配置文件详解 五、Redis的持久化 5.1 RDB &#x…

Compose学习记录(2)-组件状态

Compose中的状态 可组合函数可以按任意顺序频繁执行,对于组件中的状态需要通过特定方式保存起来。当状态发生变化时,它会自动触发组件UI的重组: remember{ mutableStateOf(T) } Composable fun Greeting(name: String, modifier: Modifier Modifier) {…

STM32CubeMX与RT-Thread Studio协助使用(实现点亮LED)

1创建自己的项目 1-1选择板子 1-2生成的项目 运行一下看是否创建成功 零警告零错误 2配置STM32Cude 2-1找打如图图标点击(CubeMX的图标) 2-2输入自己安装的路径选中exe文件 点击Browse 找到如图选中,在打开(STM32CubeMX的安装路…

202406261021_二分查找2

202406261021_二分查找2 ✏随笔34. 在排序数组中查找元素的第一个和最后一个元素代码总结 69. x的平方根代码总结 367. 有效的完全平方数代码总结 (Weather::上海 ⛅多云,13~23℃ 良 清风徐徐🌘) ✏随笔 34. 在排序数组中查找元素的第一个和最后一个元素…

echarts 5.5.0版本下的层叠柱形图,每个值都从0开始,会有覆盖情况

需求: 1、每个公司,需要两个柱子去展示(stack: 1是第一个柱子,stack:2,是第二个柱子); 2、必须每个数据都是从0开始,不在上一个值上累加; 3、鼠标滑上去的时候,最大值…

什么是API?如何进行API对接?

目录 一、API和API对接的定义 二、API接口的应用场景 三、为什么需要API对接 四、如何进行API对接 GET请求 POST请求 五、API对接的注意事项 在这个数字化时代,API像一把万能钥匙,让数据流动起来,创造出无限可能。本文旨在介绍API及其…

点云处理实战 PCL求解点云表面曲率

目录 一、什么是曲率 二、曲率计算过程 三、pcl 求解点云局部曲率 四、思考?为何曲率计算会使用协方差矩阵? 五、推荐阅读 一、什么是曲率 曲率是几何学中用来描述曲线或曲面形状变化的一个量。它反映了曲线或曲面的弯曲程度。在不同的上下文中,曲率的定义和计算方式有…

如何在Spring Boot中实现文件上传和下载

如何在Spring Boot中实现文件上传和下载 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天我们将探讨如何在Spring Boot应用中实现文件的上传和下载功能&…

科普:什么是 BC-404 ?全方位解读最新通缩型 NFT 标准

区块链技术飞速发展的今天,创新从未停歇。继 ERC-404 标准问世后,一个名为 BC-404 的新标准应运而生,为 NFT 市场带来了全新的可能性。BC-404(Bonding Curve 404)—基于对 ERC-404 的改进,加密货币中第一个…

在ROS2中蓝牙崩溃的原因分析

在ROS2中,如果蓝牙模块没有成功启动,可能的原因有几个方面: 1. **硬件问题**:首先需要确认蓝牙硬件本身是否正常工作,包括检查蓝牙模块是否正确连接到系统,以及模块是否存在物理损坏。 2. **驱动问题**&a…

三、知识库搭建

知识库搭建 1 介绍词向量向量数据库 2 使用embedding API3 数据处理数据加载数据清洗文档分割 4 搭建并使用向量数据库4.1 自定义embedding封装4.2 chroma数据库4.3 向量检索 详细代码参考:https://github.com/lin902/llm-application 1 介绍 词向量 词向量就是把…

logging日志级别介绍

1 日志的等级可以分为5个 从底到高分别是 debug 程序调式bug使用 info 程序正常运行 warning 发出警告 error 程序出错 critical 特别验证 程序不能运行 2 使用: import logging logging.debug(这是一个dug日志的信息) 3 设置logging的配置信息 创建…

RK3568平台开发系列讲解(调试篇)分析内核调用的利器 ftrace

🚀返回专栏总目录 文章目录 一. 指定 ftrace 跟踪器二、设置要 trace 的函数三、ftrace 的开关四、查看 trace五、trace-cmd 的使用六、trace-cmd 的常用选项6.1、查看可以跟踪的事件6.2、跟踪特定进程的函数调用6.3、函数过滤6.4、限制跟踪深度6.5、追踪特定事件沉淀、分享、…

MYSQL insert into select 遇到的一个错误 Truncated incorrect DOUBLE value: ‘完成‘

今日在mysql 使用insert into mysql 报错了 》》Truncated incorrect DOUBLE value: ‘完成’。 单独把select 拉出来查询没有问题,但是一和insert into就报错了。 这种insert into select的sql 如果用了where 条件请在条件上 完全遵从数据格式,&#x…

CesiumJS【Basic】- #016 多边形面渲染“花了”的问题

文章目录 多边形面渲染“花了”的问题1 目标2 问题代码3 修正后代码4 总结多边形面渲染“花了”的问题 1 目标 解决多边形的面“花了”的问题 2 问题代码 使用Cesium.PerInstanceColorAppearance渲染后出现色斑 import * as Cesium from "cesium";const viewer …

防火墙双机热备

防火墙双机热备 随着移动办公、网上购物、即时通讯、互联网金融、互联网教育等业务蓬勃发展,网络承载的业务越来越多,越来越重要。所以如何保证网络的不间断传输成为网络发展过程中急需解决的一个问题。 防火墙部署在企业网络出口处,内外网之…

Orangepi Zero2使用外设驱动库wiringOP配合时间函数驱动HC-SR04超声波测距模块

目录 一、HC-SR04超声波模块原理和硬件接线 1.1 超声波测距原理: 1.2 超声波时序图: 1.3 HC-SR04超声波模块硬件接线: 二、时间函数 2.1 时间函数gettimeofday()原型和头文件: 2.2 使用gettimeofday()函数获取当前时间的秒数…