为什么会有websocket(由来)

news2025/1/10 5:52:23

一、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。

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

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

相关文章

芯片固定uv胶有什么优点?

芯片固定uv胶有什么优点? 芯片固定UV胶具有多种优点,这些优点使得它在半导体封装和芯片固定等应用中成为理想的选择。以下是芯片固定UV胶的一些主要优点: 固化速度快:UV胶在紫外线照射下能迅速固化,通常在几秒到几十秒…

论文阅读 - TIME-LLM: TIME SERIES FORECASTING BY REPROGRAMMING LARGE LANGUAGE MODELS

论文链接: https://arxiv.org/abs/2310.01728 目录 摘要 1 INTRODUCTION 2 RELATED WORK 3 METHODOLOGY 3.1 MODEL STRUCTURE 4 MAIN RESULTS 4.1 长期预测 4.2 短期预测 4.3 FEW-SHOT FORECASTING 5 CONCLUSION AND FUTURE WORK 摘要 动机: 时…

基于语音识别的智能电子病历(三)之 Soniox

Soniox成立于2020年,目前总部位于美国加州福斯特城,该公司开发了市场上最好的语音识别引擎之一。该公司目前提供市面上领先的云转录引擎之一——这也是audioXpress成功用于采访和一般语音转文本转换的引擎。 专注于语音AI的Soniox在2021年推出了世界上第…

单调栈--

1.每日温度 那么单调栈的原理是什么呢?为什么时间复杂度是O(n)就可以找到每一个元素的右边第一个比它大的元素位置呢? 单调栈的本质是空间换时间,因为在遍历的过程中需要用一个栈来记录右边第一个比当前元素高的元素,优点是整个数…

【JVM底层原理,JVM架构详解】

1. JVM简介 1.1 什么是JVM? JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的。 主流虚拟机: 虚拟机名称介绍HotSpotOracle/Sun JDK和OpenJDK都使用HotSPo…

Node.js和npm常用命令

一、Node.js简介 Node.js是一个免费、开源、跨平台的JavaScript运行时环境,允许开发人员创建服务器、web应用程序、命令行工具和脚本。 点击查看node.js中文官网 点击查看node.js英文官网 二、npm简介 npm(Node Package Manager)是Node.js的软件包管理器&#xff0…

C++贪心算法(3)

整数区间 #include<bits/stdc.h> using namespace std; int main() {int n;cin>>n;int a[110][10]{0};for(int i0;i<n;i){cin>>a[i][1]>>a[i][2];}int cnt[110]{0};int mi99999;int mii-1;bool f[110]{false,false,false,false,false,false,false,…

2024年5月20日 (周一) 叶子游戏新闻

报告老板&#xff0c;现在就加班&#xff01;《职场浮生记》抢先体验版现已上线今天由LeiYun Games开发&#xff0c;2P Games发行的《职场浮生记》正式在Steam平台推出抢先体验版。玩家将跟随主角的步伐踏入一个最为真实的职场环境之中&#xff0c;在生活与工作之间找寻平衡&am…

Echarts 实现将X轴放在图表顶部并且自动播放展示提示信息内容

文章目录 需求分析效果预览需求 如下图所示,实现柱状图中反转倒着绘制 分析 使用 ECharts 来实现对 Y 轴的倒序排序时,可以通过设置 yAxis 的 inverse 属性为 true 来实现。以下是一个简单的示例,演示了如何使用 ECharts 来创建一个柱状图,并将 Y 轴进行倒序排序:并且…

杭州威雅学校:在学业与生活平衡中找到更好的自己

进入威雅杭州校园&#xff0c; 沿湖边小道步行约5分钟&#xff0c; 四栋寄宿学院与教学区隔湖相望&#xff0c; 威雅人更喜欢叫他们&#xff1a; 「Cavell」&「Dove」 「Elgar」&「Hawking」 提起「寄宿制」&#xff0c;人们本能地会把它和「住校」划等号。 这种…

商品上线搜索服务

文章目录 1.引入检索页面1.确保search目录和list.html都成功引入2.修改list.html&#xff0c;增加命名空间3.后端编写接口 SearchController.java4.测试访问 2.带条件分页检索1.前端要求返回数据的格式2.构建vo&#xff0c;SearchResult.java3.SkuInfoService.java 购买用户根据…

【Python】 删除列表元素的简单方法

基本原理 在Python中&#xff0c;列表&#xff08;list&#xff09;是一种非常灵活的数据结构&#xff0c;它允许我们存储一系列的元素。有时&#xff0c;我们需要根据元素的值来删除列表中的特定元素。虽然Python没有内置的函数直接通过值来删除列表中的元素&#xff0c;但我…

JVM学习-彻底搞懂Java自增++

从字节码角度分析i和i的区别 public void method6() {int i 10;i; //在局部变量表上直接加1}public void method7() {int i 10;i; //字节码同i}public void method8() {int i 10;int a i; //通过下图可以看出先将局部变量表中的值push到操作数栈&#xff0c;然…

线性回归计算举例

使用正规方程计算&#xff08;一元线性回归&#xff09; import numpy as np import matplotlib.pyplot as plt # 转化成矩阵 X np.linspace(0, 10, num 30).reshape(-1, 1) # 斜率和截距&#xff0c;随机生成 w np.random.randint(1, 5, size 1) b np.random.randint(1,…

建立开源人工智能:一种呼吁

建立开源人工智能&#xff1a;一种呼吁 编译 李升伟 人工智能&#xff08;AI&#xff09;推动整个社会、经济和科学的创新。我们认为&#xff0c;必须根据开源原则建立人工智能技术&#xff0c;以促进人工智能技术的可访问性、协作性、责任性和互操作性。 计算机科学界有着接受…

C++算术运算和自增自减运算

一 引言 表示运算的符号称为运算符。 算术运算&#xff1b; 比较运算&#xff1b; 逻辑运算&#xff1b; 位运算&#xff1b; 1 算术运算 算术运算包括加、减、乘、除、乘方、指数、对数、三角函数、求余函数&#xff0c;这些都是算术运算。 C中用、-、*、/、%分别表示加、减…

【项目教程】FFmpeg+SDL2实现视频播放器

一、前言 学习ffmpeg和sdl&#xff0c;并编写一个视频播放器&#xff0c;是一个很好的音视频开发项目。 虽然关于视频播放器的原理已经有很多人在博客中进行了讲解&#xff0c;但是很多人不提供视频和代码&#xff0c;这也是我写这篇博客的主要原因。 二、在视频播放器中&am…

『哈哥赠书 - 53期』-『深入浅出 Spring Boot 3.x』

⭐️ 《深入浅出 Spring Boot 3.x》 ⭐️ 学习Spring Boot的必读之书 在 Java 后端开发领域&#xff0c;功能强大的 Spring 开源框架不仅是首选&#xff0c;也是事实上的标准。但由于 Spring 存在配置烦琐、部署不易、依赖管理困难等问题&#xff0c;因此基于 Spring 的快速开…

进程互斥经典问题(读写者问题、理发店问题)

目录 读写者问题 问题描述 问题分析 进程互斥问题三部曲 读者写者算法实现 一、找进程——确定进程关系 二、找主营业务 三、找同步约束 a.互斥 b.资源 c.配额 理发店问题 问题描述 问题分析 进程互斥问题三部曲 理发店问题算法实现 一、找进程——确定进程…

微信小程序毕业设计-校车购票系统项目开发实战(附源码+论文)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;微信小程序毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计…