当前位置：首页 > article >正文

＜tauri＞＜websocket＞tauri集成web端使用websocket实现数据通讯

article 2024/11/17 13:05:46

前言
本文是在websocket实现通讯的基础上，将前端项目集成到tauri中，以实现桌面窗口程序。

效果展示：
在这里插入图片描述

环境配置
系统：windows
平台：visual studio code
语言：javascript、html、rust
库：tauri、nodejs

概述
此前，我的想法是实现网页端与PLC进行socket通讯，利用websocket作为中间转接。这个是可行的，参考以下博文：
1、＜javascript＞＜node.js＞＜websocket＞使用node.js创建websocket服务器，与网页端websocket客户端进行数据通讯，且创建windows批处理程序一键启动
2、＜websocket＞＜PLC＞使用js和html实现webscoket，与PLC进行socket通讯的实例
然后转念一想，既然前端能够实现通讯，而tauri又可以集成前端与后端，且生成桌面窗口程序，那么将之前的websocket通讯程序用tauri整合成桌面窗口程序，不是更好吗？
所以，最终我们可以实现这样的方案：
javascript+html+nodejs：websocket通讯
tauri：将网页集成，转为桌面程序

代码实现
在下面的步骤里，我会将利用tauri集成前端页面代码以实现与websocket通讯的步骤详细叙述，一来作为记录，二来以供有需要者参考。
注：本文最后与PLC的socket通讯将不以PLC真机测试，以python或者nodejs创建的socket服务器来模拟，但效果是一致的。

1、创建项目

打开vscode，在你的根目录下，创建一个项目文件夹，可以命名为webPlc:

E:\100 htmlcss>mkdir webplc

E:\100 htmlcss>cd webplc

2、创建html文件

在刚才创建的webplc文件夹中，新建一个index.html文件，并添加以下代码：
在这里插入图片描述

<!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="webclient.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>
    <button id="disconnectButton" disabled>断开</button>
    <pre id="messages"></pre>
</body>
</html>

这个html文件在浏览器中打开，显示如下：
在这里插入图片描述

3、新建websocket客户端与服务端文件

下面，我们先创建websocket客户端，它是一个javascript脚本文件，命名为webclient.js（与html中绑定的是一致的），并为其添加js代码：

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

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