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

$3

npm install qwik-ws

$3

yarn add qwik-ws

$3

pnpm add qwik-ws

Usage

$3

import { useWs } from "qwik-ws";

$3

``ts
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 (



);
});
``