1002 Invalid hello in React Native

[tristan-nel]

I'm attempting to replicate this WebSocket usage in React Native.

I have used react-native-microphone-stream to gain the device mic stream data.

I have a liquidsoap server with a mic mount:

set("harbor.bind_addr", "0.0.0.0")
mic = input.harbor(
  "mic",
  port=8080,
  password="hackme",
  #buffer=1.0
  buffer=0.0
)

And in the JS for the RN app I have:

var ws = new WebSocket('ws://LIQ_SERVER_URL:8080/mic', 'webcast');
  ws.onopen = () => {
    // connection opened
    console.log('socket opened');
    const frame = {
      type: 'hello',
      data: {
        mime: 'audio/x-raw',
        audio: {
          channels: 2,
          samplerate: 44100,
          bitrate: 128,
        },
      },
    };
    ws.send(JSON.stringify(frame)); // Complains about invalid type if not stringified
  };

async function requestMicrophonePermission() {
    try {
      // console.log(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO);
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
        {
          title: 'Microphone Access Permission',
          message:
            'App needs access to your microphone so you can talk over your broadcast if you are a moderator',
          buttonNeutral: 'Ask Me Later',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK',
        },
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log('You can use the microphone');
      } else {
        console.log('Microphone permission denied');
      }
    } catch (err) {
      console.warn(err);
    }
  }

useEffect(() => {
    MicStream.init({
      bufferSize: 4096,
      sampleRate: 44100,
      bitsPerChannel: 128,
      channelsPerFrame: 2,
    });
    return () => listener.remove();
  }, []);

const listener = MicStream.addListener((data) => {
    console.log(data);
    // TODO: mic to server
  });

When I run the app I get the following output in console:

socket opened
1002 Invalid hello.

To be clear, I have not copied/cloned the Webcast.js code into my RN app, I am simply trying to replicate the WebSocket usage - does the 'webcast' protocol need to be defined somewhere in the RN app for the WebSocket to work?