Connect phoenix socket from React Native

Phoenix Forum Questions / Help
#1

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
#2

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
#3

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
#4

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
#5

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
#6

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
#7

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
#8

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
#9

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