tauri-plugins-workspace/plugins/websocket/examples/tauri-app/src/main.ts

// Copyright 2019-2023 Tauri Programme within The Commons Conservancy
// SPDX-License-Identifier: Apache-2.0
// SPDX-License-Identifier: MIT

import WebSocket from "tauri-plugin-websocket-api";
import "./style.css";

let ws: WebSocket;

document.addEventListener("DOMContentLoaded", async () => {
  document.querySelector("#send")?.addEventListener("click", send);
  document.querySelector("#disconnect")?.addEventListener("click", disconnect);
  await connect();
});

function _updateResponse(returnValue: unknown) {
  const msg = document.createElement("p");
  msg.textContent =
    typeof returnValue === "string" ? returnValue : JSON.stringify(returnValue);
  document.querySelector("#response-container")?.appendChild(msg);
}

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

function send() {
  ws.send(document.querySelector("#msg-input")?.textContent || "")
    .then(() => {
      _updateResponse("Message sent");
    })
    .catch(_updateResponse);
}

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

document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
  <div>
    <input type="text" />
    <button id="send">send</button>
    <button id="disconnect">disconnect</button>
    <div id="response-container"></div>
  </div>
`;