前端与后端长连接 方法

1、SSE

一、SSE的主要特点

  1. 单向通信:SSE是服务器向客户端的单向通信,客户端不能直接通过SSE向服务器发送消息。
  2. 文本数据流:SSE传输的主要是文本数据(通常是JSON格式),不适合二进制数据。
  3. 自动重连:SSE具有自动重连机制,当连接中断时,浏览器会自动尝试重新连接。
  4. 事件分发:SSE支持自定义事件类型,可以在数据流中发送不同类型的事件。

二、优缺点

1、优点:

  • 实时性强:适合需要实时数据更新的场景。
  • 简单易用:API简单,容易实现。

2、缺点:

  • 单向通信:仅支持服务器向客户端推送数据,客户端无法直接向服务器发送消息。
  • 兼容性:部分旧浏览器不支持SSE。
  • 性能:对于大量客户端连接的场景,可能需要优化服务器的性能。

总之,SSE是一种轻量级、易于实现的实时数据推送技术,适用于多种实时应用场景。

2、WebSocket

一、什么是websocket
WebSocket该协议在规范RFC 6455中进行了描述,它提供了一种通过持久连接在浏览器和服务器之间交换数据的方法。数据可以作为"数据包"双向传递,而无需中断连接或发出额外的 HTTP 请求。

为啥不用HTTP1.1 呢,HTTP1.1的双向通信只能通过轮询,会浪费很多网络资源,因为每次都需要tcp的三次握手以及四次挥手。而且HTTP1.1不能从server到client 进行消息推送,消息的实时性得不到保证。

二、websocket 的用途
WebSocket 特别适合需要连续数据交换的服务。例如,网络游戏和实时交易系统。

WebSocket 在网络会议里有广泛应用:可以用作网络会议前检查人数的计数器或者用作会议期间发送材料和文件的平台,会议期间的发言内容

三、websocket 特点
双向通信:优劣,优点是消息的实时性,缺点是伸缩性非常差比如增加服务器

管理会话:双向关闭会话

维持长链接:websocket 是通过ping,pong 发心跳维持长链接而.http1.1 是通过keeplive

兼容HTTP协议:端口复用 ws 是80端口,wss 是443 端口

支持扩展:如per message-deflate 扩展

Http 协议头部存放元数据,websocket 传输的应用层存放元数据

是基于帧而不是基于流(HTTP,TCP)每一帧要么承载字符数据要么承载二进制数据

基于浏览器的同源策略模型(非浏览器无效)可以使用Access-Control-Allow-Origin 等头部

基于URI、子协议支持同主机同端口上的多个服务、

相关推荐
腾讯TNTWeb前端团队4 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰7 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪7 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy8 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom9 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom9 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom9 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom9 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom9 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试