当前位置：首页 > article >正文

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

article 2024/12/27 12:26:12

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

查看全文

http://www.kler.cn/a/393276.html