react-native-socket-io-wrapper

A native implementation of Socket.io for React Native.

⚠️ Currently working only on Android, the future commits will focus on iOS.

⚠️ Android uses io.socket:socket.io-client:1.0.1 which supports 2.x (or 3.1.x / 4.x with allowEIO3: true) as described at the compatibility page.

Motivation

After experiencing some performance problems with the JS socket.io library in React Native context, I decided to write a module using the Java solution that can be used in the UI/background threads and by doing so, keeping the JS thread more open to others expensive works and having the performance 💯, and a more stable development experience.

Table of contents

• Installation
  • Adding with TurboReactPackage class
• Usage
• Methods
• Todos
• Contributing
• License

Installation

npm install react-native-socket-io-wrapper

Adding with TurboReactPackage class

In MainApplication.java add the following:

        @Override
        protected List<ReactPackage> getPackages() {
          return Arrays.asList(
            new SocketIoTurboPackage(), // <-- add
            new MainReactPackage()
          );
        }

Usage

import SocketIO from "react-native-socket-io-wrapper";

// ...
const socketIO = new SocketIO('http://127.0.0.1:3000', {
  transports: ['websocket'],
  query: SocketIO.serializeQuery({
    token: 'Bearer JWT',
  }),
});

⚠️ For more info, please see in example of Android the usage of the socket with Hooks and lifecycle.

Methods

connect

socketIO.connect();

Open socket connection.

disconnect

socketIO.disconnect();

Close socket connection.

on

socketIO.on(eventName, callback);

Listen to socket event.

once

socketIO.once(eventName, callback);

Listen once to socket event.

Props

eventName: string callback: Function

emit

socketIO.emit(eventName, data);

Send socket event.

off

socketIO.off(eventName, data);

Remove socket event listener.

Props

eventName: string data: any

connected

socketIO.connected(callback);

Get connection status of socket.

connectedSync

socketIO.connectedSync();

Get connection status of socket.

⚠️ this method are synchronous blocking UI, use it carefully.

getId

socketIO.getId(callback);

Get id of socket.

getIdSync

socketIO.getIdSync();

Get id of socket.

⚠️ this method are synchronous blocking UI, use it carefully.

updateSocketOptions

socketIO.updateSocketOptions(updatedOptions);

Update socket options, this updates general instances paths.

updateSocketOptionsSync

socketIO.updateSocketOptionsSync(updatedOptions);

Update socket options, this updates general instances paths.

⚠️ this method are synchronous blocking UI, use it carefully.

Todos

• Write tests
• Implement iOS native module

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT