前端实现消息推送、即时通信、http简介

news2024/12/20 13:09:39

信息推送

服务端主动向客户端推送消息,使客户端能够即时接收到信息。

场景

  • 页面接收到点赞,消息提醒
  • 聊天功能
  • 弹幕功能
  • 实时更新数据功能

实现即时通讯方式

短轮询

浏览器(客户端)每隔一段时间向服务器发送http请求,服务器端在收到请求后,不论是否有数据更新,都直接进行响应。

本质:客户端通过不停的请求,使客户端能模拟能实时能接收客户端的数据变化

优点:简单易懂,操作方便

缺点:如果每个客户端不停的向服务器发送请求,使用人数增加,请求数量翻倍,造成服务器压力大,反应迟缓。不适合于大型项目或者使用人数太多。

var xhr = new XMLHttpRequest();
setInterval(function(){
    xhr.open('GET','/user');
    xhr.onreadystatechange = function(){

    };
    xhr.send();
},1000)

长轮询(comet)

服务端接收客户端的请求之后不会立即反应,先是将请求挂起,当数据发生改变后,返回响应。当一定时间内数据未变化,计时结束返回响应并关闭连接。客户端处理响应后,向服务器再次发送新一轮长轮询。

优点:比短轮询减少了http请求

缺点:挂起也会浪费资源

function ajax(){
    var xhr = new XMLHttpRequest();
    xhr.open('GET','/user');
    xhr.onreadystatechange = function(){
        ajax();
    };
    xhr.send();
}

短轮询与长轮询都

  • 基于HTTP的,两者本身存在着缺陷;轮询需要更快的处理速度,长轮询要求处理并发的能力
  • 服务器不会主动推送信息,而是在客户端发送ajax请求后进行返回的响应

长连接(SSE)

SSE基于 HTTP 协议中的持久连接,作为 HTML5 出现的新功能,不用客户端向服务器发请求,而是当服务器数据发生改变,直接对客户端响应

 see 前后端原生实现 Web消息推送之SSE_魅Lemon的博客-CSDN博客

see vue3 vue3使用sse_sse vue_OneRepublicSu的博客-CSDN博客

see vue2 在vue2中使用SSE(服务器发送事件)_sse vue_如晴天似雨天~的博客-CSDN博客

WebSocket

WebSocket是Html5定义的一个新协议,可以实现服务器-客户端全双工通信;需要服务器和客户端建立连接,当连接开始,双方处于平等状态互发信息,不存在请求和相应的关系。

ssewebsocket
http 协议独立的 websocket 协议
轻量,使用简单相对复杂
默认支持断线重连需要自己实现断线重连
文本传输二进制传输
支持自定义发送的消息类型-
单通道,只能服务端向客户端发消息双通道,相互发信息

websocket实现  js实现WebSocket 连接_js websocket_给你六圆钱的博客-CSDN博客

http

  • 全称:超文本传输协议。
  • 简介:服务器传输 超文本 到本地浏览器的传输协议
  • 特点:应用层协议,基于TCP/IP协议传输数据
  • https:加密的http
  • HTTP默认的端口号为80, HTTPS的端口号为443。

http协议状态码

  • 1xx  (信息)
    • 100 接受的请求正在处理,信息类状态码
  • 2xx(成功) 请求成功处理
    • 200 服务器已成功处理了请求
  • 3xx(重定向)要完成请求,需要进一步操作
    • 301    永久性重定向,表示资源已被分配了新的 URL
    • 302    临时性重定向,表示资源临时被分配了新的 URL
    • 303    表示资源存在另一个URL,用GET方法获取资源
    • 304    (未修改)自从上次请求后,请求网页未修改。服务器返回响应,不返回网页内容
  • 4xx  客户端错误
    • 400      服务器不理解请求的语法
    • 401      请求需要有通过HTTP认证的认证信息
    • 403      服务器拒绝请求
    • 404      服务器找不到请求网页
  • 5xx 服务器错误
    • 500      服务器遇到错误,无法完成请求
    • 503      服务器处于停机维护或超负载,无法处理请求

三次握手四次挥手

三次握手的机制是为了保证能建立一个安全可靠的连接

看见一个特别好玩的例子,公安局长王哥 和 陈某打电话

  1. 公安局:你好!陈某,听得到吗?(一次会话)
  2. 陈某:听到了,王哥,你能听到吗 (二次会话)
  3. 公安局:听到了,你过来自首吧 (开始会话)(三次会话)

在这里插入图片描述

 最开始时客户端和服务器都处于CLOSED关闭状态。主动打开连接的为客户端,被动打开连接的是服务器。

TCP服务器进程先创建传输控制块TCB,时刻准备接受客户进程的连接请求,服务器就进入了LISTEN 监听状态

  • 第一次握手
    • 客户端向服务端发送请求报文,报文首部中SYN=1,初始序列号 seq=x。此时,TCP客户端进程进入了 SYN-SENT 同步已发送状态
    • 得出结论:客户端的发送能力正常
  • 第二次握手
    • 服务器收到请求报文后,如果同意连接,则会向客户端发出确认报文。确认报文中应该 ACK=1,SYN=1,确认号是ack=x+1,序列号 seq=y,此时,TCP服务器进程进入了 SYN-RCVD 同步收到状态
    • 得出结论:证明服务器端的接收能力、发送能力正常
  • 第三次握手
    • 客户端收到报文,向服务端进行确认,确认报文的ACK=1,ack=y+1,序列号seq=x+1,此时,TCP连接建立,客户端进入ESTABLISHED已建立连接状态
    • 得出结论:证明客户端的接收能力正常

为什么会需要三次握手的猜测?

  • 当客户端向服务器发送请求报文,由于网络等原因滞留,未能即时发送到服务,然后客户端继续向服务端发送请求,后于服务器成功建立了连接。当连接释放后,之前的请求到达了服务器,这个请求已失效了,但服务器误以为客户端的新请求,又进行了连接,造成了资源浪费和不必要的错误。
  • 采用三次握手,失效的报文发送到服务器,服务器再返回给客户端,客户端就能确定是否还要继续建立连接。


四次挥手

  1. 张三:好的,那我先走了
  2. 李四:好的,那你走吧
  3. 李四:那我也走了?
  4. 张三:好的,你走吧

 在这里插入图片描述

数据传输完毕后,双方都可释放连接。最开始的时候,客户端和服务器都是处于ESTABLISHED状态,然后客户端主动关闭,服务器被动关闭。

一次挥手 客户端发出连接释放报文,并且停止发送数据。释放数据报文首部,FIN=1,其序列号为seq=u(等于前面已经传送过来的数据的最后一个字节的序号加1),此时,客户端进入FIN-WAIT-1(终止等待1)状态

第二次挥手 服务器端接收到连接释放报文后,发出确认报文,ACK=1,ack=u+1,并且带上自己的序列号seq=v,此时,服务端就进入了CLOSE-WAIT 关闭等待状态

第三次挥手 客户端接收到服务器端的确认请求后,客户端就会进入FIN-WAIT-2(终止等待2)状态,等待服务器发送连接释放报文,服务器将最后的数据发送完毕后,就向客户端发送连接释放报文,服务器就进入了LAST-ACK(最后确认)状态,等待客户端的确认。

第四次挥手 客户端收到服务器的连接释放报文后,必须发出确认,ACK=1,ack=w+1,而自己的序列号是seq=u+1,此时,客户端就进入了TIME-WAIT(时间等待)状态,但此时TCP连接还未终止,必须要经过2MSL后(最长报文寿命),当客户端撤销相应的TCB后,客户端才会进入CLOSED关闭状态,服务器端接收到确认报文后,会立即进入CLOSED关闭状态,到这里TCP连接就断开了,四次挥手完成

为什么客户端要等待2MSL?
主要原因是为了保证客户端发送那个的第一个ACK报文能到到服务器,因为这个ACK报文可能丢失,并且2MSL是任何报文在网络上存在的最长时间,超过这个时间报文将被丢弃,这样新的连接中不会出现旧连接的请求报文。
 

 输入地址点击回车键,浏览器干了什么

  • 输入地址并确认后,浏览器对域名进行解析,如果浏览器有域名对应的DNS相关信息的缓存,有的话可以拿到服务端的IP地址,如果没有的话,会去本地的host文件查看是否进行了配置,如果host文件没有配置相关的信息,那么就会发起DNS的请求用来获取对应的服务器的IP地址。应用端会构造DNS的请求报文,应用层会调用传输层的UDP的相关协议进行数据传输,会在DNS的基础上加上UDP的请求头然后传输信息至网络层,网络层会在UDP的请求报文基础上加上IP的请求头然后到数据链路层,数据链路层会实现二层寻址,会加上自己的mac信息和通过网络层的ARP协议里拿到的下一步基地的mac信息一起通过物理层一起传输出去,通常传到路由器,然后路由器这个三层设备最终会通过运营商的路线传输到下一个路由器地址,达到服务器后信息通过相同步骤进行层层解析HTTP的请求报文,然后构造HTTP响应报文沿着相同的步骤传输至客户端。用户输入URL回车之后,浏览器到底做了什么?_回车之后浏览器做了什么_小牙同学的博客-CSDN博客

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

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

相关文章

Google为TensorFlow设计的专用集成电路TPU3.0图片

Widrow也是在Minsky的影响下进入AI领域的,后来加入斯坦福大学任教。他在1960年提出了自适应线性单元(Adaline),一种和感知器类似的单层神经网络,用求导数方法来调整权重,所以说有“三十年神经网络经验”并不…

CI/CD 流水线 (FREE)

流水线是持续集成、交付和部署的顶级组件。 流水线包括: 工作,定义做什么。例如,编译或测试代码的作业。阶段,定义何时运行作业。例如,在编译代码的阶段之后运行测试的阶段。 作业由 runners 执行。如果有足够多的并…

Qt编写视频监控系统79-四种界面导航栏的设计

一、前言 最初视频监控系统按照二级菜单的设计思路,顶部标题栏一级菜单,左侧对应二级菜单,最初采用图片在上面,文字在下面的按钮方式展示,随着功能的增加,二级菜单越来越多,如果都是这个图文上…

openGauss数据库安装,配置连接 完整版Centos7

服务器版本:Centos7.6 || 7.9 数据库版本:openGauss-5.0.0-CentOS-64bit.tar.bz2 极简版 目录 修改系统参数安装环境安装openGauss数据库配置连接数据库使用navicat连接数据库 修改系统参数 ##修改 /etc/selinux/config 文件中的“SELINUX”值为“disa…

【网络安全】成功上岸深信服,这套面试题你肯定需要!!!

时间过得很快,回想起去年的这个时候,我也正在准备秋招,今天的我刚刚结束培训。 我的个人情况就读于某双非大学,信息与计算科学(大数据方向,校企合作,一个介于数学与计算机之间的专业&#xff0…

移动端H5使用window.open跳转,IOS不生效解决

移动端H5使用window.open跳转,IOS不生效解决 navigator navigator对象,用于提供当前浏览器及操作系统等信息,这些信息都放在navigator的各个属性中。navigator对象也是window对象的成员。 打印navigator对象 userAgent在安卓和IOS的打印结…

Opencv-C++笔记 (9) : opencv-多通道分离和合并

文章目录 一、概论二、多通道分离函数split()三、多通道合并函数merge()四、图像多通道分离与合并例程 一、概论 在图像颜色模型中不同的分量存放在不同的通道中,如果我们只需要颜色模型的某一个分量,例如只需要处理RGB图像中的红色通道,可以…

科技云报道:大模型时代,SaaS元年才真的到来了?

科技云报道原创。 ChatGPT席卷全球后,如果有人问AI大模型影响最大的会是哪个行业?SaaS领域肯定是不二之选。 目前全球各大科技公司已宣称要用大模型触及、整合所有产品。 其中,微软率先为其办公家族装配上了各类copilot,开发者…

Opencv-C++笔记 (10) : opencv-图像像素计算

文章目录 一、概率寻找图像像素的最大值和最小值计算图像的均值和标准方差 一、概率 我们可以将数字图像理解成一定尺寸的矩阵,矩阵中每个元素的大小表示了图像中每个像素的亮暗程度,因此统计矩阵中的最大值,就是寻找图像中灰度值最大的像素…

人机交互学习-7 可视化设计

可视化设计 窗口与菜单窗口窗口Window窗口界面类型 菜单注意事项 对话框模态对话框非模态对话框属性对话框功能对话框进度对话框公告对话框错误对话框消除错误信息 警告对话框确认对话框消除确认对话框 管理对话框内容标签对话框扩展对话框级联对话框 对话框设计原则 控件工具栏…

内部类~~

1:一个类中再定义一个类 2:内部类的使用场景,作用 当一个事物的内部,还有一个部分需要一个完整的结构进行描述,而这个内部的完整结构又只为外部事物提供服务,那么整个内部的完整结构可以选择使用内部类来设…

“大龄”码农的“中年危机”:35岁之后,IT计算机的出路在哪?

前言 对于一个工作不下于4年的人来说,我觉得我有一定的思考沉淀来回答这个问题。 说说我的一些经历吧。 普通一本毕业,专业是自动化,大学由于挂科太多没拿到学位证到上海找实习,一开始做的是开发,从16年到19年都是做…

警惕冒充“数字人民币”诈骗案!

现在大家越来越习惯使用电子支付的方式,数字支付方式的需求也在不断增长。然而一些犯罪嫌疑人却看到了可乘之机,近日,山东菏泽曹县警方破获了一起利用数字人民币,实施诈骗的案件,受骗群众高达上万人。 家住山东菏泽曹…

基于浏览器渲染的组件测试

目录 为什么需要自动化测试 测试的类型 组件测试的方式 白盒测试 黑盒测试 灰盒测试 推荐的方案 Playwright 组件测试案例 Playwright 简介 playwright 架构图 BrowserContext 组件测试原理 组件引入 模型封装 组件渲染测试 组件 Props 测试 组件 Events 测试…

运维数字化转型:用数字化思维重塑运维体系(文末送书五本)

🤵‍♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞&#x1f4…

基于Java学生请假系统设计实现(源码+lw+部署文档+讲解等)

博主介绍: ✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ 🍅 文末获取源码联系 🍅 👇🏻 精…

FDTD 时域有限差分数值模拟方法与应用,COMSOL 多场耦合仿真技术与应用

专题一:COMSOL多物理场耦合 (一)案列应用实操教学: 案例一 光子晶体能带分析、能谱计算、光纤模态计算、微腔腔膜求解 案例二 类比凝聚态领域魔角石墨烯的moir 光子晶体建模以及物理分析 案例三 传播表面等离激元和表面等离…

Cat.4网络DTU,稳定快速的数据传输神器

好兄弟们!你们有没有遇到过,半夜在家睡得正香,突然领导一个电话干过来告诉你设备数据传输中断了,让你赶紧看看怎么回事的情况。简直让人崩溃! 在现代工业和物联网应用中,数据传输的稳定性和速度对于设备的运…

Python-Inspect.exe-uiautomation-基本操作-获取微信群成员信息

文章目录 1.Inspect.exe2.uiautomation使用2.1.简介和安装2.2.获取微信群成员昵称2.3.常用控件类型2.4.比较通用的属性2.4.窗口常见操作2.5.常见鼠标和键盘操作3.总结1.Inspect.exe 检查 (Inspect.exe) 是一种基于 Windows 的工具,可以选择任何 UI 元素并查看其辅助功能数据。…

ASEMI代理光宝光耦LTV-5314资料,LTV-5314规格书

编辑-Z 在电子设备的设计和制造过程中,光耦合器是一种至关重要的组件。它们在电路中起到隔离作用,防止电流反向流动,从而保护设备免受损坏。其中,光耦LTV-5314是一种广受欢迎的光耦合器,以其卓越的性能和可靠的稳定性…