JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 60
  • Score
    100M100P100Q27255F

Simple Websocket client hook for Qwik

Package Exports

  • qwik-ws

Readme

Qwik Ws

A simple hook for using a websocket on the client.

Install

Add Qwik Ws to your project with one of the following commands

NPM

npm install qwik-ws

Yarn

yarn add qwik-ws

PNPM

pnpm add qwik-ws

Usage

Import

import { useWs } from "qwik-ws";

Example

import { $, component$ } from "@builder.io/qwik";
// Optional, you can just use import instead of import type.
import type {
    CloseEventFunction,
    ErrorEventFunction,
    MessageEventFunction,
    OpenEventFunction,
} from "qwik-ws";
import { useWs } from "qwik-ws";

export default component$(() => {
    const onOpen$: OpenEventFunction = $((ev, ws) => {
        console.log("WebSocket Opened", ev.timeStamp);
        ws.send("Hello World!");
    });

    const onError$: ErrorEventFunction = $((ev, ws) => {
        console.log("Received error");

        ws.close();
    });

    const onMessage$: MessageEventFunction = $((ev, ws) => {
        console.log("Received Message", ev.data);

        ws.close();
    });

    const onClose$: CloseEventFunction = $((ev, ws, funcs) => {
        console.log("Websocket Closed", ev.timeStamp);
        console.log(ws.readyState);

        // Events can access the additional websocket functions provided in the 3rd argument.
        funcs.reconnect();
    });

    const websocket = useWs("ws://localhost:8080", {
        protocols: ["JSON"],
        onOpen$,
        onError$,
        onMessage$,
        onClose$,
    });

    return (
        <div>
            <button
                onClick$={() => {
                    websocket?.ws?.send("Hello World!");
                }}
            >
                Send Message
            </button>
            <button
                onClick$={() => {
                    websocket?.ws?.close();
                }}
            >
                Close Websocket
            </button>
            {/* This will manually reconnect to the url
            and protocols provided in the useWs hook. */}
            <button
                onClick$={() => {
                    websocket?.reconnect();
                }}
            >
                Reconnect
            </button>
        </div>
    );
});