Connect phoenix socket from React Native

Hello everyone,

I am trying to connect to a phoenix websocket backend from a mobile application, using React Native. For some reason the mobile side does not connect, while the web side is working fine.
The api side is fine, I can log with the mobile, or with the web client. But I cannot open the socket from the mobile part.

I copied phoenix.js, from master branch, and added it to the mobile client. I use this code to connect

const ROOT_SOCKET = 'ws://localhost:4000';
socket = new Socket(`${ROOT_SOCKET}/socket`, socketOptions);

While on the web side, I connect just with

socket = new Socket('/socket', socketOptions);

Adding some log, I see mobile does not even reach the connect method of the user socket. I tried also to use http:// instead of ws, but with no luck.

Do I need to specify some sort of origin? There should be no need to use CORS for websocket.

Is there a specific step to take in order to connect mobile application to the phoenix backend with websocket?

Thanks for taking time.

2 Likes

Your Socket probably has default settings, as far as I can tell there is no easy way to limit origin for native app clients so you’d have to relax the origin check, in your socket file (probably user_socket.ex) add check_origin: false to the transport:

transport :websocket, Phoenix.Transports.WebSocket, check_origin: false

make sure you do something against DOS in this case, like requests throttling, especially for the actions that query database or do some heavy lifting.

3 Likes

Thank You for your suggestion. I did try to add check_origin: false

But it’s not working yet. Anyway thank You for your help.

2 Likes

That’s strange, we use this setup with react native apps and it works. What response do you get in your native frontend? Can you connect to some sample public websocket (eg http://demos.kaazing.com/echo/)? If your server is available over the internet you can also check if another app can connect to it this way.

S. this comment for more info https://github.com/phoenixframework/phoenix/blob/master/lib/phoenix/transports/websocket.ex#L21-L31

2 Likes

Thank You for your help. I will try and investigate. I will return a comment after trying your suggestion.

BTW For the moment I dont even reach the connect function of the socket…

1 Like

I have been trying

const ROOT_SOCKET = 'ws://demos.kaazing.com';
socket = new Socket(`${ROOT_SOCKET}/echo`, socketOptions);

no luck… but I tried native implementation with

socket = new WebSocket(`${ROOT_SOCKET}/echo`);
  
  socket.onopen = () => {  
    // connection opened
    socket.send('something'); // send a message
  }; 
  socket.onmessage = (e) => {  
    // a message was received
    console.log(e.data); 
  }; 
  socket.onerror = (e) => {  
    // an error occurred
    onsole.log(e.message); 
  }; 
  socket.onclose = (e) => {  
    // connection closed
    console.log(e.code, e.reason); 
  };

And this is working. So I can narrow my problem to

import { Socket } from '../lib/phoenix';
const ROOT_SOCKET = 'ws://localhost:4000'
const socketOptions = {
  logger: (kind, msg, data) => { console.log(`${kind}: ${msg}`, data); },
};

socket = new Socket(`${ROOT_SOCKET}/socket`, socketOptions);

where …/lib/socket is a copy of phoenix.js, from master branch.

Is there a an official method to include phoenix socket support other than just copying the file, and importing it?

1 Like

I am thinking it can be ATS policy that forbid me insecure web socket…

I feel sorry for not thinking about it earlier.

Anyway thanks @yurko for your help

1 Like

No worries :slight_smile:

Our var on the native client side for local environments is the same as yours "ws://localhost:4000/socket".

Is there a an official method to include phoenix socket support other than just copying the file, and importing it?

We use the node package: "phoenix": "1.2.1", in the package.json and then in the API service we use it like that import {Socket} from 'phoenix';. After that you can instantiate it normally. Not sure it’s official but I think it’s better then reaching for external directory (I also did it at first).

2 Likes

Oh there is a npm package.

I installed the latest “phoenix”: “^1.3.0”

And this is working. It was not good enough to copy the file.

Thank You for your help :slight_smile:

3 Likes