WebSocket プラグインを使う

tauri-plugin-websocket プラグインを使用して、WebSocket でメッセージの送受信を行う方法です。Rust 側の実装を利用するため、Origin ヘッダーの変更やカスタムヘッダーの付与など、ブラウザ標準の API では制約される設定を行うことが可能です。

前提条件

Permissions (権限) の設定

src-tauri/capabilities/default.json に以下の権限を追加します。

{
    "permissions": [
        ...,
        "websocket:default"
    ]
}

1. セットアップ

npm run tauri add websocket

src-tauri/src/lib.rs:

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_websocket::init())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

3. 使用方法

API は標準の WebSocket に似ていますが、非同期関数として提供されます。

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

// 基本的な接続
const ws = await WebSocket.connect('wss://echo.websocket.org');

// カスタムヘッダーを指定して接続する場合
const wsWithHeaders = await WebSocket.connect('wss://echo.websocket.org', {
  headers: {
    'Authorization': 'Bearer my-token',
    'Origin': 'https://example.com'
  }
});

// メッセージ受信リスナー
ws.addListener((msg) => {
  console.log('Received Message:', msg);
});

// メッセージ送信
await ws.send('Hello Tauri');

// バイナリデータの送信
// await ws.send(new Uint8Array([1, 2, 3]));

// 切断
await ws.disconnect();

注意点

• 標準の WebSocket オブジェクトとは異なり、インスタンス化は非同期 (connect メソッド) で行います。
• wss:// (SSL/TLS) もサポートされています。