在 Web 应用程序中，实时更新和通信是非常重要的功能之一。本文将介绍如何使用 Socket.io 和 Server-Sent Events（SSE）来实现实时通信，并给出相应代码示例供大家参考。
Socket.io
Socket.io 是一个实时通信库，它允许浏览器和服务器之间建立实时、双向的通信。它支持多种实时传输方式，包括 WebSocket、Flash Socket、Ajax Polling 等。下面我们将介绍如何使用 Socket.io 来实现实时通信：
1. 安装 Socket.io
使用 npm 安装 Socket.io：
npm install socket.io
2. 创建 Socket.io 服务器
在服务器端创建 Socket.io 服务器，示例代码如下：
// javascriptcn.com 代码示例
const app = require('http').createServer();
const io = require('socket.io')(app);
app.listen(3000);
io.on('connection', socket => {
console.log('a user connected');
socket.on('chat message', msg => {
console.log('message: ' + msg);
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('user disconnected');
});
});这个示例代码创建了一个基本的 Socket.io 服务器，并监听连接、消息和断开连接事件。当有用户连接时，服务器会输出 'a user connected'，当用户发送消息时，服务器会输出消息内容，并使用 io.emit 将消息发送给所有客户端。
3. 创建 Socket.io 客户端
在客户端创建 Socket.io 客户端，示例代码如下：
// javascriptcn.com 代码示例
const socket = io();
$('form').submit(e => {
e.preventDefault();
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', msg => {
$('#messages').append($('<li>').text(msg));
});这个示例代码创建了一个基本的 Socket.io 客户端，并监听所连接的服务器的 'chat message' 事件。当客户端发送消息时，客户端会将输入框的值发送给服务器，并清空输入框。当客户端收到服务器发送的消息时，客户端会将消息添加到页面上。
Server-Sent Events
Server-Sent Events（SSE）是一种服务器推送数据到客户端的技术，它允许服务器向客户端发送自动更新的事件流。它使用标准的 HTTP 协议，所以它是一个轻量级、高效率的技术。下面我们将介绍如何使用 SSE 来实现实时通信：
1. 创建 SSE 服务器
在服务器端创建 SSE 服务器，示例代码如下：
// 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 timestamp = new Date().toLocaleTimeString();
res.write('data: ' + timestamp + '\n\n');
}, 1000);
}).listen(3000);这个示例代码创建了一个基本的 SSE 服务器，并每秒钟向客户端发送一个时间戳。
2. 创建 SSE 客户端
在客户端创建 SSE 客户端，示例代码如下：
const evtSource = new EventSource('/sse');
evtSource.onmessage = evt => {
$('#messages').append($('<li>').text(evt.data));
};这个示例代码创建了一个基本的 SSE 客户端，并监听服务器发送的 'message' 事件。当客户端接收到服务器发送的消息时，客户端会将消息添加到页面上。
总结
本文介绍了如何使用 Socket.io 和 Server-Sent Events 来实现实时 Web 应用程序，并给出相应的代码示例供大家参考。Socket.io 是一个强大且功能丰富的库，支持多种实时传输方式，并可以轻松地实现双向通信。SSE 是一种轻量级的技术，它使用标准的 HTTP 协议，所以它具有更广泛的兼容性和可靠性。使用这两种技术都可以帮助我们实现更加实时、高效的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/651d656295b1f8cacd4f8d40