随着互联网的发展，越来越多的网站需要实时更新数据，而传统的轮询方式会给服务器带来很大的负担，同时也会影响用户体验。为了解决这个问题，出现了一些服务端推送技术，其中最常用的是 WebSocket 和 Server-Sent Events（SSE）。本文将介绍这两种技术的原理、用法和应用场景，并提供一些示例代码。
WebSocket
WebSocket 是一种基于 TCP 的协议，可以在客户端和服务端之间建立持久连接，实现双向通信。相比传统的 HTTP 连接，WebSocket 更加高效，可以实时推送数据，而不需要客户端不断地发送请求。
原理
WebSocket 协议的握手过程和 HTTP 协议类似，但是在握手成功后，客户端和服务端之间就可以进行双向通信，而不需要重新建立连接。WebSocket 通过在客户端和服务端之间建立一个长连接，实现了实时推送数据的功能。
用法
在客户端，我们可以使用 JavaScript 中的 WebSocket 对象来创建 WebSocket 连接：
const ws = new WebSocket('ws://example.com');在服务端，我们需要使用一些库来实现 WebSocket 功能，比如 Node.js 中的 ws 库：
// javascriptcn.com 代码示例
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('Client connected');
ws.on('message', (message) => {
console.log(`Received message: ${message}`);
ws.send(`You sent: ${message}`);
});
ws.send('Hello, client!');
});这段代码创建了一个 WebSocket 服务器，监听在 8080 端口上。当有客户端连接时，服务器会打印出 "Client connected"，并向客户端发送一条消息 "Hello, client!"。当客户端发送消息时，服务器会打印出 "Received message: "，并将消息原样发送回客户端。
应用场景
WebSocket 可以用于实时通信、实时游戏、在线编辑器等需要实时更新数据的场景。
Server-Sent Events
Server-Sent Events（SSE）是一种基于 HTTP 的协议，可以在客户端和服务端之间建立单向连接，实现服务器向客户端推送数据。相比 WebSocket，SSE 更加简单，可以在不支持 WebSocket 的浏览器上使用。
原理
SSE 协议通过在客户端和服务端之间建立一个长连接，实现服务器向客户端推送数据的功能。客户端通过监听一个特定的 URL，服务端会不断地向该 URL 发送数据，直到连接被关闭。
用法
在客户端，我们可以使用 JavaScript 中的 EventSource 对象来监听 SSE 连接：
const source = new EventSource('/stream');
source.addEventListener('message', (event) => {
console.log(`Received message: ${event.data}`);
});在服务端，我们需要使用一些库来实现 SSE 功能，比如 Node.js 中的 sse-express 库：
// javascriptcn.com 代码示例
const express = require('express');
const sseExpress = require('sse-express');
const app = express();
app.get('/stream', sseExpress(), (req, res) => {
console.log('Client connected');
res.sse('Hello, client!');
setInterval(() => {
res.sse(new Date().toString());
}, 1000);
});
app.listen(8080, () => {
console.log('Server started');
});这段代码创建了一个 SSE 服务器，监听在 8080 端口上。当有客户端连接时，服务器会打印出 "Client connected"，并向客户端发送一条消息 "Hello, client!"。之后，服务器会每秒向客户端发送一条消息，内容为当前时间的字符串表示。
应用场景
SSE 可以用于实时更新数据、实时通知、实时日志等需要单向推送数据的场景。
总结
WebSocket 和 SSE 都是服务端推送技术，可以用于实时更新数据。WebSocket 更加高效，可以实现双向通信，但需要浏览器支持；SSE 更加简单，可以在不支持 WebSocket 的浏览器上使用。在实际应用中，我们可以根据需要选择合适的技术，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657d50ded2f5e1655d820e53