乐趣区

关于前端:服务器发送事件Serversent-events详解与示例

jiezi

Server-sent events

服务端进行数据推送除了 WebSocket 之外，还能够应用 Server-Send-Event 计划。

与 WebSocket不同的是，服务器发送事件是单向的。数据音讯只能从服务端到发送到客户端（如用户的浏览器）。这使其成为不须要从客户端往服务器发送音讯的状况下的最佳抉择。

Server-Sent-Events（SSE）是一种 HTML5 API，用于在服务器和客户端之间实时推送数据流。SSE 能够用于实现实时告诉、实时聊天、实时数据更新和实时监控等性能。

服务器发送事件 API 蕴含在 EventSource 接口中

EventSource

EventSource 接口是 web 内容与服务器发送事件通信的接口。

一个 EventSource 实例会对 HTTP 服务器开启一个长久化的连贯，以 text/event-stream 格局发送事件，此连贯会始终放弃开启直到通过调用 EventSource.close() 敞开。

创立一个 EventSource 实例

创立一个 EventSource 对象，开启与服务器的连贯并接管事件

const evtSource = new EventSource("ssedemourl")

如果生成事件的代码不同源，须要创立一个新的蕴含 url 和 options 参数的 EventSource 对象

const evtSource = new EventSource("//api.example.com/ssedemourl", {withCredentials: true,})

事件流格局

事件流是一个简略的文本数据流，文本应该应用 UTF-8格局的编码。事件流中的音讯由一对换行符离开。以冒号结尾的行为正文行，会被疏忽。

每个字段由字段名示意，前面是冒号，而后是该字段值的文本数据。

字段有以下几个

  • event

    用于标识事件类型的字符串。如果指定了这个字符串，浏览器会将具备指定事件名称的事件分派给相应的监听器；客户端应该应用 addEventListener() 来监听指定的事件。如果一个音讯没有指定事件名称，那么能够调用onmessage 处理程序。

  • data

    音讯的数据字段。当 EventSource 接管到多个以 data: 结尾的间断行时，会将它们连接起来，在它们之间插入一个换行符。开端的换行符会被删除。

  • id

    事件 ID，会成为以后 EventSource 对象的外部属性“最初一个事件 ID”的属性值。

  • retry

    从新连贯的工夫。如果与服务器的连贯失落，浏览器将期待指定的工夫，而后尝试从新连贯。这必须是一个整数，以毫秒为单位指定从新连贯的工夫。如果指定了一个非整数值，该字段将被疏忽。

所有其余的字段名都会被疏忽。

示例：

纯数据messagee

data: some text

命名事件

event:usermessage
data: {"username": "bobby", "age": "22"}

混合事件，在一个事件流中同时应用命名事件和未命名事件

data: some text

event:usermessage
data: {"username": "bobby", "age": "22"}

监听 open 事件

EventSource接口的 onopen 属性是一个事件处理器，它在收到 open 事件时被调用，在那时，连贯刚被关上。

evtSource.onopen = function () {console.log("Connection to server opened.");
}

监听 message 事件

如果服务器发送的音讯中没有定义 event 字段，这些音讯则都为 message 事件，要接管从服务端发送过去的 message 事件，须要为 message 事件增加事件处理程序

前端局部代码：

evtSource.onmessage = (event) => {console.log(event.data)
}
// onmessage 的等价写法
evtSource.addEventListener('message', (event) => {console.log(event.data)
});

服务端局部示例代码：

stream.write(`data: ${song[index]}\n\n`)

监听 event 字段中的自定义事件

如果服务器发送的音讯中定义了 event 字段，以 event 中给定的名称来接管事件

前端局部代码：

evtSource.addEventListener('custom', (e) => {console.log(.data)
})

服务端局部示例代码：

stream.write(`event: custom\ndata: ${song[index]}\n\n`) // 此处定义了 event 字段，名称为 custom

处理错误事件

当发送网络超时或其余问题时，会生成一个谬误事件。在事件源连贯未能关上时触发

evtSource.onerror = (err) => {console.error("EventSource failed:", err);
}

敞开 EventSource 事件

默认状况下，如果客户端和服务器之间的连贯敞开，则 SSE 连贯会重新启动，能够在前端的事件上调用 close() 办法终止连贯。

evtSource.close()

从服务端发送事件示例

发送事件的服务端脚本须要应用text/event-streamMIME 类型响应类型。每个告诉以文本块模式发送，并以一对换行符结尾。

Node.js 中应用 koa2 演示 SSE 连贯，服务端示例代码

const router = require('koa-router')()
const {PassThrough} = require('stream')
 
// 测试 EventSource
router.get('/eventSource', async (ctx, next) => {
  try {const stream = new PassThrough()
    ctx.set({'Content-Type':'text/event-stream'})
    // 将歌词变成一个数组
    let song = [
      '我', '懒', '得', '写', '你', '谷', '搜', '到', '处', '皆', '只', '因', '你', 
      '太', '美', '浅', '唱', '动', '人', '说', '不', '出', '我', '试', '着', 'end', 
    ]
    let index = 0;
    setInterval(() => {const str = song[index];
      if (str) {
        // 形式 1：格局是 data: xxx\n\n，事件要一对 \n 完结
        // stream.write(`data: ${song[index]}\n\n`)
        // 形式 2, 定义了 event 字段，自定义事件
        stream.write(`event: custom\ndata: ${song[index]}\n\n`)
        // 发送的数据为 json 字符串
        // stream.write(`event: custom\ndata: {"name": "${song[index]}"}\n\n`)
      } else {stream.write('0')
      }
      index++
    }, 500)

    ctx.body = stream
  } catch (error) {
    error.status = error.status ? error.status : 500
    ctx.throw(error.status, error)
  }
})

客户端接管示例

前端应用的vue3

const getSSE = () => {const source = new EventSource(`http://localhost:8081/api/eventSource`);
  let str = ''source.onopen = () => console.log("Connected");
  source.onerror = console.error;

  // 形式 1：监听 message 事件
  // source.onmessage = (e) => {//   if (e.data === 'end') {
  //     // 断定 end，敞开连贯
  //     source.close()
  //   }
  //   str += e.data
  //   console.log(str)
  // }

  // 形式 2，监听自定义 custom 事件
  source.addEventListener('custom', (e) => {
    str += e.data
    // str += JSON.parse(e.data).name // 接管 json 字符串
    console.log(str)
  })
}
getSSE()

成果演示

当初很火的 ChatGPT 在答复中的打字成果就是应用了 SSE 的形式。

结语

❤️ 🧡 💛大家喜爱我写的文章的话，欢送大家点点关注、点赞、珍藏和转载！！

欢送关注公众号 前端开心果 🔥我会继续更新前端相干的内容文章哦。

退出移动版