前言:
使用Tauri框架后,不能直接使用js的webscoket进行消息推送,仅支持wss协议的websocket推送,ws协议的消息推送不支持。具体原因是因为Tauri框架打包后,应用环境是被部署为https协议,由于协议限制,websocket也仅支持wss协议。如果要使用ws协议的话,可以使用官方提供的tauri-plugin-websocket
插件。具体示例往下看。
一、安装插件包
首先需要将插件包tauri-plugin-websocket下载到本地,放于项目文件夹中,然后需要使用yarn安装插件包到node_modules中。首先需要配置package.json文件,示例如下:
{
"dependencies":{
"tauri-plugin-websocket-api":"link:./tauri-plugin-websocket"
}
}
注意:
插件文件包放于package.json同级,可根据自己的需求调整文件夹放置位置。由于我的配置路径是link,所以需要使用yarn安装,使用npm安装配置需要稍作修改(修改为:"tauri-plugin-websocket-api":"file:./tauri-plugin-websocket"
)。
二、具体使用示例
我用的是react的hooks语法,具体使用示例代码如下:
import {useEffect} from 'react';
import TauriWebsocket from 'tauri-plugin-websocket-api';
export default () => {
useEffect(() => {
let wsInstance:any;
TauriWebsocket.connect('ws://10.16.20.19:5605/ws/link/samples?access_token=111').then((ws: any) => {
wsInstance = ws;
ws.send('发送测试消息');
ws.addListener((e: any) => {
console.log('接收到的推送消息', e.data);
});
});
return ()=>{
// 离开界面,需要断开连接
wsInstance && wsInstance.disconnect();
};
}, []);
return (
<div>测试消息推送界面</div>
);
};
说明:
使用tauri-plugin-websocket-api插件,ws和wss协议都支持,此处仅展示了ws协议的使用。