Phoenix npm package not working in React Native Expo

Phoenix Forum Questions / Help
1

I am unable to connect to a phoenix socket/channel from React Native code using the Expo framework and the phoenix npm package.

Here is the code:

  useEffect(() => {
    const socket = new Socket("ws://localhost:4000/socket", {});

    socket.onOpen((event) => console.log("Connected."));
    socket.onError((event) => console.log("Cannot connect."));
    socket.onClose((event) => console.log("Goodbye."));

    socket.connect();

    const channel = socket.channel("room:1234");

    channel
      .join()
      .receive("ok", (resp) => {
        console.log("Joined pomodoro channel", resp);
      })
      .receive("error", (resp) => {
        console.log("Error in joining", resp);
      });
  }, []);

Executing this code just gets me in a loop of ‘cannot connect’ and ‘goodbye’. A similar issue was posted a while ago here: here. The solution they found does not work for me, which is to hardcode my IP address instead of using localhost. This all works on a regular React application on a web browser. I am out of ideas.

The development environment is Linux Mint and testing on an iPhone 13.

I appreciate any help.

2

Try to log the event you are receiving when the onClose and onError happens to get more details about it. Also make sure as you noted to not use 10.0.2.2 as the address if you are connecting using a real device. That address is usually for emulators (and afair only for Android idk the iOS one). Also make sure your computer IP is accessible on the same router, can you open the page using this address?

You can check these to make sure isn’t a connection issue

  • If I change the address to 10.0.2.2 or similar while using a emulator, does it connects?

  • If I change the address to the public local address given by the router while using a device,does it connects?

  • If I change the the address to the public local address and open the page using the computers public local address does it connect?

3 
error: Event {           
  "isTrusted": false,  
  "message": "The operation couldn’t be completed. Connection refused",                                           
}

This is what the error event looks like. Apparently, the connection isn’t trusted? I have no experience with elixir or phoenix, and a quick google search didn’t bring anything up as to how to make it trusted.

Ideas?