From 9ec4cd9823a89b5a9ed31217a064c4ce4e344041 Mon Sep 17 00:00:00 2001
From: Jason Tsai <jason@pews.dev>
Date: Tue, 19 Mar 2024 15:38:40 +0800
Subject: [PATCH] docs(features): update WebSocket page

---
 src/content/docs/features/websocket.mdx | 112 ++++++++++++++++++++++--
 1 file changed, 107 insertions(+), 5 deletions(-)

diff --git a/src/content/docs/features/websocket.mdx b/src/content/docs/features/websocket.mdx
index 5635f56cac..7298754190 100644
--- a/src/content/docs/features/websocket.mdx
+++ b/src/content/docs/features/websocket.mdx
@@ -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.     |
+