Express 与 vue3 使用 sse 实现消息推送(长连接)
SSE(Server-Sent Events)
是一种 HTML5 新增的传输格式,可以在客户端和服务器之间实现长连接。与 WebSocket
不同,SSE
仅支持服务器向客户端的单向通信。
# 服务器端
在后端服务器上,需要确保SSE连接的正确处理。以下是一个简单的Node.js
示例,展示了如何实现SSE:
import express from 'express';
import cors from 'cors';
const app = express();
app.use(cors());
app.post('/ask', (req, res) => {
// 设置 SSE 相关的响应头
res.set({
"Content-Type": "text/event-stream",
"Cache-Control": "no-cache",
Connection: "keep-alive",
});
res.flushHeaders();
// // 或者
// res.setHeader('Content-Type', 'text/event-stream');
// res.setHeader('Cache-Control', 'no-cache');
// res.setHeader('Connection', 'keep-alive');
setInterval(() => {
res.write("data: " + 'part.message.content' + "\n\n");
console.log(123);
}, 1000)
req.on('close', () => {
res.end(); // 结束HTTP响应
});
});
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# 客户端配置
import { fetchEventSource } from '@microsoft/fetch-event-source'
const ctrl = new AbortController()
fetchEventSource(`/ask`, {
method: 'POST',
headers: {
'Content-Type': 'text/event-stream',
"Accept": 'text/event-stream',
// authorization: userStore.access_token,
},
signal: ctrl.signal,
openWhenHidden: true,
// body: formData,
onmessage(event) {
console.log('返回结果:' + event.data)
// 处理数据
if (event.data == 'DONE') { } else { }
},
onopen(response) {
console.log(response.body)
},
onerror(event) {
// 处理错误
console.error(event)
},
onclose() {
console.log('eventSource close')
}
})
ctrl.abort(); //关闭链接
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# Nginx 配置
server {
listen 80;
listen [::]:80;
server_name xxxxxxx.com;
underscores_in_headers on;
location / {
proxy_pass http://127.0.0.1:8080;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_set_header Host $host;
proxy_read_timeout 86400s;
proxy_cache off;
proxy_buffering off;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
上次更新: 2024/12/23, 21:39:55
- 01
- linux 在没有 sudo 权限下安装 Ollama 框架12-23
- 03
- JS 中 Promise 用法(简要总结)12-05