在本文中，我们将深入探讨如何使用Node.js和WebSocket构建一个简单的聊天应用。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许开发者在服务器端使用JavaScript进行编程。WebSocket则是一种在客户端和服务器之间建立持久连接的协议，使得双向通信成为可能，非常适合实时交互的应用，如在线聊天。
我们需要安装Node.js环境，这将提供运行JavaScript脚本的基础。安装完成后，创建一个新的项目目录，并通过`npm init`初始化一个新的Node.js项目。这会生成一个`package.json`文件，用来管理项目依赖。
接着，我们要安装WebSocket库。Node.js社区有许多WebSocket实现，但最常用的是`ws`库。使用以下命令安装：
```bash
npm install ws
```
在项目中创建一个名为`server.js`的文件，这是我们的服务器端代码。我们将导入`ws`库，并创建一个WebSocket服务器：
```javascript
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}`);
// 广播消息到所有连接的客户端
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', () => {
console.log('Client disconnected');
});
});
```
这个服务器会在8080端口监听WebSocket连接。当有新的客户端连接时，会打印出“Client connected”。当收到客户端发送的消息时，它会广播该消息给所有已连接的客户端。当客户端断开连接时，会显示“Client disconnected”。
在客户端，我们可以使用HTML和JavaScript来实现用户界面。创建一个`index.html`文件，用于展示聊天界面：
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>WebSocket Chat</title>
</head>
<body>
<input type="text" id="messageInput">
<button onclick="sendMessage()">发送</button>
<ul id="chatLog"></ul>
<script>
const socket = new WebSocket('ws://localhost:8080');
socket.addEventListener('open', (event) => {
console.log('Connected to server');
});
socket.addEventListener('message', (event) => {
const chatLog = document.getElementById('chatLog');
const li = document.createElement('li');
li.textContent = event.data;
chatLog.appendChild(li);
});
function sendMessage() {
const input = document.getElementById('messageInput');
const message = input.value;
if (message.trim()) {
socket.send(message);
input.value = '';
}
}
</script>
</body>
</html>
```
这个HTML页面包含一个输入框、一个发送按钮和一个聊天记录列表。JavaScript部分创建了一个WebSocket连接到服务器，并监听`open`、`message`事件。当用户点击发送按钮时，会将输入框中的文本发送给服务器，然后清空输入框。
我们需要一个本地服务器来托管这个静态HTML文件，以便在浏览器中访问。可以使用`http-server`这样的轻量级HTTP服务器，或者Node.js的`http`模块来快速搭建。启动服务器后，打开浏览器访问指定URL，就可以看到聊天应用了。
通过这个简单的例子，我们了解了如何使用Node.js和WebSocket创建一个实时聊天应用。Node.js负责处理服务器端逻辑，WebSocket提供低延迟、双向通信的通道。结合HTML和JavaScript，我们构建了客户端界面并实现了与服务器的交互。这个基础可以进一步扩展，例如添加用户认证、聊天室功能等，以满足更复杂的需求。
