效果：
准备工作：
新建一个文件夹，在根目录安装依赖：
npm install ws express依赖介绍：
WS是一个轻量级、高效的WebSocket库，适用于Node.js环境。
express 是一个流行的Node.js Web应用程序框架。
新建server.js文件，和public文件夹，public下新建index.html：
server.js:
介绍：PORT为运行端口，看板地址为http://localhost: + PORT，连接地址为ws://localhost:+ PORT
const express = require('express');
const WebSocket = require('ws');
const app = express();
const PORT = 3000;// 创建 HTTP 服务
app.use(express.static(__dirname + '/public'));
const server = app.listen(PORT, () => {});// 创建 WebSocket 服务
const wss = new WebSocket.Server({ server });
let clients = [];wss.on('connection', (ws) => {clients.push(ws);console.log(`New client connected. Total clients: ${clients.length}`);// 监听客户端消息ws.on('message', (message) => {console.log(`Received message: ${message}`);try {const parsedMessage = JSON.parse(message);if (parsedMessage.command === "ping") {ws.send(JSON.stringify({ command: "pong", data: "pong response" }));}} catch (e) {// 若消息不是 JSON 格式的字符串，直接处理为普通消息ws.send(`Echo: ${message}`);}});// 当客户端断开连接时，从列表中移除并记录信息ws.on('close', () => {clients = clients.filter((client) => client !== ws);console.log(`Client disconnected. Total clients: ${clients.length}`);});
});// 定义推送消息的函数，广播给所有客户端
function broadcastMessage(message) {clients.forEach((client) => {if (client.readyState === WebSocket.OPEN) {client.send(message);}});
}// 定义 API 接口用于前端推送消息
app.use(express.json());
app.post('/send', (req, res) => {const message = req.body.message;// 广播消息给所有客户端broadcastMessage(message);res.json({ status: 'Message sent' });
});
index.html:
介绍：可以根据自己测试的需要改变sendMessage发送的格式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>WebSocket Client</title><style>#messages {border: 1px solid #ccc;padding: 10px;height: 200px;overflow-y: auto;margin-bottom: 10px;}.message {margin: 5px 0;padding: 5px;}.sent {color: green;}.received {color: black;}.status {color: blue;}.item{font-size: 12px;margin: 10px 0 ;display: flex;align-items: center;}</style>
</head>
<body><div class="item">指令：<input type="text" id="command" placeholder="输入command" /></div><div class="item">数据：<input type="text" id="data" placeholder="输入data" /></div><button onclick="sendMessage()">发送</button><div id="messages"></div><script>// WebSocket 连接const ws = new WebSocket("ws://localhost:3000");// 监听连接成功ws.onopen = () => {displayMessage("Connected to WebSocket server", 'status');};// 监听消息ws.onmessage = (event) => {const receivedData = event.data;displayMessage(receivedData, 'received');};// 发送消息function sendMessage() {const command = document.getElementById("command").value;const data = document.getElementById("data").value;if (command) {ws.send(JSON.stringify({command})); // 发送消息到 WebSocket 服务器displayMessage(command, 'sent'); // 显示发送的消息// 通过 HTTP POST 向后端发送消息fetch('http://localhost:3000/send', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ message: JSON.stringify({command,data:data ?? {}}) })}).then(response => response.json()).then(data => console.log(data));}document.getElementById("message").value = ""; // 清空输入框}// 显示消息function displayMessage(message, type) {const messagesDiv = document.getElementById("messages");const newMessage = document.createElement("div");newMessage.className = `message ${type}`;newMessage.textContent = `${type === 'sent' ? '发送' : type === 'received' ? '接收' : '状态'}: ${message}`;messagesDiv.appendChild(newMessage);messagesDiv.scrollTop = messagesDiv.scrollHeight;}</script>
</body>
</html>
使用：
根目录执行命令：node server
表单用浏览器访问：http://localhost:3000/
接收端WebSocket连接地址ws://localhost:3000也可以改成IP
接收端WebSocket我写过Android和uniapp的，可以参考下列文章：
https://blog.csdn.net/m0_49083276/category_12433687.html?fromshare=blogcolumn&sharetype=blogcolumn&sharerId=12433687&sharerefer=PC&sharesource=m0_49083276&sharefrom=from_link
https://blog.csdn.net/m0_49083276/category_12433687.html?fromshare=blogcolumn&sharetype=blogcolumn&sharerId=12433687&sharerefer=PC&sharesource=m0_49083276&sharefrom=from_link
