Is it possible to combine React Native with socket.io
Short of a polyfill for the WebSocket API, you can create a native module that makes use of web-sockets and send events to Javascript using eventDispatcher
.
On the Javascript side, you would subscribe to these events using DeviceEventEmitter.addListener
.
For more information on using native modules, see the react-native doc on the topic
import { io } from 'socket.io-client'
const socket = io(`${SOCKET_URL}:${SOCKET_PORT}`)
Important! SOCKET_URL
should be your local IP address, not localhost
or 127.0.0.1
.
To check your local IP:
Mac / Linux: run ifconfig
in terminal
Windows: run ipconfig --all
in shell
Should be something like: const socket = io('http://10.0.1.6:3000', {transports: ['websocket']})
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.
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
- npm install socket.io-client
- first import react-native
- assign
window.navigator.userAgent = 'react-native';
- import socket.io-client/socket.io
- 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.