react-use-websockets custom hook

React hook to facilitate connections to a WebSocket server running a specific protocol. Normal Javascript WebSockets created via new WebSocket(url) allow the sending and receiving of raw data packets. This WebSockets client works on top of that and assumes that the server understands a protocol based on messages, where each message has a name, an optional payload, and an optional receiver. Such as server is e.g. implemented in java here: Java WebSockets. Messages are sent using a delimiter between the name, followed by the receiver, followed by the payload

Install

1npm install react-use-websockets

Usage

In order to utilise the useWebSocket hook, a context has to be created:

1import React from 'react';
2import { WebSocketProvider } from "react-use-websockets";
3
4export const Index: FunctionComponent = () => {
5
6    return(
7        <WebSocketProvider
8            url="wss://websocketserver:1234"
9            delimiter="\t"
10            logging={true}
11        >
12            <App />
13        </WebSocketProvider>
14    )
15
16}

Now, the hook can be used in child components:

1import React, {useEffect} from 'react';
2import { useWebSocket } from "react-use-websockets";
3
4export const Component: FunctionComponent = () => {
5
6    const {listen, send, isConnected, connectivity, setDefaultCallback}  = useWebSocket();
7
8    useEffect(() => {
9
10        const unsubscribeListener = listen("SOME_MESSAGE_NAME", (payload: any, fromSid? string) => {
11            console.log("I have received this payload:",payload,"from this client:",fromSid);
12
13            send("SOME_MESSAGE_WAS_RECEIVED", "some kind of payload");
14        })
15
16        setDefaultCallback((message: string, payload: any, _fromSid?: string | null) => {
17            console.log("I have received a message to which no listener exist:", message);
18        })        
19
20        const unsubscribeConnectivityListener = connectivity((isOnline: boolean) => {
21            console.log("My connectivity state has changed. I'm now online?", isOnline);
22        });
23
24
25        return () => {
26            unsubscribeListener();
27            unsubscribeConnectivityListener();
28        }
29
30    }, []);
31
32
33    if (!isConnected) return null; // wait until we are connected
34
35    return (
36        ....
37    );
38
39
40}