Is it possible to combine React Native with socket.io

Question

I was working on an app with Phonegap + React.js and Socket.io. However, then React-Native got released and the native feel is amazing.

I tried getting socket.io-client working with React Native, but unfortunately without much success. I did some research and I'm getting the exact same errors as described in this issue: https://github.com/facebook/react-native/issues/375

The comments on the issue said to try and use the fetch API to fetch JS modules, but I think I'm doing this wrong:

var socketScript;     fetch('https://cdn.socket.io/socket.io-1.2.0.js')     .then(function(response) {         socketScript = response._bodyText;     }).done(function() {         var socket = socketScript.io();     }); 

This returns an undefined is not a function.

Is there any way to make socket.io-client work with React Native? Or am I looking at this the wrong way? Perhaps there are other, better suited solutions?

Answer 1

For those like me stumbling across this question looking how to integrate socket.io with react native.

Since React Native has supported websockets for a short time now, you can now set up web sockets really easily with Socket.io. All you have to do is the following

1. npm install socket.io-client
2. first import react-native
3. assign window.navigator.userAgent = 'react-native';
4. import socket.io-client/socket.io
5. in your constructor assign this.socket = io('localhost:3001', {jsonp: false});

So in all it should look like this after npm installing socket.io-client:

import React from 'react-native';  // ... [other imports]  import './UserAgent';  import io from 'socket.io-client/socket.io';  export default class App extends Component {   constructor(props) {     super(props);     this.socket = io('localhost:3001', {jsonp: false});   }    // now you can use sockets with this.socket.io(...)   // or any other functionality within socket.io!    ... } 

and then in 'UserAgent.js':

window.navigator.userAgent = 'react-native'; 

Note: because ES6 module imports are hoisted, we can't make the userAgent assignment in the same file as the react-native and socket.io imports, hence the separate module.

EDIT:

The above solution should work, but in the case it doesn't try create a separate socketConfig.js file. In there import anything that is needed, including const io = require('socket.io-client/socket.io'); and having window.navigator.userAgent = 'react-native'; BEFORE requiring socket.io-client. Then you can connect your socket there and have all listeners in one place. Then actions or functions can be imported into the config file and execute when a listener receives data.

Answer 2

Now, if you want to use socket.io in your RN app, you must use this code:

if (!window.location) {     // App is running in simulator     window.navigator.userAgent = 'ReactNative'; }  // This must be below your `window.navigator` hack above const io = require('socket.io-client/socket.io'); const socket = io('http://chat.feathersjs.com', {   transports: ['websocket'] // you need to explicitly tell it to use websockets });  socket.on('connect', () => {   console.log('connected!'); }); 

Big thanks for Eric Kryski.