前端WebSocket

WebSocket定义

WebSocket是HTML5提供的一种浏览器与服务器进行全双工通讯的网络技术。是一种在Web浏览器和服务器之间建立持久连接的通信协议。它允许服务器主动向浏览器发送数据,而不需要浏览器发起请求。相比起传统的HTTP请求-响应模式,WebSocket能够实现更高效的双向通信。

WebSocket协议通过在HTTP协议上建立握手,然后使用TCP连接来实现双向通信。握手阶段使用标准的HTTP协议,因此WebSocket协议可以通过HTTP和HTTPS端口进行通信,而不需要额外的端口。

WebSocket 的出现就解决了半双工通信的弊端。它最大的特点是:服务器可以向客户端主动推动消息,客户端也可以主动向服务器推送消息。

WebSocket原理

客户端向 WebSocket 服务器通知(notify)一个带有所有接收者ID(recipients IDs)的事件(event),服务器接收后立即通知所有活跃的(active)客户端,只有ID在接收者ID序列中的客户端才会处理这个事件。

WebSocket 特点

  1. 支持双向通信,实时性更强
  2. 可以发送文本,也可以发送二进制数据‘’
  3. 建立在TCP协议之上,服务端的实现比较容易
  4. 数据格式比较轻量,性能开销小,通信高效
  5. 没有同源限制,客户端可以与任意服务器通信
  6. 协议标识符是ws(如果加密,则为wss),服务器网址就是 URL
  7. 与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。

Websocket的使用方法

在客户端中:

// 在index.html中直接写WebSocket,设置服务端的端口号为 9999
let ws = new WebSocket('ws://localhost:9999');
// 在客户端与服务端建立连接后触发
ws.onopen = function() {
    console.log("Connection open."); 
    ws.send('hello');
};
// 在服务端给客户端发来消息的时候触发
ws.onmessage = function(res) {
    console.log(res);       // 打印的是MessageEvent对象
    console.log(res.data);  // 打印的是收到的消息
};
// 在客户端与服务端建立关闭后触发
ws.onclose = function(evt) {
  console.log("Connection closed.");
}; 

即时通讯的实现:短轮询、长轮询、SSE 和 WebSocket 间的区别?

短轮询和长轮询的目的都是用于实现客户端和服务器端的一个即时通讯。

短轮询的基本思路:浏览器每隔一段时间向服务器发送 http 请求,服务器端在收到请求后,不论是否有数据更新,都直接进行响应。这种方式实现的即时通信,本质上还是浏览器发送请求,服务器接受请求的一个过程,通过让客户端不断的进行请求,使得客户端能够模拟实时地收到服务器端的数据的变化。这种方式的优点是比较简单,易于理解。缺点是这种方式由于需要不断的建立 http 连接,严重浪费了服务器端和客户端的资源。当用户增加时,服务器端的压力就会变大,这是很不合理的。

长轮询的基本思路:首先由客户端向服务器发起请求,当服务器收到客户端发来的请求后,服务器端不会直接进行响应,而是先将这个请求挂起,然后判断服务器端数据是否有更新。如果有更新,则进行响应,如果一直没有数据,则到达一定的时间限制才返回。客户端 JavaScript 响应处理函数会在处理完服务器返回的信息后,再次发出请求,重新建立连接。长轮询和短轮询比起来,它的优点是明显减少了很多不必要的 http 请求次数,相比之下节约了资源。长轮询的缺点在于,连接挂起也会导致资源的浪费。

SSE 的基本思想:服务器使用流信息向服务器推送信息。严格地说,http 协议无法做到服务器主动推送信息。但是,有一种变通方法,就是服务器向客户端声明,接下来要发送的是流信息。也就是说,发送的不是一次性的数据包,而是一个数据流,会连续不断地发送过来。这时,客户端不会关闭连接,会一直等着服务器发过来的新的数据流,视频播放就是这样的例子。SSE 就是利用这种机制,使用流信息向浏览器推送信息。它基于 http 协议,目前除了 IE/Edge,其他浏览器都支持。它相对于前面两种方式来说,不需要建立过多的 http 请求,相比之下节约了资源。

WebSocket 是 HTML5 定义的一个新协议议,与传统的 http 协议不同,该协议允许由服务器主动的向客户端推送信息。使用 WebSocket 协议的缺点是在服务器端的配置比较复杂。WebSocket 是一个全双工的协议,也就是通信双方是平等的,可以相互发送消息,而 SSE 的方式是单向通信的,只能由服务器端向客户端推送信息,如果客户端需要发送信息就是属于下一个 http 请求了。

上面的四个通信协议,前三个都是基于HTTP协议的。

对于这四种即使通信协议,从性能的角度来看:

WebSocket > 长连接(SEE) > 长轮询 > 短轮询

但是,我们如果考虑浏览器的兼容性问题,顺序就恰恰相反了:

短轮询 > 长轮询 > 长连接(SEE) > WebSocket

所以,还是要根据具体的使用场景来判断使用哪种方式。

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

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

相关文章

Web3钱包开发获取测试币-OKB X1Testnet(三)

Web3钱包开发获取测试币-OKB X1Testnet(三) 基于以上两篇 Web3钱包开发获取测试币-Polygon Mumbai(一) :https://suwu150.blog.csdn.net/article/details/137949473Web3钱包开发获取测试币-Base Sepolia(二):https://suwu150.blog.csdn.net/article/det…

《Decoupled Contrastive Learning for Long-Tailed Recognition》阅读笔记

论文标题 《Decoupled Contrastive Learning for Long-Tailed Recognition》 针对长尾识别的解耦对比学习 作者 Shiyu Xuan 和 Shiliang Zhang 来自北京大学计算机学院多媒体信息处理国家重点实验室 初读 摘要 监督对比损失(Supervised Contrastive Loss, SC…

《米小圈动画古诗》—“诗情画意”也不是很难嘛!

创新是一个民族的灵魂和希望,是一个国家兴旺发达的不竭动力,而学习古诗词就是丰富孩子想象力、培养学生创新精神最有效的方法。因为,诗的韵律,情绪跌宕,可以让孩子在大脑中形成一幅完整的图画。 诗歌带给人最美妙的体…

MacOS搭建docker本地私有镜像库

相关环境 macOS: bigsur 11.7.8 docker desktop: 4.22.0 docker engine: 24.0.5 准备工作 本机已经安装好docker desktop,未安装的自行参考其他教程。如果不能翻墙,可以修改本地的镜像地址,可在docker desktop 设置中的docker engine中修…

最新AI实景自动无人直播软件:智能讲解、一键开播,享受24小时自动专业直播体验

在现今数字化时代(ai无人直播下载:hzzxar)直播行业越来越受到人们的关注和喜爱。随着人工智能的不断发展,AI实景自动无人直播软件应运而生,为商家提供了更便捷、高效的直播方式。本文将介绍如何利用这一创新技术&#…

活动预告 | 5月16日 Streaming Lakehouse Meetup · Online 与你相约!

随着 Apache Flink 技术社区的不断成熟和发展,越来越多企业开始利用 Flink 进行流式数据处理,从而提升数据时效性价值,获取业务实时化效果。与此同时,在大数据领域数据湖架构也日益成为新的技术趋势,越来越多企业开始采…

源码部署与SaaS账号:企业软件选择的自建房与租赁公寓之辩

在数字化运营的时代,企业选择软件解决方案就如同在选择住所:源码部署类似于“自建房屋”,而SaaS账号则更像是“租赁公寓”。 自建房屋(源码部署) 当你选择自建房屋时,你需要投入大量的时间和资金来购买土地…

Vue3---router(安装、路由跳转、路由守卫、本地存储)

Vue3—router(安装、路由跳转、路由守卫、本地存储) 目录 Vue3---router(安装、路由跳转、路由守卫、本地存储)基础使用安装创建路由 路由跳转无参跳转js写法html写法 有参跳转queryparams 路由守卫额外:本地存储sessi…

百度云内容审核快速配置 (java)

为什么要选择百度云 ? 因为他免费用一年 首先要先开通百度云内容安全服务 按照操作指引走完整套 ContentCensor Java SDK目录结构** com.baidu.aip├── auth //签名相关类├── http //Http通…

SpringCloudAlibaba:4.2云原生网关higress的基本使用

概述 简介 Higress是基于阿里内部的Envoy Gateway实践沉淀、以开源Istio Envoy为核心构建的下一代云原生网关, 实现了流量网关 微服务网关 安全网关三合一的高集成能力,深度集成Dubbo、Nacos、Sentinel等微服务技术栈 定位 在虚拟化时期的微服务架构…

力扣HOT100 - 74. 搜索二维矩阵

解题思路&#xff1a; 两次二分&#xff0c;第一次定位行&#xff0c;第二次定位列。 class Solution {public boolean searchMatrix(int[][] matrix, int target) {int m matrix.length, n matrix[0].length;int l 0, r m - 1;//定位行int row -1;while (l < r) {in…

Amazon Bedrock 托管 Llama 3 8B70B

Amazon Bedrock 托管 Llama 3 8B&70B&#xff0c;先来体验&#xff1a;&#xff08;*实验环境账号有效期为1天&#xff0c;到期自动关停&#xff0c;请注意重要数据保护&#xff09; https://dev.amazoncloud.cn/experience/cloudlab?id65fd86c7ca2a0d291be26068&visi…

AnaTraf:一款功能强大的网络流量分析工具,助您实现高效网络管理

在当下迅速发展的网络时代&#xff0c;网络流量分析已经成为网络管理和维护的关键环节。 AnaTraf网络流量分析仪&#xff1a;全面把控网络状况 AnaTraf 是一款高性能的实时网络流量分析工具,能够帮助您全面了解网络状况,提高网络运维效率。其主要功能包括: 全流量回溯分析&am…

Django框架之请求生命周期流程图

一、引言 WSGI、wsgiref、uwsgi三者是什么关系? WSGI是协议&#xff0c;小写的wsgiref和uwsgi是实现该协议的功能模块 缓存数据库 提前已经将你想要的数据准备好了&#xff0c;需要的时候直接拿就可以&#xff0c;提高了效率和响应时间。 eg:当你在修改你的数据的时候&…

Java -- (part23)

一.网络编程 1.概述 在网络通信协议下,不同计算机上运行的程序,进行数据传输 2.软件架构 CS架构:客户端和服务端 BS架构:浏览器和服务端 3.服务器概念 安装了服务器软件的计算机 4.通信三要素 IP地址 a.概述 计算机的唯一标识,用于两台计算机之间的链接 b.特殊的IP…

labview技术交流-将时间字符串转换成时间格式

应用场景 我们在数据库中设计了datetime类型的字段&#xff0c;比如字段名就叫“保存时间”&#xff0c;当我们使用labview将表中数据读取出来后datetime类型的数据是以字符串的格式显示的。而我们想计算两条数据“保存时间”的间隔时间时&#xff0c;用字符串类型自然是没法计…

vue 路由url中去掉#

修改前效果 想要去掉/# 如何实现&#xff1f; 1、typeScript中去掉url中# 找到项目中的router/index.ts-----------去掉createWebHashHistory中的Hash 将createWebHashHistory修改为createWebHistory 2、javaScript中去掉url中# 找到项目中的router/index.js-----------添加…

SAP 长文本语言代码维护

在SAP中&#xff0c;我们发现长文本都是有语言代码的&#xff0c;如果需要新增一个语言代码的话&#xff0c;需要通过程序RSCPCOLA进行维护处理 具体实现步骤如下&#xff1a; 1. 输入事务码SE38&#xff0c;输入程序名RSCPCOLA&#xff0c;然后点击执行按钮 2. 维护信函语言…

SpringBoot:SpringBoot:实战项目TILAS智能学习辅助系统1.3

登录认证 需求:输入登录请求服务器判断用户的用户名和密码 //控制层 PostMapping("/login")public Result login(RequestBody Emp emp);Overridepublic Result login(Emp emp) {Emp emp1 empService.selectLogin(emp);if(emp1 null){System.out.println("用…

旋转矩阵(将坐标轴旋转)

旋转矩阵&#xff08;将坐标轴旋转&#xff09; 在二维空间中&#xff0c;旋转可以用一个单一的角 定义。作为约定&#xff0c;正角表示逆时针旋转。把笛卡尔坐标的列向量关于原点逆时针旋转的矩阵是&#xff1a; 原坐标系下 坐标系逆时针旋转β 补充 sin(-a) -sin(a) co…
最新文章