通过Node + SSE 做了一个构建日志推送

最新推荐文章于 2024-07-04 12:49:25 发布
最新推荐文章于 2024-07-04 12:49:25 发布
阅读量2.5k 收藏 2
点赞数
文章标签： java vue js 网络 python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/crazymryan/article/details/127116510
版权
本文介绍了如何利用SSE(Server-Sent Events)技术，结合Node.js进行实时构建日志推送。讨论了SSE与其他交互方式的区别，详细阐述了后端和前端的实现过程，包括建立SSE连接、执行打包命令、消息推送等关键步骤。同时，文章还提到了兼容性和相关API的使用。
摘要由CSDN通过智能技术生成

SSE 是什么？

SSE 全称是 Server Sent Event，翻译过来的意思就是 服务器派发事件。

一个网页获取新的数据通常需要发送一个请求到服务器，也就是向服务器请求的页面。

使用 server-sent 事件，服务器可以在任何时刻向我们的 Web 页面推送数据和信息。

这些被推送进来的信息可以在这个页面上作为 Events [0] + data 的形式来处理。

白话篇

SSE 的本质其实就是一个 HTTP 的长连接，只不过它给客户端发送的不是一次性的数据包，而是一个 stream 流，格式为 text/event-stream。

所以客户端不会关闭连接，会一直等着服务器发过来的新的数据流63228564f9f60e5a4e135c7b14b4c64d.png

98ad066d286279459d987e9b6ea69473.png

SSE 与其他交互方式的区别

b1095e4c18ba06166f211c034082fbc3.png
交互示意图

SSE 与 WS 有什么区别？

方式 协议 交互通道 内容编码 重连 事件类型 总结
SSE HTTP 服务端单向推送 默认文本 默认支持断线重连 支持自定义消息类型 轻量级
WebSocket WS（基于 TCP 传输层的应用层协议，RFC6455  [1] 对于它的定义标准） 双向推送 默认二进制 手动实现 NO 扩展性、功能性强大

TCP/IP 五层模型

1884726c7b52e305a2ce19a2fbc006f7.png

SSE 兼容性

API

c06fe8f3db201806049a8d95358c7029.png

f31cad8b41bc0eace45666f10b5898c9.png

40fe2883fde0e771bd6f573ed45c617f.png

23626ec2e71aed7035519822c5863591.png
最低0.47元/天 解锁文章
悲伤日记
关注
simple-sse-nodejs-setup:使用NodeJS的HTTP模块进行简单的SSE设置-服务器+客户端
04-27
简单的sse-nodejs设置 使用NodeJS的HTTP模块进行简单的SSE设置-服务器+客户端+ polyfill 安装 只需克隆/下载软件包即可。 跑步 您需要 在项目运行的文件夹中： npm run start 。 在您喜欢的浏览器中打开client.html文件（不需要Web服务器）。 玩得开心 ：）
EventSource Polyfill 安装和配置指南
最新发布
gitblog_09551的博客
09-13 807
EventSource Polyfill 安装和配置指南 EventSource a polyfill for http://www.w3.org/TR/eventsource/ 项目地址: https://gitcode.com...
SSE-Node:服务器Node.js≥v14.x的完整且极简的服务器发送事件（SSE）
04-17
SSE节点 服务器Node.js≥v14.x的完整且极简的服务器发送事件（SSE） 哪一个 它是实时的，单向的（从服务器到客户端）且持久的系统。 就处理接收到的事件而言，它是一种类似于的连接，更多的是具有自定义事件的可能性。 介面 // Constructor SSE ( server : object , // HTTP(s) Server Object { allowOrigin ?: string | string [ ] | null , // Allowed domains (Default: null) limitByIP ?: number , // IP access limit (Default: 256) path ?: string , // Path using in route (Default: /
前端处理流式数据(SSE服务)
m0_54741495的博客
06-05 2819
用nodejs和vue2实现SSE流式数据传输
使用 Node 和 Koa 的服务器发送事件 (SSE) 流
qq_40074694的博客
09-12 3261
当您希望对 Web 应用程序进行实时更新时，您可以依靠老式的定期轮询或尝试使用一些具有推送功能的现代技术。您的第一个冲动可能是使用WebSockets。但是，如果您只想从服务器接收数据，您可以使用Server Sent Events。 传统上，网页必须向服务器发送请求才能接收新数据；即页面向服务器请求数据。使用server-sent events，服务器可以通过将消息推送到网页来随时向网页发送新数据。这些传入的消息可以被视为网页内的事件+数据。 您可以查看这篇文章以...
Asclepios-SSE-Deployment
03-20
SSE是一种允许服务器向客户端实时推送数据的技术，通常用于构建实时应用，如股票报价、在线聊天或实时数据更新等。在这个项目中，我们看到"Shell"标签，意味着部署过程可能通过Shell脚本进行自动化。 在Asclepios-...
FlightScheduler:示例 node.js 应用程序
06-21
考虑到航班状态可能频繁变动，FlightScheduler可能利用WebSocket或者Server-Sent Events (SSE)技术实现服务器向客户端的实时推送，保持航班状态的即时更新。 7. **错误处理与日志**： 为了确保系统的稳定性和可...
使用Express实现实时数据推送：Integrating WebSockets and Server-Sent Events
# 1. 简介 ## 1.1 什么是实时数据推送？...WebSockets允许客户端和服务器之间建立持久的双向通信通道，而SSE则是基于HTTP协议的一种轻量级的实时推送技术。它们各自具有一定的优势和适用场景。 ##
sse-server:这是一个简单的node.js sse服务器
03-26
sse服务器 这是一个简单的node.js sse服务器
node-sse-pubsub:服务器为NodeJS发送事件
05-17
NodeJS的服务器发送事件 一个简单的NodeJS模块，用于生成具有发布/订阅接口的Server-Sent-Events流，并与Node的内置HTTP库或公开它的任何框架进行简单集成。 。 用法 如果要使用Express，请使用npm i sse-pubsub安装： const express = require ( 'express' ) ; const SSEChannel = require ( 'sse-pubsub' ) ; const app = express ( ) ; const channel = new SSEChannel ( ) ; // Say hello every second setInterval ( ( ) => channel . publish ( "Hello everyone!" , 'myEvent' ) , 1000 ) ; app
koa-sse：koa sse（服务器端事件）中间件
02-18
koa-sse流 koa sse（服务器端事件）中间件，使用流编程模型 安装 npm install-保存koa-sse-stream 用法 const Koa = require ( 'koa' ) ; const compress = require ( 'koa-compress' ) ; const sse = require ( 'koa-sse-stream' ) ; const app = new Koa ( ) ; // !!attention : if you use compress, sse must use after compress app . use ( compress ( ) ) /** * koa sse middleware * @param { Object } opts * @param { Number } opts.maxClients
sse+nodejs+vue+electron+element+video.js
zsq199771的博客
04-16 489
前端互相控制 sse + nodejs 两个服务，一个长连接对内 前端部分 sse(){ this.source = new EventSource(“http://192.168.22.234:8088/sse”); this.source.addEventListener( “open”, function () { console.log(“建立连接”); }, false ); this.source.addEventListener( “connecttime”, function (e) { c
基于nodejs实现text/event-stream简单应用案例，SSE
ta_huang的博客
06-08 3424
使用 text/event-stream，服务器可以实现与客户端的实时双向通信，通过推送事件来传递实时数据和状态变化。它与其他实时通信技术（如 WebSocket）相比，更适合于单向的服务器向客户端的通信场景，不支持客户端向服务器发送消息。它提供了一种简单的方式来实现服务器推送的功能，且在浏览器端的兼容性较好。是一种用于服务器向客户端推送事件的媒体类型（Media Type）。它是基于 HTTP 协议的一种流式传输技术，也被称为 Server-Sent Events（SSE）
WEB通讯技术。前端实现SSE长连接，nodejs+express搭建简单服务器，进行接口调试，通过curl请求数据
阿牛哥的博客
04-21 9970
WEB通讯技术。前端实现SSE长连接，nodejs+express搭建简单服务器，进行接口调试，通过curl请求数据
Nodejs 实现长链接，SSE， 服务端代码
weixin_34202952的博客
12-06 1221
2019独角兽企业重金招聘Python工程师标准>>> ...
nodejs + vue3 模拟 fetchEventSouce进行sse流式请求
IT博客技术分享
07-04 1434
在GPT爆发的时候，各项目都想给自己的产品加上AI，蹭上AI的风口，因此在最近的一个需求，就想要给项目加入Ai的功能，原本要求的效果是，查询到对应的数据后，完全展示出来，也就是常规的post请求，后来这种效果遇到了一个很现实的问题：长时间的等待。我们需要在GPT返回全部数据后，前端才能接受并展示，一旦询问的时间过长，就会让用户等待很久，这时候我们需要将前端的展示效果改为想ChatGPT那样的打字机效果。
Node+SSE 实现大屏可视化数据实时更新
hahayua的博客
03-27 776
sse 大屏可视化数据实时更新
【nodejs】不用WebSocket模拟即时通讯的几种方式（Comet与SSE）
不忘初心，坚定道路！
12-11 1098
背景 最近学了websocket，感觉很有趣，特别是不用websocket也能模拟出即时通讯效果的骚操作非常牛b。 Comet 这个Comet翻译成中文叫服务器推技术。 传统模式是客户端发请求，服务端返回就结束了，但这明显不能满足即时报价，即时通讯之类需求。 而comet技术解决这个痛点一般采用2种方式： 1、在浏览器端安装插件，基于套接口传送信息，或是使用 RMI、CORBA 进行远程调用...
nestjs使用sse
05-15
NestJS是一个用于构建高效、可扩展的Node.js服务器端应用程序的开发框架。它提供了一组强大的工具和模块，使得开发者可以快速构建可维护、可测试的应用程序。 在NestJS中，使用SSE（Server-Sent Events）来实现服务器向客户端推送事件。SSE是一种基于HTTP的轻量级协议，允许服务器向客户端推送事件，而无需客户端发送请求。 在NestJS中使用SSE非常简单，只需要在控制器中返回一个EventSource对象即可，如下所示： ``` import { Controller, Get } from '@nestjs/common'; @Controller() export class AppController { @Get('events') events(): any { const eventSource = new EventSource('/stream'); return { eventSource }; } } ``` 上面的代码创建了一个/events路由，当客户端访问该路由时，将返回一个包含EventSource对象的响应。客户端可以使用EventSource对象来监听服务器推送的事件。 接下来，我们需要创建一个/stream路由，用于向客户端推送事件。可以使用NestJS提供的@EventPattern装饰器来实现该功能，如下所示： ``` import { Controller, Get } from '@nestjs/common'; import { EventPattern } from '@nestjs/microservices'; @Controller() export class AppController { @Get('events') events(): any { const eventSource = new EventSource('/stream'); return { eventSource }; } @EventPattern('newMessage') async handleNewMessage(data: any) { const message = JSON.stringify(data); const event = `data: ${message}\n\n`; eventSource.write(event); } } ``` 上面的代码中，@EventPattern('newMessage')装饰器表示该方法会处理名为newMessage的事件。在handleNewMessage方法中，我们将接收到的数据转换为字符串，并通过eventSource对象向客户端推送事件。 相关问题： 1. SSE和WebSocket有什么区别？ 2. 在NestJS中如何处理WebSocket连接？ 3. 如何在NestJS中处理异步事件？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值