Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 107 additions & 5 deletions src/content/docs/features/websocket.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,114 @@ title: Websocket
description: Open a WebSocket connection using a Rust client in JavaScript.
---

import Stub from '@components/Stub.astro';
import PluginLinks from '@components/PluginLinks.astro';
import { Steps, Tabs, TabItem } from '@astrojs/starlight/components';
import CommandTabs from '@components/CommandTabs.astro';

<PluginLinks plugin="websocket" />

<Stub>
Based on
https://github.com/tauri-apps/plugins-workspace/tree/v2/plugins/websocket
</Stub>
Open a WebSocket connection using a Rust client in JavaScript.

## Supported Platforms

- Windows
- Linux
- macOS

## Setup

_This plugin requires a Rust version of at least **1.75**_

Install the websocket plugin to get started.

<Tabs>
<TabItem label="Automatic" >
Use your project's package manager to add the dependency:

{ ' ' }

<CommandTabs
npm="npm run tauri add websocket"
yarn="yarn run tauri add websocket"
pnpm="pnpm tauri add websocket"
cargo="cargo tauri add websocket"
/>
</TabItem>

<TabItem label = "Manual">
<Steps>

1. Install the websocket plugin by adding the following to your `Cargo.toml` file:

```toml title="src-tauri/Cargo.toml"
[dependencies]
tauri-plugin-websocket = "2.0.0-beta"
# alternatively with Git:
tauri-plugin-websocket = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
```

2. Modify `lib.rs` to initialize the plugin:

```rust title="src-tauri/src/lib.rs" ins={3}
fn run() {
tauri::Builder::default()
.plugin(tauri_plugin_websocket::init())
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
```

3. Install the JavaScript Guest bindings using your preferred JavaScript package manager:

<CommandTabs
npm = "npm install @tauri-apps/plugin-websocket"
yarn = "yarn add @tauri-apps/plugin-websocket"
pnpm = "pnpm add @tauri-apps/plugin-websocket"
/>

</Steps>
</TabItem>
</Tabs>

## Usage

The websocket plugin is available in JavaScript.

```js
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();
```

## Permissions

By default all plugin commands are blocked and cannot be accessed. You must define a list of permissions in your `capabilities` configuration.

See [Access Control List](/references/v2/acl) for more information.

```json title="src-tauri/capabilities/main.json" ins={6}
{
"$schema": "../gen/schemas/desktop-schema.json",
"identifier": "main-capability",
"description": "Capability for the main window",
"windows": ["main"],
"permissions": ["websocket:default"]
}
```

| Permission | Description |
|---------------------------|---------------------------------------------------------------|
| `websocket:default` | Allows connecting and sending data to a WebSocket server |
| `websocket:allow-connect` | Enables the connect command without any pre-configured scope. |
| `websocket:deny-connect` | Denies the connect command without any pre-configured scope. |
| `websocket:allow-send` | Enables the send command without any pre-configured scope. |
| `websocket:deny-send` | Denies the send command without any pre-configured scope. |