WebSocket 集成
概述
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它允许服务器主动向客户端推送数据，而不需要客户端发起请求。这种实时通信能力使得 WebSocket 在实时聊天、在线游戏、股票行情等应用中非常有用。
在本教程中，我们将学习如何在 Express.js 应用中集成 WebSocket，并创建一个简单的实时聊天应用。
1. WebSocket 基础
1.1 WebSocket 协议
WebSocket 协议通过 HTTP 握手建立连接，然后切换到 WebSocket 协议进行通信。WebSocket 连接是持久化的，这意味着一旦建立连接，服务器和客户端可以随时发送数据，而不需要重新建立连接。
1.2 WebSocket 与 HTTP 的区别
- HTTP: 请求-响应模式，客户端发起请求，服务器响应。
- WebSocket: 全双工通信，服务器和客户端可以随时发送数据。
2. 环境准备
在开始之前，确保你已经安装了 Node.js 和 npm。如果没有安装，可以从 Node.js 官网 下载并安装。
2.1 创建项目目录
mkdir express-websocket-chat
cd express-websocket-chat
2.2 初始化项目
npm init -y
2.3 安装依赖
我们将使用 express 和 socket.io 来实现 WebSocket 功能。
npm install express socket.io
3. 创建 Express 应用
3.1 创建 app.js 文件
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);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('A user connected');
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
server.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
3.2 创建 index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-time Chat</title>
</head>
<body>
<ul id="messages"></ul>
<form id="chat-form">
<input id="message-input" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const form = document.getElementById('chat-form');
const input = document.getElementById('message-input');
const messages = document.getElementById('messages');
form.addEventListener('submit', (e) => {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
socket.on('chat message', (msg) => {
const item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</body>
</html>
4. 运行应用
在终端中运行以下命令启动服务器：
node app.js
打开浏览器，访问 http://localhost:3000，你将看到一个简单的聊天界面。在不同的浏览器窗口中打开该页面，尝试发送消息，你会看到消息实时显示在所有连接的客户端上。
5. 代码解析
5.1 Express 服务器
- 我们使用
express创建了一个简单的 HTTP 服务器。 socket.io库被用来处理 WebSocket 连接。
5.2 WebSocket 事件
io.on('connection', ...): 当客户端连接时触发。socket.on('chat message', ...): 当客户端发送消息时触发。io.emit('chat message', msg): 将消息广播给所有连接的客户端。
5.3 前端代码
socket.emit('chat message', input.value): 发送消息到服务器。socket.on('chat message', (msg) => {...}): 接收服务器广播的消息并显示在页面上。
6. 实践练习
6.1 扩展功能
- 用户名: 为每个用户分配一个唯一的用户名，并在消息中显示。
- 消息时间戳: 在每条消息旁边显示发送时间。
- 消息存储: 将消息存储在服务器端，并在新用户连接时发送历史消息。
6.2 挑战
- 私聊: 实现用户之间的私聊功能。
- 消息类型: 区分不同类型的消息（如系统消息、用户消息）。
7. 总结
通过本教程，我们学习了如何在 Express.js 应用中集成 WebSocket，并创建了一个简单的实时聊天应用。WebSocket 的实时通信能力为构建实时应用提供了强大的支持。希望你能通过实践练习进一步掌握 WebSocket 的使用。
8. 参考资料
通过本教程，你应该已经掌握了 WebSocket 的基本概念和在 Express.js 中的集成方法。继续探索和实践，你将能够构建更复杂的实时应用。