WebSocket是一种基于TCP协议的全双工通信协议，它可以在客户端和服务器之间建立持久连接，实现实时通信。在本篇博客中，我们将介绍如何使用WebSocket开发一个实时聊天应用。
前提条件
- 了解基本的HTML、CSS和JavaScript知识；
- 了解Node.js和Express框架。
准备工作
首先，我们需要安装Node.js和Express框架。在命令行中执行以下命令来创建一个新项目并安装所需的依赖：
mkdir chat-app
cd chat-app
npm init -y
npm install express
接下来，创建一个index.js文件，并编写以下代码：
const express = require('express');
const app = express();
app.use(express.static('public'));
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
然后，在项目的根目录下创建一个public文件夹，并在其中创建一个index.html文件，作为我们应用的前端部分。在index.html中，我们将会使用WebSocket与服务器进行通信。
首先，引入socket.io库，并在<body>标签结束前添加以下代码：
<script src="https://cdn.socket.io/socket.io-3.1.3.min.js"></script>
<script src="script.js"></script>
然后，创建一个用于显示聊天消息的<div>标签：
<div id="chat"></div>
接下来，在index.html同级目录下创建一个script.js文件，并编写以下代码：
const socket = io();
socket.on('connect', () => {
console.log('Connected to server');
});
socket.on('message', (message) => {
console.log(message);
addMessageToChat(message);
});
socket.on('disconnect', () => {
console.log('Disconnected from server');
});
function addMessageToChat(message) {
const chatDiv = document.getElementById('chat');
const messageDiv = document.createElement('div');
messageDiv.innerHTML = message;
chatDiv.appendChild(messageDiv);
}
document.getElementById('message-form').addEventListener('submit', (e) => {
e.preventDefault();
const messageInput = document.getElementById('message');
const message = messageInput.value;
if (message.trim() !== '') {
socket.emit('sendMessage', message);
messageInput.value = '';
}
});
在上述代码中，我们首先创建一个与服务器的连接，并在连接成功时显示一条相关信息，并在断开连接时显示一条断开连接的信息。
然后，我们定义一个addMessageToChat函数，用于向聊天界面添加消息。
最后，我们监听消息发送表单的submit事件，并在提交表单时向服务器发送消息。同时，我们还会清空输入框内容。
服务器端代码
在服务器端，我们需要处理与客户端的连接和传输数据。
在index.js文件中添加以下代码：
const http = require('http');
const server = http.createServer(app);
const io = require('socket.io')(server);
let users = [];
io.on('connection', (socket) => {
console.log('New WebSocket connection');
socket.on('disconnect', () => {
console.log('WebSocket disconnected');
const user = users.find((user) => user.id === socket.id);
if (user) {
users = users.filter((user) => user.id !== socket.id);
io.emit('message', `${user.username} has left the chat.`);
}
});
socket.on('sendMessage', (message) => {
const user = users.find((user) => user.id === socket.id);
if (user) {
io.emit('message', `${user.username}: ${message}`);
}
});
socket.on('join', (username) => {
users.push({
id: socket.id,
username: username,
});
io.emit('message', `${username} has joined the chat.`);
});
});
server.listen(3000, () => {
console.log('Server is running on port 3000');
});
在上述代码中，我们首先创建http服务器，然后使用socket.io库将服务器与WebSocket协议关联起来。
接下来，我们维护一个users数组，用于储存当前在线用户的信息。
当有新的WebSocket连接时，我们打印一个相关信息，并且监听该连接的disconnect事件。在该事件中，我们会从users数组中找到断开连接的用户，并通知所有用户该用户已离开聊天室。
当用户发送一条消息时，我们会在该连接上触发一个sendMessage事件，并通过广播向所有用户广播该消息。每条消息将显示用户名和消息内容。
最后，我们监听一个join事件，用于在用户加入聊天室时向所有用户广播该信息。
运行应用
在终端中执行以下命令，启动服务器：
node index.js
在浏览器中输入http://localhost:3000，即可进入聊天应用。输入用户名后，即可发送和接收实时聊天消息。
总结
本篇博客介绍了如何使用WebSocket来实现一个简单的实时聊天应用。通过使用socket.io库，我们能够轻松实现双向通信并广播消息。这使得我们能够创建出更加交互性和实时性的Web应用程序。希望本篇博客对你有所帮助！
本文来自极简博客，作者：云端漫步，转载请注明原文链接：使用WebSocket进行实时聊天应用开发
