livemehere / usestomp

react hook for stomp

useStomp hook

This library provides a hook for simple use of stompjs in React npm

❗️Major Updated! The Hook has to be used with Provider. Please check the example below.

Discription

const {disconnect, subscribe, unsubscribe, subscriptions, send, isConnected} = useStomp();

This hook automatically manages the entire React App to be a single websocket connection. So feel free to use hook any components.

• disconnect : Disconnect webscoket from server.
• subscribe : Subscribe sepcific destination
• unsubscribe : Unsubscribe sepcific destination
• subscriptions : Returns all destinations you are currently subscribed to.
• send : Send message with body and headers to specific destination
• isConnected : Returns the current connection status.

Usage

Connect to stomp server

// your Root Component
<StompProvider config={{ brokerURL: SERVER_STOMP_URL }}>
  <App />
</StompProvider>

Subscribe to destination

subscribe("/room/...", (body) => {
  // Body is Object Changed to JSON
});

Send Message

send("/room/...", message, headers);

Unsubscribe

useEffect(() => {
  subscribe("/room/...", (body) => {
    // do anything...
  });

  return () => {
    // Make sure you're subscribed
    if (subscriptions["/room/..."]) {
      unsubscribe("/room/...");
    }
  };
}, []);

Check Status

console.log(isConnected); // true or false