Socket.io 是一个基于 Node.js 的实时通信库，它可以在服务端和客户端之间建立实时、双向的通信通道。在前端开发中，实时通信是一个常见的需求，例如在线聊天、即时通知等。本文将介绍如何在 Express 中使用 Socket.io 实现实时通信，并提供示例代码和学习指导。
安装 Socket.io
首先，需要安装 Socket.io。可以通过 npm 进行安装：
npm install socket.io
在 Express 中使用 Socket.io
在 Express 中使用 Socket.io 需要进行以下步骤：
- 在服务端创建 Socket.io 实例，并监听连接事件。
- 在客户端引入 Socket.io 客户端库，并连接服务端。
- 在服务端和客户端之间建立通信通道，进行实时通信。
1. 在服务端创建 Socket.io 实例
在 Express 中创建 Socket.io 实例需要使用 http 模块。可以在 Express 应用程序中使用 http 模块创建一个服务器实例，并将其传递给 Socket.io 的构造函数。
// javascriptcn.com 代码示例
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
io.on('connection', (socket) => {
console.log('a user connected');
});在上面的示例中，我们使用 Express 创建了一个应用程序。然后，使用 http 模块创建了一个服务器实例，并将其传递给 Socket.io 的构造函数，创建了一个 Socket.io 实例。最后，使用 io.on('connection', ...) 监听连接事件，当有客户端连接时，会触发回调函数。
2. 在客户端引入 Socket.io 客户端库
在客户端中，需要引入 Socket.io 客户端库，并连接服务端。可以通过以下方式引入 Socket.io 客户端库：
<script src="/socket.io/socket.io.js"></script>
然后，可以使用以下代码连接服务端：
const socket = io();
3. 在服务端和客户端之间建立通信通道
在服务端和客户端之间建立通信通道需要使用 Socket.io 提供的 API。服务端和客户端都可以使用 socket.emit() 方法向对方发送消息，使用 socket.on() 方法监听消息。
以下是一个示例代码，实现了一个在线聊天室的功能：
// javascriptcn.com 代码示例
// 服务端
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');
});
});
// 客户端
const socket = io();
const form = document.querySelector('form');
const input = document.querySelector('#message');
const messages = document.querySelector('#messages');
form.addEventListener('submit', (event) => {
event.preventDefault();
socket.emit('chat message', input.value);
input.value = '';
});
socket.on('chat message', (msg) => {
const li = document.createElement('li');
li.textContent = msg;
messages.appendChild(li);
});在上面的示例中，服务端监听了客户端发送的消息，当接收到 chat message 事件时，将消息广播给所有客户端。客户端监听了 chat message 事件，当接收到消息时，将消息添加到聊天记录中。
总结
在 Express 中使用 Socket.io 实现实时通信需要进行以下步骤：
- 在服务端创建 Socket.io 实例，并监听连接事件。
- 在客户端引入 Socket.io 客户端库，并连接服务端。
- 在服务端和客户端之间建立通信通道，进行实时通信。
Socket.io 提供了丰富的 API，可以实现多种实时通信场景。本文提供的示例代码可以作为学习和参考。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65685009d2f5e1655d118924