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

为什么会有websocket(由来)

一、HTTP 协议的缺点和解决方案

1、HTTP 协议的缺点和解决方案

用户在使用淘宝、京东这样的网站的时候,每当点击一个按钮其实就是发送一个http请求。那我们先来回顾一下http请求的请求方式。
在这里插入图片描述
一个完整的http请求是被分为request请求节点和response响应阶段的,而且从来都是客户端给服务器端发送http请求,从来没有服务器端主动给我们发送请求。
但是有的时候我们在玩一些单机游戏的时候,游戏上的人物总是能将供给数据发送给我们,那么像是这种服务器主动给浏览器不断发送数据的场景是怎么实现的呢?

2.如何实现服务器主动发数据

①:HTTP定时轮询

定时轮询是一种很常见的处理方案,就是客户端不断的发送http请求到服务器当中,服务器收到请求后响应消息,这是一种伪服务器推的方式,他其实不是服务器主动发送消息到客户端,而是客户端不断偷偷请求服务器,只是用户无感知而已!
在这里插入图片描述
使用这种常见的方式有很多,最常见的就是扫码登录。比如微信登录。当我们打开扫码页面以后,前端页面根本就不知道用户扫没扫码,于是不断的向服务器后端进行询问,询问的间隔是1-2s这样可以保证用户在扫码后,能在1-2s内得到及时的反馈!
在这里插入图片描述
这用作存在的问题
第一:当我们打开f12的时候,满屏都是http请求,虽然每个请求都很小,但是这么多的数量也会消耗很多带宽,同时也会加重服务器的负担。
第二:及时是最快的情况下,用户扫码完成后,同样需要等到1-2s,等到下一次http请求,才能从服务器当中将数据读取出来返回给用户,这样会给用户明显的卡段感。

②:HTTP长轮询机制

我们知道http请求一般会给服务器一定的时间去处理请求,然后返回数据。如果在这一段时间内浏览器没有接收到服务器的响应,那么浏览器就认为该http请求超时,浏览器会进行重传。
在这里插入图片描述
但是如果我们将http请求的超时设置的很大,比如30s,在这30s内只要服务器接受到了扫码请求,就立马返回给前端网页数据。
如果超时那就立马发起下一次请求,这样就减少了http请求的个数。并且大多数情况下用户都会在某个30秒的时间内,做出扫码操作,所以此时响应就会非常及时。
比如百度云网盘就是这样做的,所以我们扫码,在手机上点击确认,浏览器会马上变成登录状态。用户体验很好。
向这样发起一个请求在较长时间内等待服务器响应的机制就是长轮训机制。我们常用的消息队列rocketMQ消费者取数据就是就是长轮询机制!
向这样在用户不感知的情况下服务器将数据推送给浏览器的技术就是服务器推送技术,它还有一个毫不沾边的英文名称—comet技术
以上提到的两种解决方案本质上还是客户端主动从服务器端取数据,对于扫码登录这样的简单场景还能用用,但是如果是网页游戏,游戏一般会有大量的数据会从服务器端推送到客户端,那么如何实现呢?

二、websocket的由来

我们首先要了解计算机网络当中的TCP/IP协议栈,下层协议要为上层协议提供基础。
在这里插入图片描述
TCP协议属于传输层的协议,它是一种全双工协议。
在这里插入图片描述
而http协议的访问流程是客户端浏览器给服务器发送数据,然后服务器处理后给浏览器返回响应,这是妥妥的半双工协议。
也就意味着好好的全双工协议到了http就右给干回了半双工!
这主要是因为在http协议的设置之初,主要考虑的是查看网页文本的场景,能够做到客户端发送请求,再由服务器响应就够了,根本就没想到网页游戏这种客户端和服务器端相互主动发送大量数据的场景,所以为了更好的去应对这种场景,我们需要一个基于TCP的新协议,于是新的网络层协议websocket就被设计出来了。
注意:websocket和socket之间就像雷锋和雷峰塔一样毫无关系,别被名字带偏。

三、如何建立websocket链接

我们在浏览器上经常是一会儿刷刷图文、一会儿打会儿游戏。刷图文就是使用的websocket协议,而打游戏就要使用websocket协议。为了兼容这些使用场景浏览器在TCP三次握手以后都使用http协议进行一次通讯。
在这里插入图片描述
如果此时客户端发起的是普通的http请求,那后续双方就还是老样子,继续用股通HTTP协议进行交互,这点没啥疑问。果这时候是想建立websocket链接,就需要在http请求的请求头header带上特殊的信息。
包含:

  • Connection: Upgrade // 标识该HTTP请求是一个协议升级请求
  • Upgrade: websocket //协议升级为WebSocket协议
  • Sec-sebSocket-Key: dGhlIHNhbx8sZSBub25SjZQ== //随机生成的Base64码
GET ws://localhost/chat HTTP/1.1  //请求协议为 ws
Host: localhost
Upgrade: websocket  //协议升级为WebSocket协议
Connection: Upgrade  // 标识该HTTP请求是一个协议升级请求
Sec-sebSocket-Key: dGhlIHNhbx8sZSBub25SjZQ==  //客户端采用base64编码的24为随机字符序列,服务器//接受客户端HTTP协议升级的证明,要求服务器响应一个//对应加密的Sec-webSocket-Accept头信息作为应答
Sec-webSocket-Extensions: permessage-dflate  //协议扩展类型
Sec-webSocket-Version: 13  //客户端支持WebSocket协议版本

将以上信息返送给服务器以后,如果服务器可是升级为websocket协议,就会走websocket握手流程。同时将客户端给到的Base64码用公开算法变成另一段字符串。放在http的响应头当中的Sec-webSocket-Accept。同时在带上101状态码返回给客户端。101状态码确实不常见,它其实是指协议切换。
在这里插入图片描述

HTTP/1.1 101 Switching Protocols  //服务器响应101代码说明握手成功
Upgrade: websocket
Connection: Upgrade
Sec-webSocket-Accept: s3pPLMBiTxaQ9kyGzzhZRbk+XOo=
Sec-webSocket-Extensions: permesssage-deflate

浏览器得到响应的数据以后也会使用同样的公开算法,将发送给服务器的Base64码也转换成字符串。如果这段字符串和公开传回来的字符串一致,那么就验证通过。
在这里插入图片描述
websocket和http一样都是应用层协议,他们也都是基于TCP的协议。ws协议的流程是:
1.首先经过TCP的三次握手
2.利用http协议升级为ws协议
3.后续双方通过websocket数据格式进行通信

在这里插入图片描述

四、websocket的实现方式

  • 后端实现方式:
    • 编程式:即继承类javax.websocket.Endpoint并实现其方法。
    • 注解式:即定义一个 POJO, 并添加@ServerEndpoint相关注解。
  • 前端实现方式:
    • 使用 html5 原生的 api。
    • 使用 socktjs/stompjs 框架提供的 api。

相关文章:

为什么会有websocket(由来)

一、HTTP 协议的缺点和解决方案 1、HTTP 协议的缺点和解决方案 用户在使用淘宝、京东这样的网站的时候,每当点击一个按钮其实就是发送一个http请求。那我们先来回顾一下http请求的请求方式。 一个完整的http请求是被分为request请求节点和response响应阶段的&…...

【MySQL精通之路】优化

1 优化概述 数据库性能取决于数据库级别的几个因素,如表、查询和配置设置。这些软件结构导致了硬件级别的CPU和I/O操作,您必须将其最小化并使其尽可能高效。 在研究数据库性能时,首先要学习软件方面的高级规则和指导原则,并使用挂…...

解读大模型应用的可观测性

一、引言 随着人工智能技术的飞速发展,大模型作为AI领域的重要分支,正日益成为科技竞争的新高地。大模型通过输入大量语料进行训练,赋予计算机拥有像人类一样的“思考”能力,使其能够理解文本、图片、语音等内容,并进…...

嵌入式学习记录5.18(多点通信)

一、套接字属性设置相关函数 #include <sys/types.h> /* See NOTES */#include <sys/socket.h>int getsockopt(int sockfd, int level, int optname,void *optval, socklen_t *optlen);int setsockopt(int sockfd, int level, int optname,const void *op…...

shell脚本的基础应用

规范脚本的构成 #&#xff01;/bin/bash # 注释信息 可执行的语句 执行脚本的方法 有1.添加x权限 ,绝对路经&#xff0c;或者相对路径2. 使用解释器 不需加x,root...bash...bash..echo 3,用source&#xff0c; 开机root ...bash ...echo bash -x /opt/test01.sh &#xff…...

【golang】内存对齐

什么是内存对齐 在访问特定类型变量的时候通常在特定的内存地址访问&#xff0c;这就需要对这些数据在内存中存放的位置有限制&#xff0c;各种类型数据按照一定的规则在空间上排列&#xff0c;而不是顺序的一个接一个的排放&#xff0c;这就是对齐。 内存对齐是编译器的管辖…...

Java 17的新特性有哪些?

Java 17是Java编程语言的最新版本&#xff0c;于2021年9月14日发布。以下是Java 17的一些新特性&#xff1a; Sealed类和接口&#xff1a;Sealed类和接口限制了继承和实现的范围&#xff0c;在编译时提供更强的封装性。 Pattern匹配&#xff1a;Pattern匹配简化了对实例进行类…...

攻击同学网络,让同学断网

技术介绍&#xff1a;ARP欺骗 ARP欺骗&#xff08;ARP spoofing&#xff09;是一种网络攻击技术&#xff0c;它通过伪造ARP&#xff08;地址解析协议&#xff09;响应包来欺骗目标设备&#xff0c;使其将网络流量发送到攻击者指定的位置。具体操作步骤如下&#xff1a; 攻击者…...

Springboot启动时报错Property ‘mapperLocations‘ was not specified.

这几天没整boot 晚上直接运行不了了 本想是在表现层写点代码测测接口的 localhost8080找半天 结果404 先考虑好久 是不是url输入错了 然后 就发现 结果boot都不能启动了 JUnit也测不出来 找了半天 结果是开关机导致数据库没开 手动打开服务 找到MySQL启动 IDEA连接数据…...

MyBatis系统学习篇 - 动态SQL

MyBatis提供了动态SQL帮助我们解决在业务过程中&#xff0c;我们根据不同的条件动态生成SQL语句&#xff0c;用来满足各种复杂的查询需求&#xff0c;包括MyBatis中常用的动态SQL标签和用法&#xff0c;这种方式在一定程度上帮助我们重复写许多SQL堆积在一起&#xff0c;下面我…...

[LLM-Agent]万字长文深度解析规划框架:HuggingGPT

HuggingGPT是一个结合了ChatGPT和Hugging Face平台上的各种专家模型&#xff0c;以解决复杂的AI任务&#xff0c;可以认为他是一种结合任务规划和工具调用两种Agent工作流的框架。它的工作流程主要分为以下几个步骤&#xff1a; 任务规划&#xff1a;使用ChatGPT分析用户的请求…...

二十三篇:未来数据库革新:AI与云原生的融合之旅

未来数据库革新&#xff1a;AI与云原生的融合之旅 1. 智能数据库管理&#xff1a;AI的魔法 在数字化时代&#xff0c;数据库技术作为信息管理的核心&#xff0c;正经历着前所未有的变革。AI&#xff08;人工智能&#xff09;和云原生技术的融合&#xff0c;正在重新定义数据库…...

彩光赋能中国智造 极简光3.X助力“数智”转型

蒸汽时代、电气时代、信息时代三大工业革命后 互联网和智能制造主导的工业4.0时代来临 大数据、云计算、人工智能等新兴技术 对企业园区的网络架构、负载能力等 提出了新要求,也使得光纤较于传统铜缆 在距离、性能、延时上的优势日益凸显 基于此 围绕未来园区网建设的企…...

985上交应届生转正12天,被某东辞退了!

&#x1f447;我的小册 45章教程:(小白零基础用Python量化股票分析小册) ,原价299&#xff0c;限时特价2杯咖啡&#xff0c;满100人涨10元。 01.事情起源 最近粉丝群都在转发一个截图&#xff0c;某应届毕业生在某东实习一年&#xff0c;才转正才12天&#xff0c;就因为自己调侃…...

Unity算法(一)——快速排序算法

文章目录 前言快速排序算法1、概念与实现2、优化 前言 算法是程序员的基础能力之一&#xff0c;资质越老的程序员在这方面理解会越深&#xff0c;很多时候项目在某个需要优化、提升的节点时&#xff0c;往往一些算法的使用就可以大大提升程序性能。当然&#xff0c;对于不同项…...

Leetcode 2028

思路&#xff1a;1-6之间的的n个数组合起来要变成sum_t mean*(rolls.size()n) - sum(rolls) ; 那么可以先假设每个数都是sum_t / n 其中这个数必须要在1 - 6 之间否者无法分配。 然后可以得出n * (sum_t / n ) < sum ; 需要对余数mod进行调整&#xff0c;为了减少调整的次…...

Angular(1):使用Angular CLI创建空项目

要创建一个空的 Angular 项目&#xff0c;可以使用 Angular CLI&#xff08;命令行界面&#xff09;。以下是使用 Angular CLI 创建一个新项目的步骤&#xff1a; 1、安装 Angular CLI&#xff1a; 打开你的命令行界面&#xff08;在 Windows 上是 CMD、PowerShell 或 Git Bas…...

字节跳动(校招)算法原题

大模型"价格战"越演越烈 昨天的 文章 提到&#xff0c;自从 5 月 15 号&#xff0c;字节跳动发布了击穿行业底价的豆包大模型后&#xff0c;各大厂家纷纷跟进降价&#xff0c;而且都不是普通降价&#xff0c;要么降价 90% 以上&#xff0c;要么直接免费。 今天是豆包…...

前端面试题日常练-day39 【面试题】

题目 希望这些选择题能够帮助您进行前端面试的准备&#xff0c;答案在文末。 1. 哪个jQuery方法用于设置元素的HTML内容&#xff1f; a) .html() b) .text() c) .val() d) .append() 2. 在jQuery中&#xff0c;以下哪个方法用于隐藏或显示一个元素&#xff1f; a) .toggle…...

心电信号降噪方法(滤波器/移动平均/小波等,MATLAB环境)

对于一个正常的、完整的心动周期&#xff0c;对应的心电图波形如下图所示&#xff0c;各个波形都对应着心脏兴奋活动的生理过程&#xff0c;包含P波&#xff0c;PR段&#xff0c;QRS波群&#xff0c;ST段&#xff0c;T波&#xff0c;U波。 &#xff08;1&#xff09;P波心电图中…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...