实时聊天应用已经成为现代社交交流的主流方式之一。它不仅可以帮助人们进行快速有效的沟通，还可以提供更好的用户体验。在这篇博客中，我们将介绍如何使用WebSocket和Node.js搭建一个简单的聊天应用，并且可以实时同步用户之间的消息。
技术要求
在开始之前，确保你已经安装好了以下几个工具和技术：
- Node.js：我们将使用Node.js作为后端开发语言。
- Express.js：一个基于Node.js的网络应用框架。
- WebSocket：用于实现实时通信的协议。
- HTML、CSS和JavaScript：用于构建前端界面。
项目准备
首先，我们创建一个新的项目目录并初始化一个新的Node.js应用程序。在命令行中执行以下命令：
mkdir chat-app
cd chat-app
npm init -y
然后，我们安装所需的依赖：
npm install express express-ws
创建服务器
创建一个新的文件server.js，并添加以下代码：
const express = require('express');
const expressWs = require('express-ws');
const app = express();
expressWs(app);
app.ws('/chat', (ws, req) => {
ws.on('message', (msg) => {
app.ws.getWss().clients.forEach((client) => {
client.send(msg);
});
});
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});
上述代码使用express-ws库扩展了Express应用，使其支持WebSocket。我们创建了一个WebSocket的/chat端点，当收到客户端发来的消息时，将该消息广播给所有连接的客户端。
前端界面
现在，我们创建一个简单的HTML文件来构建前端聊天界面。在项目根目录下创建一个新的文件index.html，并添加以下代码：
<!DOCTYPE html>
<html>
<head>
<title>Chat App</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
}
#messages {
height: 300px;
overflow-y: scroll;
border: 1px solid #ccc;
padding: 10px;
}
#message-form {
display: flex;
}
#message-input {
flex-grow: 1;
}
#send-button {
margin-left: 10px;
}
</style>
</head>
<body>
<h1>Chat App</h1>
<div id="messages"></div>
<form id="message-form">
<input type="text" id="message-input" autocomplete="off" />
<button type="submit" id="send-button">Send</button>
</form>
<script>
const messagesElement = document.getElementById('messages');
const messageForm = document.getElementById('message-form');
const messageInput = document.getElementById('message-input');
const ws = new WebSocket('ws://localhost:3000/chat');
ws.onmessage = (event) => {
const message = document.createElement('div');
message.innerText = event.data;
messagesElement.appendChild(message);
};
messageForm.addEventListener('submit', (event) => {
event.preventDefault();
if (messageInput.value) {
ws.send(messageInput.value);
messageInput.value = '';
}
});
</script>
</body>
</html>
上述代码创建了一个简单的聊天界面，用户可以输入消息并通过WebSocket将其发送到服务器。收到消息时，服务器将其广播给所有连接的客户端，并在界面上显示。
运行应用程序
最后，我们运行应用程序并在浏览器中查看聊天界面。在命令行中执行以下命令：
node server.js
然后，在浏览器中打开http://localhost:3000/，即可看到聊天界面。你可以在多个浏览器窗口中打开该链接，实时同步聊天消息。
恭喜！你已经成功使用WebSocket和Node.js搭建了一个简单的实时聊天应用。你可以进一步改进该应用，添加用户昵称、消息时间戳等功能，使其更加强大和实用。
本文来自极简博客，作者：浅笑安然，转载请注明原文链接：如何使用WebSocket和Node.js搭建聊天应用
