JS 实现SSE通讯和了解SSE通讯

SSE

介绍:
Server-Sent Events(SSE)是一种用于实现服务器向客户端实时推送数据的Web技术。与传统的轮询和长轮询相比,SSE提供了更高效和实时的数据推送机制。

SSE基于HTTP协议,允许服务器将数据以事件流(Event Stream)的形式发送给客户端。客户端通过建立持久的HTTP连接,并监听事件流,可以实时接收服务器推送的数据。


(核心代码)客户端请求:

通过message 接受数据并写入元素

const source = new EventSource("http://localhost:9001/sse")
source.onmessage = function(event) {console.log(event.data)document.getElementById("content").innerHTML += event.data}source.onerror = function(event) {console.log("EventSource failed:", event)}source.onopen = function(event) {console.log("EventSource connected.")}// 关闭sse连接// source.close()

http://localhost:9001为当前我本地启的服务器

服务器端:
这里我自己写了个简单的node接收请求,每500ms给客户端发送一次数据

const express = require('express')
const app = express()
const fs = require('fs')//创建get请求
app.get('/sse', (req, res) => {res.setHeader('Content-Type', 'text/event-stream')res.setHeader('Connection', 'close')res.setHeader('Access-Control-Allow-Origin', '*')const data = fs.readFileSync('sse.txt', 'utf-8')const length = data.lengthconsole.log(length)let i = 0;var interval = setInterval(() => {console.log(i, length)if(i >= length) {console.log('end')clearInterval(interval);return;}res.write(`data:${data.split('')[i]}\n\n`)i++;}, 500);
})//端口号9001
app.listen(9001)
console.log('server is running at http://localhost:9001')

sse.txt是为了测试写的要响应的内容

效果:

现在我们可以实现一个类似chatgpt的效果,服务器可以不断的给客户端发新数据

在这里插入图片描述


SSE 和 WebSocket 的差异

1、SSE 适用于服务器向客户端单向发送实时更新的数据,适合实时事件推送场景。SSE 使用的是标准的 HTTP 协议,对于浏览器的兼容性较好,但只支持客户端接收数据。
2、WebSocket 适用于客户端和服务器之间的双向实时通信,适合聊天应用、实时游戏等场景。WebSocket 需要独立的 TCP 连接,因此相比 SSE,会增加一定的网络开销,但能够实现双向通信。

简单来说就是WebSocket是全双工的,而SSE建立连接后只能由服务器向客户端发送实时数据

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

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

相关文章

HTML之表单学习记录

如果一个页面仅仅供用户浏览,那就是静态页面。如果这个页面还能实现与服务器进行数据交互(像注册登录、话费充值、评论交流)​,那就是动态页面。表单是我们接触动态页面的第一步。其中表单最重要的作用就是:在浏览器端…

WPF学习之路,控件的只读、是否可以、是否可见属性控制

C#的控件学习之控件属性操作 控件的只读、是否可以、是否可见,是三个重要的参数,在很多表单、列表中都有用到,正常表单控制可以在父层主键控制参数是否可以编辑和可见,但是遇到个别字段需要单独控制时,可以在初始化wi…

three.js 杂记

clip: 1: 着色器 #ifdef USE_CLIP_DISTANCE vec4 worldPosition modelMatrix * vec4( position, 1.0 ); gl_ClipDistance[ 0 ] worldPosition.x - sin( time ) * ( 0.5 ); #endif gl_Position projectionMatrix * modelViewMatrix * vec4( positio…

基于混合配准策略的多模态医学图像配准方法研究

摘要: 提出了一种由“粗”到“细”的混合配准策略,该配准策略吸取了以往配准方法的优点,且在细配阶段将基于特征的配准方法和基于灰度的配准方法结合在一起,提出了基于轮廓特征点集最大互信息的配准方法,从而在速度和精…

贪心算法入门(二)

相关文章 贪心算法入门(一)-CSDN博客 1.什么是贪心算法? 贪心算法是一种解决问题的策略,它将复杂的问题分解为若干个步骤,并在每一步都选择当前最优的解决方案,最终希望能得到全局最优解。这种策略的核心…

Autosar CP 基于CAN的时间同步规范导读

Autosar CP 基于CAN的时间同步规范主要用途 实现精确时间同步 提供了一种在CAN总线上准确分发时间信息的机制,确保连接到CAN网络的各个电子控制单元(ECU)能够共享精确的公共时间基准,对于需要精确时间协调的汽车系统功能&#xff…

前端常用布局模板39套,纯CSS实现布局

前端常用布局模板39套,纯CSS实现布局 说明 写博客、官网、管理后台都可以参考以下布局模板,实现模板布局的方式包含:flex、CSS、HTML5、Layout。 不需要下载积分,没有特殊库引用,不用安装任何插件,打开资源…

jmeter常用配置元件介绍总结之后置处理器

系列文章目录 安装jmeter jmeter常用配置元件介绍总结之后置处理器 8.后置处理器8.1.CSS/JQuery提取器8.2.JSON JMESPath Extractor8.3.JSON提取器8.4.正则表达式提取器8.5.边界提取器8.5.Debug PostProcessor8.6.XPath2 Extractor8.7.XPath提取器8.8.结果状态处理器 8.后置处理…

边缘计算在智能交通系统中的应用

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 边缘计算在智能交通系统中的应用 边缘计算在智能交通系统中的应用 边缘计算在智能交通系统中的应用 引言 边缘计算概述 定义与原…

Vue 项目打包后环境变量丢失问题(清除缓存),区分.env和.env.*文件

Vue 项目打包后环境变量丢失问题(清除缓存),区分.env和.env.*文件 问题背景 今天在导报项目的时候遇到一个问题问题:在开发环境中一切正常,但在打包后的生产环境中,某些环境变量(如 VUE_APP_B…

十三、注解配置SpringMVC

文章目录 1. 创建初始化类,代替web.xml2. 创建SpringConfig配置类,代替spring的配置文件3. 创建WebConfig配置类,代替SpringMVC的配置文件4. 测试功能 1. 创建初始化类,代替web.xml 2. 创建SpringConfig配置类,代替spr…

(干货)Jenkins使用kubernetes插件连接k8s的认证方式

#Kubernetes插件简介 Kubernetes 插件的目的是能够使用 Kubernetes 配合,实现动态配置 Jenkins 代理(使用 Kubernetes 调度机制来优化负载),在执行 Jenkins Job 构建时,Jenkins Master 会在 kubernetes 中创建一个 Sla…

俏美韵从心出发,与女性一道为健康生活贡献力量

近期发布的《2025 全球食品与饮料》报告中显示,“回归本源”为2025年食品饮料赛道的趋势之一,消费者对于产品成分要求越来越严格,尤其是女性消费者,对成分是否自然,营养含量等方面越来越看重,俏美韵品牌从产…

区块链技术在慈善捐赠中的应用

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 区块链技术在慈善捐赠中的应用 区块链技术在慈善捐赠中的应用 区块链技术在慈善捐赠中的应用 引言 区块链技术概述 定义与原理 发…

mongoDB的安装及使用

mongodb的安装参考: Centos系统中mongodb的安装详解_centos安装mongodb-CSDN博客 不要下载最新的版本,新的版本中mongo命令无法使用,也就是安装后不能通过mongo命令登录,我这里使用5.0.30版本; mongodb客户端demo: …

DNS面临的4大类共计11小类安全风险及防御措施

DNS在设计之初,并未考虑网络安全限制,导致了许多问题。DNS安全扩展(DNSSEC)协议的开发旨在解决DNS的安全漏洞,但其部署并不广泛,DNS仍面临各种攻击。接下来我们一起看下DNS都存在哪些安全攻击及缓解措施,旨在对DNS安全…

MySql结合element-plus pagination的分页查询

实现效果如下: 重点:使用mysql查询的limit和offset 原生SQL写法: select c.id as deptid,c.name as department,position,a.name staffname,2024-11 as shijian ,CASE WHEN b.shijian IS NULL THEN no ELSE yes END AS submit from fa_wecom…

ubuntu20.04安装FLIR灰点相机BFS-PGE-16S2C-CS的ROS驱动

一、Spinnaker 安装 1.1Spinnaker 下载 下载地址为: https://www.teledynevisionsolutions.com/support/support-center/software-firmware-downloads/iis/spinnaker-sdk-download/spinnaker-sdk–download-files/?pnSpinnakerSDK&vnSpinnakerSDK 在上述地址中…

什么是数字图像?

点赞 关注 收藏 学会了 什么是数字图像? 本文可在公众号「德育处主任」免费阅读 弄懂数字图像的概念对学习计算机视觉很有帮助。 那么,什么是数字图像? 字面意思,数字图像就是有数字组成图像。通常由像素(Pixel&…

2024年11月13日

1.创业法律指南 留置权和其他三个权 定金和订金 一般保证和连带保证 1.案例 物权编之担保法律制度案例一 冯系养鸡专业户,为改建鸡会和引进良种需资金20万元。冯向陈借款10万元,以自己的一套价值10万元的音响设备抵押,双方立有抵押字据&a…