When your WebSockets hit the Nitro boost 🏎️💨
npm install react-native-fast-ws --save
Note
This package requires React Native 0.76 and New Architecture. You must also install and configure Nitro Modules to use this package.
Warning
This library is still under development. Use at your own risk. The API is experimental and subject to change. This project explores new ideas and approaches to WebSocket and Blob APIs, thanks to Nitro, and its scope may change.
This library implements the WebSocket Web API and is meant to be a drop-in replacement for React Native's WebSocket implementation.
// Create a new WebSocket instance
const ws = new WebSocket('wss://echo.websocket.org');
// Using event listeners (recommended)
ws.addEventListener('open', (event) => {
console.log('Connected to server');
ws.send('Hello Server!');
});
// Or using event handlers
ws.onopen = (event) => {
console.log('Connected to server');
};
// Listen to messages
ws.addEventListener('message', (event) => {
console.log('Received:', event.data);
});
// Send different types of data
ws.send('Plain text message');
ws.send(new Blob(['Binary data']));
ws.send(new Uint8Array([1, 2, 3, 4]));
// Close the connection when done
ws.close();For more detailed information about the WebSocket API, check out the MDN WebSocket documentation.
- Can create
Blobs fromArrayBuffer,ArrayBufferViewtoo. With React Native, you can only create Blob from string or another Blob - Each
Blobhastext(),arrayBuffer(), andstream()methods. With React Native, you can only access the contents ofBlobvia customdatafield Blobdoes not depend on a native module. UsesArrayBuffers natively, thanks to Nitro Modules. With React Native, Blob usesRCTBlobManagerunder the hood to create and hold references to the data.Blobis automatically deallocated when no longer in use. You don't have toclose()it manually- You can send
Blob,ArrayBuffer, andArrayBufferViewobjects directly. With React Native, they are serialized and sent as base64 strings - Uses direct callbacks per WebSocket instance. React Native broadcasts all events to JS and filters by connection ID, which is less efficient
- It will throw when attempting to close WebSocket connection with a code other than 1000 or outside of range 3000-4999. This is spec compliant behavior and something not supported by React Native's WebSocket implementation
Note
Benchmarks shown below operate in controlled environments and may not accurately reflect real-world performance. Results can vary significantly based on factors such as:
- Device model and OS version
- Network conditions and latency
- Message payload size and type
- Application state and concurrent operations
These benchmarks are provided to demonstrate theoretical performance benefits and should be used as a general reference rather than absolute performance indicators.
| Operation | React Native | FastWS | Improvement |
|---|---|---|---|
| Send 10k strings | x | x | x |
| Receive 10k strings | x | x | x |
| Send 10k ArrayBuffers | x | x | x |
| Receive 10k ArrayBuffers | x | x | x |
| Operation | React Native | FastWS | Improvement |
|---|---|---|---|
| Send 10k strings | x | x | x |
| Receive 10k strings | x | x | x |
| Send 10k ArrayBuffers | x | x | x |
| Receive 10k ArrayBuffers | x | x | x |
All tests were performed with local WebSocket server to minimize network variance. Each test was run 5 times and averaged.
In the future, we would like to add benchmarks for CPU and memory usage, since that's where FastWS should shine. Your contributions are welcome!
React Native FastWS is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. Callstack is a group of React and React Native geeks, contact us at hello@callstack.com if you need any help with these or just want to say hi!
Like the project? ⚛️ Join the team who does amazing stuff for clients and drives React Native Open Source! 🔥
