简介
WebSocket是一种在单个TCP连接上提供双向通信的网络协议。它能在浏览器和Web服务器之间建立持久的连接，使得实时通讯变得更加简单、高效。
在本篇博客中，我们将介绍如何使用WebSocket来构建一个实时通讯应用。我们将使用JavaScript来编写前端代码，使用Node.js来编写后端代码。
准备工作
在开始之前，我们需要安装Node.js和一个文本编辑器。确保你已经具备这些软件环境。
前端代码
首先，我们要创建一个HTML文件，并添加一些基本的结构和样式。在文件中添加以下内容：
<!DOCTYPE html>
<html>
<head>
<title>实时通讯应用</title>
<style>
#message-container {
height: 300px;
overflow: scroll;
}
</style>
</head>
<body>
<h1>实时通讯应用</h1>
<div id="message-container"></div>
<form id="message-form">
<input type="text" id="message-input">
<button type="submit">发送</button>
</form>
<script src="client.js"></script>
</body>
</html>
接下来，我们需要编写JavaScript代码来实现与WebSocket的交互。在与HTML文件同目录下创建一个名为client.js的文件，编写以下代码：
const container = document.getElementById('message-container');
const form = document.getElementById('message-form');
const input = document.getElementById('message-input');
const socket = new WebSocket('ws://localhost:3000');
socket.onopen = () => {
console.log('连接已建立');
};
socket.onmessage = (event) => {
const message = document.createElement('div');
message.innerHTML = event.data;
container.appendChild(message);
};
form.addEventListener('submit', (event) => {
event.preventDefault();
const text = input.value.trim();
if (text !== '') {
socket.send(text);
input.value = '';
}
});
这段代码首先获取了HTML中所需的一些元素，然后创建了一个WebSocket实例，并连接到本地服务器（端口为3000）。
接下来，我们为WebSocket的onopen事件和onmessage事件添加了一些代码。当WebSocket连接成功打开时，会触发onopen事件，我们在控制台输出一条成功连接的消息。当接收到来自服务器的消息时，会触发onmessage事件，我们将消息添加到HTML中的message-container容器中。
最后，我们为表单的submit事件添加了一个回调函数。该函数会阻止表单的默认提交行为，并从输入框中获取文本内容。如果文本不为空，则使用WebSocket发送该消息，并清空输入框的内容。
后端代码
现在，我们需要编写服务器端的代码。在与HTML文件同目录下创建一个名为server.js的文件，编写以下代码：
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });
wss.on('connection', (ws) => {
ws.on('message', (message) => {
wss.clients.forEach(client => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
这段代码使用Node.js的WebSocket库创建了一个WebSocket服务器，并监听3000端口。
当有客户端成功连接到服务器时，会触发connection事件。我们在事件的回调函数中添加了处理消息的代码。当接收到来自客户端的消息时，我们遍历所有客户端并将消息发送给他们，除了消息来源的客户端。
运行应用
现在我们已经完成了前后端代码的编写，可以尝试运行应用了。
首先，打开终端并进入项目所在的目录。然后，运行以下命令来启动服务器：
node server.js
如果一切正常，你应该会在终端上看到服务器已经启动的消息。
接下来，你可以在浏览器中打开HTML文件，并在多个标签页或窗口中测试实时通讯功能。
结束语
通过本篇博客，我们学习了如何使用WebSocket来构建实时通讯应用。WebSocket提供了一种简单、高效的双向通信方式，使得实时通讯变得更加便捷。希望本篇博客对你有所帮助，祝你使用WebSocket开发出更加优秀的应用！
评论 (0)