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建立连接后只能由服务器向客户端发送实时数据