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

原文地址：https://blog.csdn.net/weixin_44646763/article/details/143677905

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！