在现代互联网世界中，实时通信变得越来越重要。使用传统的HTTP请求-响应模型，我们无法实现即时通信。为了解决这个问题，WebSockets 协议被引入，它允许建立持久的双向通信通道。
WebSockets 是什么？
WebSockets 是一种在单个 TCP 连接上进行全双工通信的协议。它允许服务器主动向客户端推送消息，而不需要客户端发起请求。与传统的HTTP请求-响应模型不同，WebSockets 提供了更快、更实时的通信机制。
构建实时聊天应用程序
下面我们将使用 WebSockets 来构建一个简单的实时聊天应用程序。我们将使用 Node.js 作为服务器，Express.js 作为 Web 框架，以及 Socket.IO 库来实现 WebSockets 功能。
步骤一：安装依赖
首先，确保已经安装了 Node.js，并使用以下命令创建一个新的项目并切换到该目录。
mkdir realtime-chat-app
cd realtime-chat-app
然后通过运行以下命令来安装所需的依赖项。
npm install express socket.io
步骤二：创建服务器
在项目目录中创建一个新文件 server.js。打开该文件并添加以下代码。
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('A user connected');
socket.on('disconnect', () => {
console.log('A user disconnected');
});
socket.on('chat message', (msg) => {
console.log('Message: ' + msg);
io.emit('chat message', msg);
});
});
http.listen(3000, () => {
console.log('Server listening on http://localhost:3000');
});
上述代码创建了一个基本的服务器，监听在端口 3000 上。当用户访问根目录时，将返回一个简单的 HTML 文件。当有新的 WebSocket 连接建立时，服务器将输出一条消息，并在客户端发送消息时将其广播给所有连接的客户端。
步骤三：创建客户端
在项目目录中创建一个新文件 index.html。打开该文件并添加以下代码。
<!DOCTYPE html>
<html>
<head>
<title>Realtime Chat</title>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
socket.on('chat message', function(msg) {
var li = document.createElement('li');
li.textContent = msg;
document.getElementById('messages').appendChild(li);
});
function sendMessage() {
var input = document.getElementById('message-input');
var message = input.value;
input.value = '';
socket.emit('chat message', message);
}
</script>
</head>
<body>
<h1>Realtime Chat</h1>
<ul id="messages"></ul>
<input type="text" id="message-input" />
<button onclick="sendMessage()">Send</button>
</body>
</html>
上述代码创建了一个简单的聊天界面，当用户在输入框内输入消息并点击发送按钮时，消息将通过 WebSockets 发送到服务器，并在接收到服务器响应时将其添加到消息列表中。
步骤四：启动服务器
最后，通过执行以下命令启动服务器。
node server.js
现在，您可以在浏览器中访问 http://localhost:3000，并尝试与其他打开了相同页面的用户进行实时聊天。
总结
在本博客中，我们了解了 WebSockets 协议以及它在实时通信中的应用。我们通过使用 Node.js、Express.js 和 Socket.IO 库构建了一个简单的实时聊天应用程序。您可以在此基础上扩展应用程序，添加更多功能和改进用户体验。
本文来自极简博客，作者：火焰舞者，转载请注明原文链接：构建基于WebSockets的实时聊天应用程序
