基于Node.js和ws库搭建WebSocket服务并实现消息互通的简单示例

服务器会接收客户端发送的消息，并将它广播给所有其他已连接的客户端。这个HTML页面会在打开时尝试连接到WebSocket服务器，并在连接成功后发送一条消息。console.log('收到服务器消息：' + evt.data);：创建一个新的目录作为项目文件夹，并在该目录下初始化一个新的Node.js项目。console.error('连接出错：', err);ws.send('你已连接到WebSo

Nancylove1008

3078人浏览 · 2024-04-03 10:46:20

Nancylove1008 · 2024-04-03 10:46:20 发布

环境要求：

Node.js环境安装
npm（Node.js的包管理器）

步骤：

安装Node.js：如果你还没有安装Node.js，请从Node.js官网下载并安装。
创建项目：创建一个新的目录作为项目文件夹，并在该目录下初始化一个新的Node.js项目。

        mkdir my-websocket-server
        cd my-websocket-server
        npm init -y
3. 安装WebSocket库：使用npm来安装ws库。

npm install ws
4. 创建WebSocket服务端：在项目目录中创建一个名为server.js的文件，并添加以下代码：

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
console.log('received: %s', message);
// 广播消息到所有客户端
wss.clients.forEach(function each(client) {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});

ws.send('你已连接到WebSocket服务器');
});

console.log('WebSocket服务正在监听8080端口...');
这段代码创建了一个监听8080端口的WebSocket服务器。服务器会接收客户端发送的消息，并将它广播给所有其他已连接的客户端。

5. 运行WebSocket服务端：在终端中运行服务端代码

node server.js
6. 创建WebSocket客户端：
可以使用任何支持WebSocket的客户端来连接这个服务器。这里我们以浏览器为例，创建一个简单的HTML页面作为客户端。

在项目目录中创建一个名为client.html的文件，并添加以下代码：

<!DOCTYPE html>
<html>
<body>
<script>
var ws = new WebSocket('ws://localhost:8080');

ws.onopen = function() {
console.log('连接服务器成功！');
ws.send('你好，服务器！');
};

ws.onmessage = function(evt) {
console.log('收到服务器消息：' + evt.data);
};

ws.onclose = function() {
console.log('与服务器断开连接');
};

ws.onerror = function(err) {
console.error('连接出错：', err);
};
</script>
</body>
</html>

这个HTML页面会在打开时尝试连接到WebSocket服务器，并在连接成功后发送一条消息。它还能够接收并显示从服务器收到的消息。

7. 打开客户端页面：
使用浏览器打开client.html文件，你应该能在控制台中看到与WebSocket服务器的交互过程。