Software Mansion•13mo ago

React-Native connection?

I'm struggling to get a react-native client to connect to my membrane server. I'm just running locally right now. I start my membrane server with EXTERNAL_IP={my ip} mix phx.server. I'm using the @jellyfish-dev/react-native-membrane-webrtc client in my react native code Then I have the following connection code in my react-native view. I see the console log statements for init connect and attempting connect. But it never connects. I don't see a connection message in my phoenix server, nor the successful connection message. I tried increasing the log verbosity, but didn't get anything out of the logs from react-native. Is there something obviously wrong with my connection string? Is it expecting something different for the server URL?

const startServerConnection = async () => {
    const deviceID = await getUniqueId();
    
    try {
      console.log('attempting connnect')
      //Should make this environment aware at some point
      connect('https://192.168.121.87:4001/socket/', "room:" + deviceID, {
        endpointMetadata: {
          displayName: deviceID,
        },
        socketChannelParams: {
          childrenNames: params.childrenNames,
          talkAbout: params.talkAbout          
        }
      }).then(() => {
        console.log('connected. starting mic')
        startMicrophone({ audioTrackMetadata: { active: true, type: 'audio' } });
      }).catch((e) => {
        console.log('connection error: ' + e);  
      });
      
    } catch (e) {
      console.log('connection error: ' + e);
    }
  };

  useEffect(()=>{
    let isMounted = true;
    const logLevel: LoggingSeverity = LoggingSeverity.Verbose
    changeWebRTCLoggingSeverity(logLevel)
    const initConnection = async ()=>{
      try {
        console.log('init connnect')
        await startServerConnection();
        if (isMounted) {
          setIsConnected(true)
        }
      } catch (error) {
        console.log('init connection error: ' + error)
      }
    }

const startServerConnection = async () => {
    const deviceID = await getUniqueId();
    
    try {
      console.log('attempting connnect')
      //Should make this environment aware at some point
      connect('https://192.168.121.87:4001/socket/', "room:" + deviceID, {
        endpointMetadata: {
          displayName: deviceID,
        },
        socketChannelParams: {
          childrenNames: params.childrenNames,
          talkAbout: params.talkAbout          
        }
      }).then(() => {
        console.log('connected. starting mic')
        startMicrophone({ audioTrackMetadata: { active: true, type: 'audio' } });
      }).catch((e) => {
        console.log('connection error: ' + e);  
      });
      
    } catch (e) {
      console.log('connection error: ' + e);
    }
  };

  useEffect(()=>{
    let isMounted = true;
    const logLevel: LoggingSeverity = LoggingSeverity.Verbose
    changeWebRTCLoggingSeverity(logLevel)
    const initConnection = async ()=>{
      try {
        console.log('init connnect')
        await startServerConnection();
        if (isMounted) {
          setIsConnected(true)
        }
      } catch (error) {
        console.log('init connection error: ' + error)
      }
    }

3 Replies

TonyLikeSocks•13mo ago

I've isolated the issue to the react-native code. I can successfully connect to the phoenix socket using curl.

Unknown User•13mo ago

Message Not Public

TonyLikeSocks•13mo ago

I did swap to HTTP, and also changed my approach to follow the provider from the example. I think I was also awaiting the result when I didn't need to. I have it working now, though my disconnect calls aren't working 🙂 I opened a github issue https://github.com/jellyfish-dev/react-native-membrane-webrtc/issues/139

GitHub

Disconnect not firing · Issue #139 · jellyfish-dev/react-native-mem...

I'm having trouble with the disconnect function. It doesn't appear to be successfully disconnecting from my membrane webrtc server. This is my disconnect function which I attach to the prov...

Gaming

Programming

React-Native connection?