Skip to Content
Quick start

Quick start

WebSocketKit is a strongly-typed abstraction layer for managing WebSocket-based pub/sub communication (e.g. via Pusher ) with full TypeScript support.

It’s built as a modern, more type safe alternative for Laravel Echo , designed with frontend frameworks in mind — especially React.

Installation

Create client

Initialize and export a reusable WsKit instance using your Pusher configuration. Use this client to handle all real-time events across your application.

wskit.ts
import { WsKit } from 'websocketkit'
import Pusher from "pusher-js";
 
const options = {
  //...
}
 
/* Or import your existing client */
const pusher = new Pusher("YOUR_APP_KEY", options);
 
const wskit = new WsKit(pusher);
 
export { wskit }

If you’re using React, wrap your app with the WsKitProvider to make the client accessible via context. This enables usage of the useWsKit() hook in any component.

wskit-provider.ts
import { createElement, createContext, useContext, type ReactNode, type ReactElement } from "react";
import type { WsKit } from "websocketkit";
 
export const WsKitContext = createContext<WsKit | undefined>(undefined);
 
export const useWsKit = () => {
    const context = useContext(WsKitContext);
 
    if (!context) {
        throw new Error("useWsKit must be used within WsKitProvider.");
    }
 
    return context;
};
 
export type WsKitProviderProps = {
    wskit: WsKit;
    children?: ReactNode;
};
 
export const WsKitProvider = ({ wskit, children }: WsKitProviderProps): ReactElement => {
    return createElement(
        WsKitContext.Provider,
        { value: wskit },
        children
    );
};
TypeScript