Tauri的消息推送示例

前言：

使用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协议的使用。