关于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.rhkb.cn/news/361268.html

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

相关文章

Android焦点机制结合WMS

文章前提: 了解WMS基本作用了解window的概念,phoneWindow,rootViewImpl了解view的事件分发 开始: 讲三件事情: window的创建,更新焦点的更新事件的分发 Window的创建,更新: wi…

完整代码Python爬取豆瓣电影详情数据

完整代码Python爬取豆瓣电影详情数据 引言 在数据科学和网络爬虫的世界里,豆瓣电影是一个丰富的数据源。在本文中,我们将探讨如何使用Python语言,结合requests和pyquery库来爬取豆瓣电影的详情页面数据。我们将通过一个具体的电影详情页面作…

农村经济与科技杂志社农村经济与科技编辑部2024年第8期目录

视点 数字经济驱动农业产业链升级路径研究——以河南省为例 王媛媛; 1-4 城乡融合视角下农村集体产权制度改革研究 齐建丽; 4-7 农业生态系统结构美建设内涵及实现路径 张鹏程; 8-13《农村经济与科技》投稿:cnqikantg126.com 农户宅基地退出政策加权…

【C++】——二叉搜索树(详解)

一 二叉搜索树概念 二叉搜索树又称二叉排序树,它或者是一棵空树,或者是具有以下性质的二叉树: ✨若它的左子树不为空,则左子树上所有节点的值都小于根节点的值 ✨若它的右子树不为空,则右子树上所有节点的值都大于根节点的值 …

在数字化转型中,数字孪生技术的作用和价值几何?

引言:随着全球化和市场竞争的加剧,企业需要通过数字化转型来提高生产效率、优化产品质量、降低成本,以增强自身竞争力。企业需要通过数字化转型更好地理解客户需求,提供个性化、定制化的产品和服务,从而满足客户的多样…

Axios-入门

介绍 Axios对原生Ajax进行了封装&#xff0c;简化书写&#xff0c;快速开发 官网&#xff1a;Axios中文文档 | Axios中文网 (axios-http.cn) 入门 1引入Axios的js文件 <script src"js/axios.js"></script> 2使用Axios发送请求&#xff0c;并获取响应…

链式队列算法库构建

学习贺利坚老师课程,构建链式队列算法库 数据结构之自建算法库——链队&#xff08;链式队列&#xff09;_数据结构函数链队列的算法框架有哪些-CSDN博客文章浏览阅读6.2k次&#xff0c;点赞3次&#xff0c;收藏9次。本文针对数据结构基础系列网络课程(3)&#xff1a;栈和队列…

在win7系统电脑安装node16的版本(已成功安装运行)

很多银行的项目行方都要求内网开发&#xff0c;但是我遇到的几个银行基本都是win7系统的电脑&#xff0c;而前端的项目又是需要高版本的node才能跑起来&#xff0c;所有就记录此解决方案文章&#xff01; 这是下载node安装包的地址&#xff1a;Index of /dist/ 在这里先下载自…

树形结构的勾选、取消勾选、删除、清空已选、回显、禁用

树形结构的勾选、取消勾选、删除、清空已选、回显、禁用 基本页面&#xff1a; 分为上传文件和编辑的页面 代码实现要点&#xff1a; 上传文件页面&#xff1a; 点开选择范围弹窗&#xff0c;三个radio单选框都为可选状态&#xff0c;默认显示的是第一个单选框&#xff08;按…

晶方科技:台积电吃饱,封装迎春?

半导体产业链掀起涨价潮&#xff0c;先进封装迎接利好。 这里我们来聊国内先进封装企业——晶方科技。 近期&#xff0c;由于产能供不应求&#xff0c;台积电决定上调先进封装产品价格&#xff0c;还表示订单已经排到2026年。 大哥吃不下了&#xff0c;剩下的订单全都是空间。…

Shell编程规范与变量-01

一、Shell脚本概述 在一些复杂的 Linux 维护工作中&#xff0c;大量重复性的输入和交互操作不仅费时费力&#xff0c;而且容易出错&#xff0c;而编写一个恰到好处的 Shell 脚本程序&#xff0c;可以批量处理、自动化地完成一系列维护任务&#xff0c;大大减轻管理员的负担。 1…

在Ubuntu上安装Python3

安装 python3 pip sudo apt -y install python3 python3-pip升级 pip python3 -m pip install --upgrade pip验证查看版本 python3 --version

web渗透-SSRF漏洞及discuz论坛网站测试

一、简介 ssrf(server-side request forgery:服务器端请求伪造&#xff09;是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。一般情况下&#xff0c;ssrf是要目标网站的内部系统。(因为他是从内部系统访问的&#xff0c;所有可以通过它攻击外网无法访问的内部系统&…

excel字符串列的文本合并

excel表有两列&#xff0c;第一列是“姓名”&#xff0c;第二列是“诊断”&#xff0c;有高血压、糖尿病等。我想出一个统计表&#xff0c;统计“姓名”&#xff0c;把某一个姓名的诊断不重复的用、拼接起来&#xff0c;比如“张三”的诊断为“点高血压”、糖尿病。我们可以用T…

适用于轨道交通专用的板卡式网管型工业以太网交换机

是网管型 CompactPCI板卡式冗余环网交换机。前面板带有6个 10/100/1000Base-T(X)M12接口。后面的CPCI接口有 8个10/100/1000Base-T (X) 以太网接口。 是特别为轨道交通行业EN50155标准要求而设计的坚固型交换机。它同时具有以下特性&#xff1a; ● 支持2线以太网距离扩展端口&…

springcloud第4季 springcloud-alibaba之nacos+openfegin+gateway+sentinel熔断限流【经典案例】

一 说明 1.1 架构说明 本案例实现原理&#xff1a; 采用alibaba的nacos&#xff0c;openfegin&#xff0c;sentinel&#xff0c;gateway等组件实现熔断限流。 主要理解sentinel的ResouceSentinel和fallback的区别联系。 ResourceSentinel 主要是页面配置熔断限流规则&#…

试析C#编程语言的特点及功能

行步骤&#xff0c;而不必创建新方法。其声明方法是在实例化委托基础上&#xff0c;加一对花括号以代表执行范围&#xff0c;再加一个分号终止语句。 2.3.3 工作原理 C#编译器在“匿名”委托时会自动把执行代码转换成惟一命名类里的惟一命名函数。再对存储代码块的委托进行设…

【干货】Vue3 组件通信方式详解

前言 毫无疑问&#xff0c;组件通信是Vue中非常重要的技术之一&#xff0c;它的出现能够使我们非常方便的在不同组件之间进行数据的传递&#xff0c;以达到数据交互的效果。所以&#xff0c;学习组件通信技术是非常有必要的&#xff0c;本文将总结Vue中关于组件通信的八种方式…

【博士每天一篇文献-算法】Fearnet Brain-inspired model for incremental learning

阅读时间&#xff1a;2023-12-16 1 介绍 年份&#xff1a;2017 作者&#xff1a;Ronald Kemker&#xff0c;美国太空部队&#xff1b;Christopher Kanan&#xff0c;罗切斯特大学 期刊&#xff1a; arXiv preprint 引用量&#xff1a;520 Kemker R, Kanan C. Fearnet: Brain-…

宠物领养救助管理系带万字文档java项目基于springboot+vue的宠物管理系统java课程设计java毕业设计

文章目录 宠物领养救助管理系统一、项目演示二、项目介绍三、万字项目文档四、部分功能截图五、部分代码展示六、底部获取项目源码带万字文档&#xff08;9.9&#xffe5;带走&#xff09; 宠物领养救助管理系统 一、项目演示 宠物领养救助系统 二、项目介绍 基于springbootv…