随着 Web 应用的发展，实时通信已经成为了一个必不可少的功能。而 Server-sent Events 和 WebSocket 就是两种常见的实现方式。本文将对它们进行详细的比较，探讨它们的优缺点以及使用场景。
Server-sent Events
Server-sent Events 是一种基于 HTTP 协议的实时通信技术。它使用一个持久化的 HTTP 连接，将服务器端的事件推送到客户端。客户端通过 EventSource API 来接收这些事件，并对其进行处理。
优点
- 简单易用：在客户端，只需使用 EventSource API 即可接收服务器端的事件。在服务器端，只需将数据格式化为纯文本，然后通过 HTTP 连接发送即可。
- 兼容性好：由于是基于 HTTP 协议的，所以可以在几乎所有的浏览器上运行。
- 可以自定义重连机制：当连接断开时，可以通过 JavaScript 代码来自定义重连机制。
缺点
- 只能从服务器端向客户端推送数据：无法实现双向通信。
- 不支持二进制数据传输：只能传输文本数据。
- 无法自定义 HTTP 请求头：无法设置自定义的请求头，比如 Authorization。
使用场景
- 需要向客户端推送实时数据，比如股票行情、天气预报等。
- 不需要双向通信的场景。
示例代码
// javascriptcn.com 代码示例
// 服务端代码
const http = require('http')
http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
})
setInterval(() => {
const data = new Date().toLocaleTimeString()
res.write(`data: ${data}\n\n`)
}, 1000)
}).listen(3000)
// 客户端代码
const eventSource = new EventSource('/sse')
eventSource.addEventListener('message', (event) => {
console.log(event.data)
})WebSocket
WebSocket 是一种基于 TCP 协议的实时通信技术。它使用一个持久化的双向通信通道，可以实现客户端和服务器端之间的实时通信。
优点
- 支持双向通信：客户端和服务器端可以同时向对方发送数据。
- 支持二进制数据传输：可以传输文本和二进制数据。
- 可以自定义 HTTP 请求头：可以设置自定义的请求头，比如 Authorization。
缺点
- 实现复杂：需要自己实现协议，包括握手、心跳等机制。
- 兼容性差：在一些旧版本的浏览器中不支持 WebSocket。
使用场景
- 需要实现双向通信的场景，比如聊天室、在线游戏等。
- 需要传输二进制数据的场景。
示例代码
// javascriptcn.com 代码示例
// 服务端代码
const WebSocket = require('ws')
const wss = new WebSocket.Server({ port: 3000 })
wss.on('connection', (ws) => {
ws.on('message', (message) => {
console.log(`Received message: ${message}`)
ws.send(`You sent: ${message}`)
})
})
// 客户端代码
const ws = new WebSocket('ws://localhost:3000')
ws.on('open', () => {
console.log('WebSocket is open')
ws.send('Hello, WebSocket')
})
ws.on('message', (message) => {
console.log(`Received message: ${message}`)
})总结
Server-sent Events 和 WebSocket 都是实现实时通信的有效方式，它们各有优缺点，需要根据具体的场景来选择。如果只需要向客户端推送实时数据，可以选择 Server-sent Events；如果需要实现双向通信或传输二进制数据，可以选择 WebSocket。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65571134d2f5e1655d17b412