前端与后端长连接 方法

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、子协议支持同主机同端口上的多个服务、

相关推荐
蟾宫曲3 小时前
在 Vue3 项目中实现计时器组件的使用(Vite+Vue3+Node+npm+Element-plus,附测试代码)
前端·npm·vue3·vite·element-plus·计时器
秋雨凉人心3 小时前
简单发布一个npm包
前端·javascript·webpack·npm·node.js
liuxin334455663 小时前
学籍管理系统:实现教育管理现代化
java·开发语言·前端·数据库·安全
qq13267029403 小时前
运行Zr.Admin项目(前端)
前端·vue2·zradmin前端·zradmin vue·运行zradmin·vue2版本zradmin
魏时烟4 小时前
css文字折行以及双端对齐实现方式
前端·css
2401_882726485 小时前
低代码配置式组态软件-BY组态
前端·物联网·低代码·前端框架·编辑器·web
web130933203985 小时前
ctfshow-web入门-文件包含(web82-web86)条件竞争实现session会话文件包含
前端·github
胡西风_foxww5 小时前
【ES6复习笔记】迭代器(10)
前端·笔记·迭代器·es6·iterator
前端没钱5 小时前
探索 ES6 基础:开启 JavaScript 新篇章
前端·javascript·es6
m0_748255266 小时前
vue3导入excel并解析excel数据渲染到表格中,纯前端实现。
前端·excel