Not an issue - but react-use-websocket v3 works with React Native

[mr-ryan-james]

I just wanted to call this to anyone's attention who might find it useful - react-use-websocket (the repo this is forked from) v3 works fine with react-native, or at least it has been for me. The newest version (v4) depends on react-dom, so it doesn't work, but v3 seems to work really nicely.

https://github.com/robtaussig/react-use-websocket/releases/tag/3.0.0

[talksik]

thanks @mr-ryan-james

[akanoce]

Unfortunately, react-use-websocket does not provide support for additional headers unlike this library.
Seems like User-Agent is not defined by default on iOS, potentially leading to issues in cases where this header is required (like 403 from the wss server)

[antgel]

So as of October 2023 which library is generally preferred for websocket development with React Native (well, Expo)? Do we even need a library or can we just use the socket.io SDKs? The issues and PRs on this library seem to be basically ignored by the maintainer, whose only interaction in years has been merging Dependabot commits.

[ybupro]

So as of October 2023 which library is generally preferred for websocket development with React Native (well, Expo)? Do we even need a library or can we just use the socket.io SDKs? The issues and PRs on this library seem to be basically ignored by the maintainer, whose only interaction in years has been merging Dependabot commits.

Did you find any solution or new library? Thank you!

[antgel]

Did you find any solution or new library? Thank you!

Not yet; I haven't had time to look as I've been working on other projects. I also guess this isn't the best place to ask, I might try Discord when I get back onto this project.

[mr-ryan-james]

This obviously comes with no guarantees, but this solution seems to be working ok with me, feel free to adapt it to your own needs (for example, removing the auto reconnect logic)

import { useCallback, useEffect, useRef } from 'react';
import { config } from 'api/config';
import { useAppState } from '@react-native-community/hooks';

// your websocket url
const websocketUrl = config.websocketUrl;

const handleMessage = async (e: MessageEvent) => {
  // do something useful here
};

export default function useWebSocket() {
  let ws = useRef<WebSocket | undefined>();
  let currentAppState = useRef<string | undefined>();
  const appState = useAppState();

  const attemptConnection = useCallback(
    (count: number = 0) => {
      if (ws.current?.readyState === WebSocket.OPEN) {
        return;
      }

      ws.current = new WebSocket(websocketUrl);

      ws.current.onopen = () => console.log('ws opened');
      ws.current.onerror = (e) => console.log('ws error', e);
      ws.current.onclose = () => {
        console.log('ws closed', currentAppState);
        if (currentAppState.current === 'active' && count < 5) {
          attemptConnection(count + 1);
        }
      };

      ws.current.onmessage = handleMessage;
    },
    [],
  );

  useEffect(() => {
    currentAppState.current = appState;
    if (appState !== 'active') {
      console.log('ws close', appState);
      ws.current?.close();
      ws.current = undefined;
      return;
    }

    attemptConnection(0);

    return () => {
      ws.current?.close();
      ws.current = undefined;
    };
  }, [appState, attemptConnection]);
}