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

news2024/12/25 14:03:32

信息推送

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

场景

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

实现即时通讯方式

短轮询

浏览器(客户端)每隔一段时间向服务器发送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博客
webSocket 学习_小满zs的博客-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/672028.html

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

相关文章

leetcode47. 全排列 II(回溯算法-java)

全排列 II leetcode47. 全排列 II题目描述解题思路代码演示 回溯算法专题 leetcode47. 全排列 II 来源:力扣(LeetCode) 链接:https://leetcode.cn/problems/permutations-ii 题目描述 给定一个可包含重复数字的序列 nums &#xf…

Vulnhub: Corrosion靶机

kali:192.168.111.111 靶机:192.168.111.130 信息收集 端口扫描 nmap -A -sC -v -sV -T5 -p- --scripthttp-enum 192.168.111.130 目录爆破 blog-post目录下存在两个目录 对archives目录中的randylogs.php进行测试发现存在文件包含 wfuzz -c -w /op…

POI设置日期类型时间约束createDateConstraint不生效了

背景 在使用 POI 导出 excel 时间类型加入时间约束时,发生了使用 Excel 打开无法正确使用时间约束的问题,但是在 永中Office 打开可以使用 关键词 helper.createDateConstraint,POI设置时间约束 设置时间约束的代码如下 该代码是有问题的&…

浏览器渲染流程

解析HTML,生成DOM树,解析CSS,生成CSSOM树 将DOM树和CSSOM树结合,生成渲染树(Render Tree) Layout(回流):根据生成的渲染树,进行回流(Layout),得到节点的几何信息(位置,大小&#x…

MySQL实战解析底层---为什么我的MySQL会“抖“一下

目录 前言 SQL语句为什么变“慢”了 InnoDB刷脏页的控制策略 前言 一条SQL语句,正常执行的时候特别快,但是有时也不知道怎么回事,它就会变得特别慢,并且这样的场景很难复现,它不只随机,而且持续时间还很…

STM32挂载SD卡基于Fatfs文件系统读取文件信息

STM32挂载SD卡基于Fatfs文件系统读取文件信息 🔖本例程基于正点原子标准库修改而来。 📍FatFs 相关API函数网站:http://elm-chan.org/fsw/ff/00index_e.html 🌴分别测试了SD卡模块以及Mini SD卡模块。 🌿STM32f1单片…

代码随想录二刷day29 | 回溯之 491.递增子序列 46.全排列 47.全排列 II

day29 491.递增子序列回溯三部曲 46.全排列回溯三部曲 47.全排列 II 491.递增子序列 题目链接 解题思路: 回溯三部曲 递归函数参数 本题求子序列,很明显一个元素不能重复使用,所以需要startIndex,调整下一层递归的起始位置。…

【Python 基础篇】Python各种运算符详解

文章目录 引言一、算术运算符二、比较运算符三、逻辑运算符四、赋值运算符总结 引言 在 Python 编程中,运算符是用于执行各种数学和逻辑操作的特殊符号。它们使我们能够对变量和值进行各种计算和比较。本篇博客将深入探讨 Python 中的常见运算符,并通过…

【如何将多个类似 DDR-dataset.zip.010 文件文件合并成一个zip文件,然后解压】

如何将多个类似 DDR-dataset.zip.010 文件文件合并成一个zip文件,然后解压 问题描述 DDR-dataset.zip.01、DDR-dataset.zip.02、DDR-dataset.zip.03、…、DDR-dataset.zip.010,如何将他们合并到一起并解压? 解决方法 Windows 系统 在Windo…

原生Jdbc获取库、表、字段

文章目录 一、简介1、概述2、Jdbc获取连接3、执行器 二、获取链接1、获取链接2、关闭连接3、Statement4、PrepatedStatement5、 ResultSet6、ResultSetMetaData 三、执行SQL2.1 增/删/改2.2 查询 四、获取库、表结构1、获取Catalog2、获取库列表3、获取表名4、获取字段 一、简介…

为什么本地部署的低代码平台更有优势?

编者按:快速发展的企业需要跟上不断变化的市场趋势。在这种环境下,低代码开发平台可以成为企业快速进入市场的利器。低代码开发的优势可以影响新软件的交付速度,而可视化开发是推动这种无与伦比的速度的关键功能。私有化部署方案和源码交付机…

27-2BP_Adaboost强分类器公司财务预管建模——强分类器和弱分类器(附matlab程序)

1.简述 Adaboost算法的思想是合并多个“弱”分类器的输出以产生有效分类。其主要步骤为:首先给出弱学习算法和样本空间(x,y),从样本空间中找出m组训练数据,每组训练数据的权重都是1/m。然后用弱学习算法迭代运算T次&am…

SIP协议学习笔记

SIP 协议(Session initialization Protocol)会话发起协议 是IETF制定的多媒体通信协议,是一个基于文本的应用层控制协议,用于建立,修改和终止IP网上的双方或多方的多媒体会话,支持代理、重定向、登记定位用户等功能 支持用户的移动&#xff…

Packet Tracer - 使用思科 IOS 配置 DHCP

Packet Tracer - 使用思科 IOS 配置 DHCP 地址分配表 设备 接口 IPv4 地址 子网掩码 默认网关 R1 G0/0 192.168.10.1 255.255.255.0 不适用 S0/0/0 10.1.1.1 255.255.255.252 不适用 R2 G0/0 192.168.20.1 255.255.255.0 不适用 G0/1 已分配 DHCP 已分配 …

python安装/卸载模块方法步骤详解(附详细图解)

在日常工作中会需要安装或者卸载Python模块.于是我整理了一下,下面这篇文章主要给大家介绍了关于python安装/卸载模块的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下 以pygame模块举例 1,通过pycharm导入 (1)直接点击install …

Redis 2023面试5题(三)

一、Redis集群数据hash分片算法是怎么回事? Redis集群数据hash分片算法是一种将数据分散存储在不同的节点上来实现的机制。具体来说,Redis集群将数据分成16384个槽位,每个槽位对应一个节点。当需要访问某个key时,Redis会根据key的…

nginx主配置文件及实战案例

文章目录 一.nginx主配置文件nginx.conf1.认识nginx服务的主配置文件2.全局配置3.I/O事件配置4.HTTP配置5.检查配置文件是否正确6.浏览器测试7.总配置文件图示7.1 nginx总配置文件的三个模块7.2 HTTP文件配置的图示&am…

【Matlab】语音信号分析与处理实验报告

一、目的 使用Matlab分析与设计实验,理解与掌握以下知识点: 1、信号的采样、频谱混叠 2、信号的频谱分析 3、信号的幅度调制与解调方法 4、理想滤波器的时域和频域特性 5、数字滤波器的设计与实现 二、内容 1、录制一段个人的语音信号 2、采用合适的频…

Unity3D制作一个会移动的方块(还不会移动照相机)

学习Unity3D这么久了,如果你还不会制作一个按下WASD就可以移动的方块的话,那么你的学习将没有一点成就感,我学习的时候,我决定先学习移动,这样我就会对Unity更加感兴趣,学习起来的动力会更为充足 先创建一…

Nseeus安装及使用教程

Nessus是一款目前使用较多的系统漏洞扫描与分析软件 文章目录 Nessus下载安装使用启动:https://localhost:8834/ Nessus Nessus是一款目前使用较多的系统漏洞扫描与分析软件 下载 下载链接:https://www.tenable.com/downloads/nessus 安装 傻瓜式安装 使用 最…