为什么会有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。

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

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

相关文章

iOS--工厂设计模式

iOS--工厂设计模式

iOS--工厂设计模式 设计模式的概念和意义类族模式UIButton作为类族模式的例子总结 三种工厂设计模式简单工厂模式（Simple Factory Pattern）：代码实例 工厂方法模式（Factory Method Pattern）：代码实例 抽象工…
阅读更多...
C语言学习笔记--C语言的实型数据

C语言学习笔记--C语言的实型数据

实型常量的表示方法（掌握） 实型也称为浮点型。实型常量也称为实数或者浮点数。在C语言中，实数只采用十进制。它有两种形式：十进制小数形式，指数形式。 1十进制数形式：由数码0~9和小数点组成。 例如&…
阅读更多...
新建一个esri_sde_gists的服务

新建一个esri_sde_gists的服务

需求 新建一个esri_sde_gists的服务 步骤： 需要拷贝ora11gexe目标为新的目录，例如ora11gexe_gists 运行drivers找到etc下面的services文件，添加端口5152： 检查sde的library并创建： CREATE or REPLACE LIBRARY ST_S…
阅读更多...
黑马es0-1实现自动补全功能

黑马es0-1实现自动补全功能

1、安装分词器 上github上找人做好的分词器，放到es-plugin数据卷里，然后重启es即可 2、自定义分词器 elasticsearch中分词器(analyzer)的组成包含三部分: character filters:在tokenizer之前对文本进行处理。例如删除字符、替换字符 …
阅读更多...
如何彻底卸载sql sever2022

如何彻底卸载sql sever2022

目录 背景过程1、关闭sql sever服务2、打开控制面板，卸载SQL Sever3、手动删除 SQL Server 遗留文件4、清空注册表5、重启计算机以确保所有更改生效。 总结 背景 重装了电脑，安装sqlServer，一直报错，不成功，所以每次安…
阅读更多...
论文阅读 - TIME-LLM: TIME SERIES FORECASTING BY REPROGRAMMING LARGE LANGUAGE MODELS

论文阅读 - 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 摘要 动机： 时…
阅读更多...
设计模式19——观察者模式

设计模式19——观察者模式

写文章的初心主要是用来帮助自己快速的回忆这个模式该怎么用，主要是下面的UML图可以起到大作用，在你学习过一遍以后可能会遗忘，忘记了不要紧，只要看一眼UML图就能想起来了。同时也请大家多多指教。 观察者模式（Observ…
阅读更多...
C++学习/复习8--STL简介/六大组件/缺陷

C++学习/复习8--STL简介/六大组件/缺陷

一、STL简介 二、六大组件 三、面试题 四、STL缺陷
阅读更多...
读后感：《SQL数据分析实战》运营SQL实用手册

读后感：《SQL数据分析实战》运营SQL实用手册

学习SQL，先有用起来，有了使用价值，之后才是去了解它的原理，让使用更加顺畅。 在大部分业务场景中，通过SQL可以快速的实现数据处理与统计。《SQL数据分析实战》区别于其他工具书，它并没有介绍SQL是什么&…
阅读更多...
视图【mysql数据库】

视图【mysql数据库】

目录 一、视图的创建、查看、修改、删除 二、cascaded、local检查选项 cascaded和local的区别 三、视图的更新 四、视图的作用 一、视图的创建、查看、修改、删除 二、cascaded、local检查选项 上面的几句SQL中，我们虽然给视图插入了id 30的数据，但…
阅读更多...
【vue-4】遍历数组或对象v-for

【vue-4】遍历数组或对象v-for

1、遍历数组 <ul><li v-for"(value,index) in web.number">index>{{index}}:value>{{value}}</li> </ul> 知识点&#xff1a; <ul>标签定义无序列表 举例&#xff1a; <ul><li>Coffee</li><li>Tea…
阅读更多...
Windows UWP ContentDialog去掉阴影（全透明）的实现

Windows UWP ContentDialog去掉阴影（全透明）的实现

一、前言 在WIndows开发中&#xff0c;使用UWP&#xff08;Universal WIndows&#xff09;项目开发过程中&#xff0c;使用ContentDialog 的过程中&#xff0c;我们可能并不满足现有的样式&#xff0c;这时就需要自定义样式。笔者在自定义样式过程中&#xff0c;遇到了一个难题…
阅读更多...
使用prometheus监测MySQL主从同步状态方案

使用prometheus监测MySQL主从同步状态方案

说明&#xff1a;本文介绍如何使用prometheus、alertmanager监测MySQL主从&#xff0c;当从节点中断同步时&#xff0c;发送邮箱报警&#xff0c;并使用grafana将数据视图化。 结构图如下&#xff1a; 安装 &#xff08;1&#xff09;安装应用 首先&#xff0c;来安装promet…
阅读更多...
【Linux】线程安全及锁的使用

【Linux】线程安全及锁的使用

文章目录 前言一、锁1.定义一个锁变量2.pthread_mutex_init3.pthread_mutex_destroy4.pthread_mutex_lock/pthread_mutex_unlock5.静态变量锁和全局变量锁的初始化 二、问题描述及锁的运用三、RAII风格的锁 前言 临界资源: 在多个线程或进程间共享的资源. 临界区: 代码中访问临…
阅读更多...
5 分钟快速上手图形验证码，防止接口被恶意刷量！

5 分钟快速上手图形验证码，防止接口被恶意刷量！

5 分钟快速上手图形验证码&#xff0c;防止接口被恶意刷量&#xff01; 大家好&#xff0c;我是程序员小白条&#xff0c;今天来给大家介绍一个快速实现图形验证码的优秀框架 AJ-Captcha。 需求分析 如果注册接口没有验证码这种类型的限制&#xff0c;很容易会被刷量&#x…
阅读更多...
protobuf —— 快速上手

protobuf —— 快速上手

protobuf —— 快速上手 创建 .proto 文件添加注释指定proto3语法package 声明符定义消息&#xff08;message&#xff09; 定义消息字段字段定义基本格式字段名称命名规范字段类型字段唯一编号示例 转换关系示例&#xff1a;增加姓名和年龄字段 字段唯一编号字段编号范围编码效…
阅读更多...
英伟达SSD视觉算法，jetson.inference在jetson nano中部署

英伟达SSD视觉算法，jetson.inference在jetson nano中部署

一、用官方镜像刷机 安装SD卡擦除工具SD Card Formatter https://www.sdcardformatter.com/download/ 格式化SD卡 下载官方镜像 https://developer.nvidia.com/jetson-nano-sd-card-image 安装刷机工具balenaEtcher https://www.balena.io/etcher 将上面下载的镜像压缩包解…
阅读更多...
spark的简单学习二

spark的简单学习二

一 spark sql基础 1.1 Dataframe 1.介绍&#xff1a; DataFrame也是一个分布式数据容器。然而DataFrame更像传统数据库的二维表 格&#xff0c;除了数据以外&#xff0c;还掌握数据的结构信息&#xff0c;即schema。同时&#xff0c;与Hive类似&#xff0c;DataFrame也支 持…
阅读更多...
gin框架精通篇（二）

gin框架精通篇（二）

原生数据库使用 导入模块&#xff1a;go get -u github.com/go-sql-driver/mysql 安装 mysql 数据库 安装数据库可能遇到的问题&#xff1a;&#xff08;网上的方法基本可以解决&#xff09; ERROR 1045 (28000): Access denied for user ‘-root’‘localhost’ (using passwo…
阅读更多...
HTML 页面布局

HTML 页面布局

慢慢生活&#xff0c;慢慢变好 —— 24.5.28 页面布局 盒子: 页面中所有的元素(标签)&#xff0c;都可以看做是一个盒子&#xff0c;由盒子将页面中的元素包含在一个矩形区域内&#xff0c;通过盒子的视角更方便的进行页面布局 盒子模型组成: 内容区域(content)、内边距区域(pa…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023