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的形式。
结语
❤️ 🧡 💛大家喜爱我写的文章的话，欢送大家点点关注、点赞、珍藏和转载！！
欢送关注公众号前端开心果 🔥我会继续更新前端相干的内容文章哦。
发表回复