当前位置: 首页 > news >正文

Web实时通信的学习之旅:轮询、WebSocket、SSE的区别以及优缺点

文章目录

      • 一、通信机制
        • 1、轮询
          • 1.1、短轮询
          • 1.2、长轮询
        • 2、Websocket
        • 3、Server-Sent Events
      • 二、区别
        • 1、连接方式
        • 2、协议
        • 3、兼容性
        • 4、安全性
        • 5、优缺点
          • 5.1、WebSocket 的优点:
          • 5.2、WebSocket 的缺点:
          • 5.3、SSE 的优点:
          • 5.4、SSE 的缺点:
        • 6、技术实现
        • 7、数据格式
        • 8、连接状态
      • 三、示例代码:
        • 1、WebSocket 示例:
        • 2、SSE 示例:
      • 四、总结

一、通信机制

一个网页获取新的数据通常需要发送一个请求到服务器,也就是向服务器请求的页面。使用服务器发送事件,服务器可以随时向我们的 Web 页面推送数据和信息。这些被推送进来的信息可以在这个页面上以 事件 + 数据 的形式来处理。

1、轮询

顾名思义,轮询就是在某个时间间隔内定期向服务器发送请求。其中轮询有分为短轮询和长轮询。这是一种客户端主动请求的方式。

1.1、短轮询

定期向服务器请求,无论请求的资源是否可用,服务器都会尽快响应,客户端再次发起下次轮询。这种方式会比较消耗网络带宽,如果资源一直不可用就会有很多不必要的请求发送到服务器。

在这里插入图片描述

1.2、长轮询

定期向服务器发送请求,与短轮询不同的是,在资源不可用时长轮询不会立即将连接关闭,而是会等待资源可用后在响应客户端。或者等待了一段时间资源任然不可用(超时)服务器将连接关闭,客户端等待一段时间后再次发起请求。

在这里插入图片描述

与短轮询相比,长轮询更高效一些,请求数量减少了很多。

2、Websocket

在客户端和服务器打开交互式的通信会话。这是一种全双工通信,客户端与服务器会建立一个持久连接,服务器可以主动发送数据给客户端。客户端可以通过监听事件来处理来自服务器的消息。与轮询的方式相比,大大减少了延迟,没有了数据更新的往返时间。

在这里插入图片描述

3、Server-Sent Events

服务器发送事件,SSE会建立一个持久的HTTP连接。建立连接后服务器可以主动往客户端推送数据。与websocket不同,这是一种单向通信的方式,即建立连接后客户端不能向服务器发送数据。

在这里插入图片描述

二、区别

1、连接方式
  • WebSocket

WebSocket 是双向通信,客户端和服务器可以相互发送消息;

  • SSE

SSE 是单向通信,只能由服务器向客户端发送消息。

2、协议
  • WebSocket

WebSocket 使用的是 WebSocket 协议

  • SSE

SSE 使用的是 HTTP 协议

3、兼容性
  • WebSocket

WebSocket 在一些老版本 Android 手机上可能存在兼容性问题,需要使用一些特殊的 API 进行处理。

在这里插入图片描述

  • SSE

SSE 是标准的 Web API,可以在大部分现代浏览器和移动设备上使用。但如果需要兼容老版本的浏览器(如 IE6/7/8),则需要使用 polyfill 库进行兼容。

在这里插入图片描述

4、安全性
  • SSE 的实现比较简单,都是基于 HTTP 协议的,与普通的 Web 应用没有太大差异,因此风险相对较低。

  • WebSocket 则需要通过额外的安全措施(如 SSL/TLS 加密)来确保数据传输的安全性,避免被窃听和篡改,否则可能会带来安全隐患。

5、优缺点
5.1、WebSocket 的优点:
  • 实时性高:WebSocket 可以实现双向实时通信,数据传输速度快。

  • 低延迟:WebSocket 的延迟较低,适用于对实时性要求较高的场景。

  • 全双工:WebSocket 支持全双工通信,即客户端和服务器可以同时发送和接收数据。

5.2、WebSocket 的缺点:
  • 兼容性差:WebSocket 的支持程度不如 SSE,部分旧版本浏览器不支持。

  • 实现复杂:WebSocket 的实现相对复杂,需要处理更多的细节。

5.3、SSE 的优点:
  • 兼容性好:SSE 的支持程度较高,所有现代浏览器都支持。

  • 实现简单:SSE 的实现相对简单,只需监听服务器发送的消息即可。

  • 实时性:SSE 可以实现服务器向客户端推送消息,满足实时性需求。

5.4、SSE 的缺点:
  • 单向通信:SSE 只能由服务器向客户端发送消息,无法实现双向通信。

  • 传输速度较慢:SSE 的数据传输速度相对较慢,可能不适用于对实时性要求极高的场景。

6、技术实现
  • SSE 基于 HTTP 协议,利用了其长连接特性,通过浏览器向服务器发送一个 HTTP 请求,建立一条持久化的连接。

  • WebSocket 则是通过特殊的升级协议(HTTP/1.1 Upgrade 或者 HTTP/2)建立新的 TCP 连接,与传统 HTTP 连接不同。

7、数据格式
  • SSE 可以传输文本和二进制格式的数据,但只支持单向数据流,即只能由服务器向客户端推送数据。

  • WebSocket 支持双向数据流,客户端和服务器可以互相发送消息,并且没有消息大小限制。

8、连接状态
  • SSE 的连接状态仅有三种==:已连接、连接中、已断开==。连接状态是由浏览器自动维护的,客户端无法手动关闭或重新打开连接。

  • WebSocket 连接的状态更灵活,可以手动打开、关闭、重连等。

三、示例代码:

1、WebSocket 示例:
// 创建 WebSocket 连接
const socket = new WebSocket('ws://example.com/socket');// 连接打开时触发
socket.addEventListener('open', (event) => {console.log('WebSocket 连接已打开');
});// 接收到服务器消息时触发
socket.addEventListener('message', (event) => {console.log(www.5ahospital.com/anli/90.html);
});// 发送消息到服务器
socket.send('Hello, WebSocket!');
2、SSE 示例:
// 创建 EventSource 对象
const source = new EventSource('http://example.com/sse');// 接收到服务器消息时触发
source.addEventListener('message', (event) => {console.log('收到服务器消息:', event.data);
});

四、总结

  • WebSocket比SSE功能更加强大,WebSocket是在服务端和客户端建立的双向实时数据通道,而SSE只支持服务端想客户端的单向通讯

  • 浏览器对WebSocket的支持也更加广泛,IE、Edge几乎不支持SSE

  • WebSocket有一套独立的标准协议,在使用过程中必须按照标准协议来,而SSE使用的是Http协议,只需要更改Context-Type为"text/event-stream; charset=utf-8"即可,这里需要特殊注意的一点,必须是utf-8

  • SSE 属于轻量级,使用特别简单,WebSocket协议相对复杂些

  • SSE 内置断线重连和消息追踪的功能,WebSocket的也能实现,但是不在协议范围内,需要手动实现

  • SSE 只支持纯文本传送(如果需要发送二进制文本的话,需要先编码下然后再传送),WebSocket不仅支持文本还支持二进制数据传送

  • SSE 支持自定义发送的消息类型(Type)

  • SSE 适合服务器发送单向事件,心跳之类的简单数据,WebSocket试用于前后端通讯,例如聊天服务等,具体场景具体对待

相关文章:

Web实时通信的学习之旅:轮询、WebSocket、SSE的区别以及优缺点

文章目录 一、通信机制1、轮询1.1、短轮询1.2、长轮询 2、Websocket3、Server-Sent Events 二、区别1、连接方式2、协议3、兼容性4、安全性5、优缺点5.1、WebSocket 的优点:5.2、WebSocket 的缺点:5.3、SSE 的优点:5.4、SSE 的缺点&#xff1…...

TMS320F280049 CLB模块--LUT4 OUTLUT(4)

LUT4 示意图如下: OUTLUT 示意图如下: 寄存器 参考文档: TMS320F28004x Real-Time Microcontrollers Technical Reference Manual (Rev. G)...

功能测试_分类_用例_方法

总结 测试分类 按阶段分类 是否查看源代码分类 是否运行分类 是否自动化 其他分类 软件质量模型 开发模型-瀑布模型 测试过程模型 v w 测试用例八大要素 用例编号 用例标题 …...

[沫忘录]MySQL 锁

[沫忘录]MySQL 锁 锁能够协调多线程或多进程并发访问某资源产生的数据冲突与错乱。而在数据库中,锁也是协调数据库访问的有效工具。 全局锁 能够锁住当前服务器所有数据库及其表。后续所有事务都只能进行读操作,而不能进行写操作或表属性更改。 典型…...

噪声嵌入提升语言模型微调性能

在自然语言处理(NLP)的快速发展中,大模型(LLMs)的微调技术一直是研究的热点。最近,一篇名为《NEFTUNE: NOISY EMBEDDINGS IMPROVE INSTRUCTION FINETUNING》的论文提出了一种新颖的方法,通过在训…...

XML文档基本语法

XML文档基本语法包括以下几个知识点&#xff1a; 开始标记&#xff08;Start Tag&#xff09;&#xff1a;开始标记是XML元素的起始符号&#xff0c;由左尖括号&#xff08;<&#xff09;和元素名称组成。例如&#xff0c;是一个开始标记&#xff0c;表示一个名为"book…...

git开发工作流程

git开发工作流程 &#xff08;1&#xff09;先将远程代码pull到本地 &#xff08;2&#xff09;在本地上分支上进行开发 &#xff08;3&#xff09;开发完之后&#xff0c;push到远程分支 &#xff08;4&#xff09;由远程的master进行所有分支合并...

JDK生成https配置

keytool -genkey -v -alias tomcat -keyalg RSA -keystore D:\https证书\weChat.keystore -validity 36500 -keypass 250250 keytool -importkeystore -srcstoretype JKS -srckeystore D:\https证书\weChat.keystore -srcstorepass 250250 -srcalias tomcat -srckeypass 25025…...

通过 Java 操作 redis -- set 集合基本命令

目录 使用命令 sadd &#xff0c;smembers 使用命令 sismember 使用命令 scard 使用命令 spop 使用命令 sinter&#xff0c;sinterstore&#xff0c;sunion&#xff0c;sunionstore&#xff0c;sdiff&#xff0c;sdiffstore 关于 redis set 集合类型的相关命令推荐看Redis …...

WebSocket前后端建立以及使用

1、什么是WebSocket WebSocket 是一种在 Web 应用程序中实现双向通信的协议。它提供了一种持久化的连接&#xff0c;允许服务器主动向客户端推送数据&#xff0c;同时也允许客户端向服务器发送数据&#xff0c;实现了实时的双向通信。 这部分直接说你可能听不懂&#xff1b;我…...

C++数据结构之链表树图的存储

本文主要介绍用数组存储&#xff0c;结构只做简单介绍 目录 文章目录 前言 结构体实现 1、链表的存储 2、树的存储 3、图的存储 数组实现 1、链表实现 2、树和图的实现 总结 前言 在正常工程中&#xff0c;我们通常使用结构体或者类&#xff0c;来定义并使用如链表…...

又一位互联网大佬转行当网红,能写进简历么?

最近半个月&#xff0c;有两个中年男人仿佛住进了热搜。 一个是刚刚辟谣自己“卡里没有冰冷的 40 亿”的雷军&#xff0c;另一个则是在今年年初就高呼“如果有可能&#xff0c;企业家都要去当网红”的 360 创始人周鸿祎。 他也确实做到了。 先是作为当年 3Q 大战的当事人&…...

Codeforces Round 134 (Div. 1) A. Ice Skating (并查集)

Ice Skating 题面翻译 Description 给出n个点的横纵坐标&#xff0c;两个点互通当且仅当两个点有相同的横坐标或纵坐标&#xff0c;问最少需要加几个点才能使得所有点都两两互通 Input 第一行一个整数n表示点数&#xff0c;之后n行每行两个整数x[ i ]和y[ i ]表示第i个点的…...

深入了解 Flask Request

文章目录 获取请求数据获取请求信息文件上传总结 Flask 是一个轻量级的 Python Web 框架&#xff0c;其简洁的设计和灵活的扩展性使其成为了许多开发者的首选。在 Flask 中&#xff0c;处理 HTTP 请求是至关重要的&#xff0c;而 Flask 提供了丰富而强大的 request 对象来处理…...

前端测试策略与实践:单元测试、E2E测试与可访问性审计

前端测试策略是确保Web应用程序质量、性能和用户体验的关键组成部分。有效的测试策略通常包括单元测试、端到端&#xff08;E2E&#xff09;测试以及可访问性审计等多个层面。以下是关于这三类测试的策略与实践建议&#xff1a; 单元测试 定义与目的&#xff1a; 单元测试是针…...

修改el-checkbox样式

一定要在最外层&#xff1b; //未选中框/deep/ .el-checkbox__inner{border-color: #0862a3;}//选中框/deep/ .el-checkbox__input.is-checked .el-checkbox__inner{background-color: #0862a3;border-color: #0862a3;}//未选中框时右侧文字/deep/ .el-checkbox__label{}//选中…...

UE5缺少SDK,而无法在windows平台打包的解决方法

问题1&#xff1a;UE5缺少SDK&#xff0c;而无法在windows平台打包的解决方法&#xff08;项目问题&#xff0c;做一下记录&#xff0c;没有参考性&#xff09; (1)打不开&#xff1a;D:\imageworks-OpenColorIO-Configs-v1.0_r2-8-g0bb079c.tar 解决方案&#xff1a;从23拷贝D…...

4G,5G执法记录仪人脸识别、人脸比对使用说明

4G/5G执法记录仪或4G/5G智能安全帽&#xff0c;做前端人脸识别、人脸比对&#xff0c;采用了上市公司的成熟的人脸识别算法&#xff0c;需要支付LICENSE给算法公司&#xff0c;理论上前端设备支持30K的人脸库&#xff08;受设备运行内存限制&#xff09;。 4G/5G执法记录仪侧要…...

掌握SEO优化的关键:提升网站排名的秘籍(如何提高网站seo排名)

你是否曾经在搜索引擎上搜索过一个关键词&#xff0c;然后点击了排在前几位的网站&#xff1f;如果是&#xff0c;那么你已经体会到了SEO&#xff08;搜索引擎优化&#xff09;的威力。SEO是一项关键的网络营销策略&#xff0c;它能够让你的网站在搜索引擎中获得更高的排名&…...

大模型微调之 在亚马逊AWS上实战LlaMA案例(九)

大模型微调之 在亚马逊AWS上实战LlaMA案例&#xff08;九&#xff09; 代码阅读 src/llama_recipes/inference/prompt_format_utils.py 这段代码是一个Python模块&#xff0c;它定义了几个类和模板&#xff0c;用于生成安全评估的提示文本。以下是对每一行代码的注释和提示词…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...