＜tauri＞＜rust＞＜GUI＞基于tauri，实现websocket通讯程序（右键菜单、websocket

前言

本文是基于rust和tauri，由于tauri是前、后端结合的GUI框架，既可以直接生成包含前端代码的文件，也可以在已有的前端项目上集成tauri框架，将前端页面化为桌面GUI。

环境配置 系统：windows 10平台：visual studio code语言：rust、javascript库：tauri2.0 概述

本文是基于tauri框架下，实现一个websocket通讯客户端，可以与websocket服务器进行数据通讯。

1、创建前端项目

如何创建前端项目并集成tauri到项目中，本文不再赘述，可以参看我之前的博文： 1、＜tauri＞＜rust＞＜GUI＞基于rust和tauri，在已有的前端框架上手动集成tauri示例 或者参考tauri官网： tauri.app/zh-cn/start/frontend/

本文的目的是实现websocket客户端，与websocket服务器进行通讯。我们依旧先创建网页端布局，新建一个websocket.html文件：

<div id="sidebar" class="sidebar"> <div id="btns" class="btns"> <button type="button" id="connbtn">服务器连接</button> <button type="button" id="disconnbtn">服务器断开</button> <div id="status" class="status"> </div> </div> </div> <div id="wsws" class="wsws"> <div id="setbox" class="setbox"> <label for="ipinput">服务器IP:</label> <input type="text" class="ipinput" id="ipinput" placeholder="ws服务器ip地址" value="127.0.0.1"> <label for="portinput">服务器端口:</label> <input type="text" class="portinput" id="portinput" placeholder="ws服务器端口号" value="8080"> <label for="msginput">发送消息：</label> <input id="msginput" class="msginput" type="text" placeholder="发送消息" > <button id="sendbtn" type="button" disabled="disabled">发送</button> </div> <div id="msgbox" class="msgbox"> </div> </div>

然后为其创建css布局websocket.css:

.app{ display: flex; flex-direction: row; gap: 20px; } .sidebar { background-color: #ffffff; border:1px solid #797777; border-radius: 5px; width: 100px; flex-grow: 0; } .btns{ display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; margin: 5px; } .status{ background-color: #797777; border:1px solid #797777; border-radius: 50%; width: 50px; height: 50px; } .status.green { background-color: #3cf736; } .status.gray { background-color: #797777; } .wsws { flex-grow: 1; display: flex; flex-direction: column; padding: 2px; border:1px solid #a19f9f; border-radius: 5px; spacing: 10px; background-color: #c1f0f3; } .setbox { display: flex; flex-direction:column; } .ipinput,.portinput { width:50%; padding: 5px; margin-bottom:10px; } .msginput { padding: 5px; margin-bottom: 10px; } button { padding: 5px 10px; margin-bottom: 10px; border:1px solid #797777; border-radius: 5px; } button:hover{ padding: 5px 10px; margin-bottom: 10px; background-color: #87cce7; border:1px solid #797777; border-radius: 5px; } .msgbox { background-color: #ffffff; border:1px solid #797777; border-radius: 5px; width: 100%; height: 200px; overflow-y: auto; } .msgbox p { margin:5px 0; } .msgbox .send { text-align: left; background-color: #8af76f; } .msgbox .recv { text-align: right; background-color: #f1f7f6; }

以上前端布局运行后效果如下：

2、右键菜单

我们在本次的示例中，顺便介绍一下tauri中右键菜单实现的一种方式。我们进行websocket通讯，肯定需要先进行连接，还要进行数据发送，都需要按钮。但是我们有可以使用右键菜单来实现。 如同此前的博文： ＜tauri＞＜rust＞＜GUI＞使用tauri创建一个图片浏览器（文件夹遍历、图片切换） 中，我们添加了菜单，来进行文件夹导入。 右键菜单就是在菜单的基础上而来，所以，我们需要先导入menu：

import { Menu,MenuItem,Submenu } from "@tauri-apps/api/menu";

另外为了右键菜单跟随鼠标光标，我们还需要获取鼠标位置来计算屏幕位置，因此我们还需要导入：

import { getCurrentWindow } from "@tauri-apps/api/window"; import { LogicalPosition } from "@tauri-apps/api/dpi";

现在，我们像之前一样，先创建几个菜单项：

const comm = await Submenu.new( { id: 'comm', text: '通讯', } ); const conn = await MenuItem.new( { id: 'conn', text: '连接', action: () => { console.log('连接'); connectws(); } } ); const disconn = await MenuItem.new( { id: 'disconn', text: '断开', action: () => { console.log('断开'); disconnectws(); } } ); comm.append([conn,disconn]); const clear = await MenuItem.new( { id:'clear', text:'清空', action:()=>{ msgboxdiv.innerHTML = ''; } } ) const menu = await Menu.new( { items: [comm] } ); const menu2 = await Menu.new( { items: [clear] } );

此处，我们创建的菜单通讯和清空将在不同的区域起作用，也就是当我们在不同的地方右击，将显示不同的菜单。 正常情况下，将以上菜单项添加到窗口，使用以下指令：

await menu.setAsAppMenu();

但是，右键菜单类似于弹出项，我们需要使用另一个指令：

await menu.popup(pp2,appwindow);

不过，我们不能直接这样调用，这样调用，菜单只会出现一次。如下图： 我们希望在箭头1区域右击时出现清空菜单，在箭头2区域右击时出现通讯菜单，而这两个区域对应不同的div，所以我们可以这样写：

setboxdiv.addEventListener('contextmenu', async (e) => { e.preventDefault(); const x=e.clientX; const y=e.clientY; const pp2 = new LogicalPosition(x,y).toPhysical(factor); await menu.popup(pp2,appwindow); }); msgboxdiv.addEventListener('contextmenu', async (e) => { e.preventDefault(); const x=e.clientX; const y=e.clientY; const pp2 = new LogicalPosition(x,y).toPhysical(factor); await menu2.popup(pp2,appwindow); })

我们为两个div添加监听事件，使用contextmenu来监听右击事件，然后根据鼠标点击的位置来弹出菜单。 看一下演示效果：

3、websocket通讯

要在tauri中实现websocket通讯，需要先安装插件：

npm run tauri add websocket

然后导入：

import WebSocket from "@tauri-apps/plugin-websocket";

tauri官网给出了websocket的示例代码： 官方源码

import WebSocket from '@tauri-apps/plugin-websocket'; const ws = await WebSocket.connect('ws://127.0.0.1:8080'); ws.addListener((msg) => { console.log('Received Message:', msg); }); await ws.send('Hello World!'); await ws.disconnect();

我们根据源码进行修改，首先是连接服务器：

async function connectws() { const ip = ipinput.value; const port = portinput.value; if (ip == '' || port == '') { alert('请输入IP地址或端口号！'); return; }; if (!ipRe.test(ip)){ alert('IP地址格式不正确！'); return; } ws = await WebSocket.connect('ws://' + ip + ':' + port); ws.addListener((msg) =>{ console.log(msg); if (msg.type == 'Text' && msg.data == 'success') { statusdiv.classList.remove('gray'); statusdiv.classList.add('green'); sendbtn.disabled = false; } else if (msg.type == 'Close') { statusdiv.classList.remove('green'); statusdiv.classList.add('gray'); sendbtn.disabled = true; } else { const br1=document.createElement('p'); br1.className = 'recv'; br1.textContent =msg.data + ':服务器'; msgboxdiv.appendChild(br1); } }) };

关闭连接：

async function disconnectws() { await ws.disconnect(); };

发送数据：

sendbtn.addEventListener('click',async ()=>{ //console.log(ws); const sendmsg = msginput.value; if (ws == undefined) { alert('请先连接服务器！'); return; } else { await ws.send(sendmsg); const br1=document.createElement('p'); br1.className = 'send'; br1.textContent = '我:' + sendmsg; msgboxdiv.appendChild(br1); //msgboxdiv.innerHTML +='client:' + sendmsg; } }); 4、动态演示：

为了便于演示，我们还需要一个简单的websocket服务器程序：

const WebSocket =require('ws'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection',function connection(ws) { console.log('connection'); ws.send('success'); ws.on('message',function incoming(message) { console.log('received: %s', message); ws.send(message.toString()); }); ws.on('close',function close() { console.log('close'); }); }); console.log('WebSocket服务器正在运行，监听端口8080');

然后我们运行此服务器程序，再启动tauri客户端，看下动态演示：

tauri-websocket通讯演示