tauri-plugins-workspace/plugins/websocket/examples/svelte-app/src/routes/+page.svelte

<script lang="ts">
  import WebSocket from "@tauri-apps/plugin-websocket";
  import { onMount } from "svelte";

  let ws;
  let response = "";
  let message = "";

  onMount(async () => {
    ws = await WebSocket.connect("ws://127.0.0.1:8080")
      .then((r) => {
        _updateResponse("Connected");
        return r;
      })
      .catch(_updateResponse);
    ws.addListener(_updateResponse);
  });

  function _updateResponse(returnValue) {
    response +=
      (typeof returnValue === "string"
        ? returnValue
        : JSON.stringify(returnValue)) + "<br>";
  }

  function send() {
    ws.send(message)
      .then(() => _updateResponse("Message sent"))
      .catch(_updateResponse);
  }

  function disconnect() {
    ws.disconnect()
      .then(() => _updateResponse("Disconnected"))
      .catch(_updateResponse);
  }
</script>

<div>
  <input bind:value={message} />
  <button on:click={send}>Send</button>
  <button on:click={disconnect}>Disconnect</button>
</div>
<div>{@html response}</div>