@jingx/stomp-socket-react

Reusable React provider and hooks for STOMP over WebSocket.

Install

npm install @jingx/stomp-socket-react @stomp/stompjs

react and @stomp/stompjs are peer dependencies.

Usage

"use client";

import React from "react";
import { SocketProvider, useSocket } from "@jingx/stomp-socket-react";

function AppSocketProvider({
  token,
  children,
}: {
  token: string | null;
  children: React.ReactNode;
}) {
  return (
    <SocketProvider
      brokerURL={process.env.NEXT_PUBLIC_SOCKET_URL}
      enabled={!!token}
      token={token}
      getConnectHeaders={({ token }) =>
        token ? { Authorization: token } : undefined
      }
    >
      {children}
    </SocketProvider>
  );
}

function BaccaratSubscription() {
  const { isConnected, subscribe } = useSocket();

  React.useEffect(() => {
    if (!isConnected) return;

    const subscription = subscribe("/topic/baccarat:2", (message) => {
      console.log(message.body);
    });

    return () => subscription.unsubscribe();
  }, [isConnected, subscribe]);

  return null;
}

Publish

cd ../stomp-socket-react
npm install
npm run build
npm publish --access public