＜javascript＞＜node.js＞＜websocket＞使用node.js创建websocket服务器，与网页端websocket客户端进行数据通讯，且创建windows批处理程序一键启动

本文链接：https://blog.youkuaiyun.com/normer123456/article/details/143736659

前言
本文是网页端调用javascript脚本创建websocket客户端，与websocket服务端进行通讯的简单示例，与此同时，为了方便启动，在windows系统下，使用批处理指令，一键启动网页和websocket服务器。

环境配置
系统：windows
平台：visual studio code
语言：javascript、html
库：node.js

概述
本文是基于作者的一个想法，即利用网页端来创建页面，后台使用websocket协议进行通讯，以实现与外部其他控制器进行通讯。由于外部控制器如工控的PLC或者单片机或者其他上位机程序，大多数支持的是传统socket，websocket与socket并不能直接通讯，所以，需要进行数据转接。
但本文只注重实现websocket的客户端与服务端的通讯，并且使用windows批处理程序来实现一键启动。

代码实现

网页端

<!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>
    <!-- 引入外部的JavaScript文件 -->
    <script src="websocket-client.js" defer></script>
</head>
<body>
    <h1>WebSocket Client</h1>
    <button id="connectButton">连接</button>
    <input type="text" id="messageInput" placeholder="Enter message">
    <button id="sendButton" disabled>发送</button>
    <pre id="messages"></pre>
</body>
</html>

网页端的代码是html，在上述的代码中，我们为html网页绑定了一个javascript脚本程序websocket-client.js，代码如下：

// WebSocket URL (指向你的Node.js WebSocket服务器)
const wsUrl = 'ws://localhost:8081';
let ws;

// 获取页面元素
const connectButton = document.getElementById('connectButton');
const sendButton = document.getElementById('sendButton');
const messageInput = document.getElementById('messageInput');
const messages = document.getElementById('messages');

// 连接按钮点击事件
connectButton.addEventListener('click', () => {
    // 创建WebSocket连接
    ws = new WebSocket(wsUrl);

    // 连接成功事件
    ws.onopen = () => {
        connectButton.disabled = true;
        sendButton.disabled = false;
        appendMessage(`Connected to ${wsUrl}`);
    };

    // 接收消息事件
    ws.onmessage = (event) => {
        appendMessage(`Received: ${event.data}`);
    };

    // 连接关闭事件
    ws.onclose = () => {
        connectButton.disabled = false;
        sendButton.disabled = true;
        appendMessage(`Disconnected from ${wsUrl}`);
        ws = null; // 重置WebSocket对象以便重新连接
    };

    // 连接错误事件
    ws.onerror = (error) => {
        appendMessage(`Error: ${error.message}`);
        connectButton.disabled = false; // 在出现错误时允许重新连接
    };
});

// 发送按钮点击事件
sendButton.addEventListener('click', () => {
    if (ws && ws.readyState === WebSocket.OPEN) {
        const message = messageInput.value;
        ws.send(message);
        appendMessage(`Sent: ${message}`);
        messageInput.value = ''; // 清空输入框
    } else {
        appendMessage('WebSocket is not open. Please connect first.');
    }
});

// 辅助函数：在messages元素中追加文本
function appendMessage(text) {
    const messageText = document.createTextNode(text + '\n');
    messages.appendChild(messageText);
    // 为了确保新消息总是可见的，可以滚动到底部
    messages.scrollTop = messages.scrollHeight;
}

上述代码中，是利用了nodejs中的ws模块来创建了一个websocket客户端，当我们启动网页后，网页的页面会有一个连接按钮：

<button id="connectButton">连接</button>

当我们点击按钮后，前面的javascript脚本会监听此按钮，然后创建一个websocket连接，指向我们运行的websocket服务器。
所以，我们需要同时运行websocket服务器，我们需要先创建一个server.js文件，代码如下：

const WebSocket = require('ws');
const net = require('net');

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8081 });
wss.on('connection', (ws) => {
  console.log('WebSocket client connected');

  ws.on('message', (message) => {
    ws.send(`Echo:${message}`)
    console.log(`Received WebSocket message: ${message}`);
  });

  ws.on('close', () => {
    console.log('WebSocket client disconnected');
  });
});

我们使用nodejs来运行此javascript文件，如下：

node websocket.js

在这里插入图片描述
websocket服务器运行成功后，再启动网页：

但我们点击连接按钮后，如下：

以上，我们就实现了websocket客户端与服务端的通讯与数据传输了。但是上面的客户端与服务器是分开启动的，我们希望假如部署在客户的电脑上，可以有个快捷方式一键启动客户端与服务器，那么有一个方法，我们可以适应windows的批处理程序。

我们可以创建一个记事本，命名为webstart在里面添加以下代码：

@echo off
start "" "E:\Program Files\nodejs\node.exe" "E:\100 htmlcss\ts-test\webserver.js"
start "" "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" "E:\100 htmlcss\ts-test\index.html"

然后将记事本另存为webstart.bat，注意要将后缀改为bat。
上面的代码中，nodejs的安装路径和你的html文件的路径已经webserver.js文件的路径，都需要按照实际路径填写进入，这样，当我们双击这个批处理程序时，就会一键启动服务器与网页，看一下实例演示：
在这里插入图片描述
注：本文是为了实现网页端与PLC进行通讯的中间过程，但网页端的websocket通讯，也可以作为单独的项提取出来，以作为记录，如果对你有参考作用，那也是很好的，但本质上，本文是作为一种记录，方便后续查看。