¿Es posible combinar React Native con socket.io?

Siéntete en la libertad de divulgar nuestra web y códigos en tus redes sociales, apóyanos para aumentar esta comunidad.

Solución:

Para aquellos como yo que se topan con esta pregunta y buscan cómo integrar socket.io con react native.

Dado que React Native es compatible con websockets desde hace poco tiempo, ahora puede configurar web sockets muy fácilmente con Socket.io. Todo lo que tienes que hacer es lo siguiente

1. npm instalar socket.io-cliente
2. primera importación react-native
3. asignar window.navigator.userAgent = 'react-native';
4. importar socket.io-client/socket.io
5. en su constructor asignar this.socket = io('localhost:3001', jsonp: false);

Entonces, en general, debería verse así después de que npm instale 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!

  ...

y luego en ‘UserAgent.js’:

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

Nota: debido a que las importaciones de módulos ES6 están elevadas, no podemos hacer la asignación de agente de usuario en el mismo archivo que las importaciones de react-native y socket.io, por lo tanto, el módulo separado.

EDITAR:

La solución anterior debería funcionar, pero en el caso de que no intente crear un archivo socketConfig.js separado. Allí importe todo lo que sea necesario, incluyendo const io = require('socket.io-client/socket.io'); y teniendo window.navigator.userAgent = 'react-native'; ANTES de requerir socket.io-client. Luego puede conectar su enchufe allí y tener a todos los oyentes en un solo lugar. Luego, las acciones o funciones se pueden importar al archivo de configuración y ejecutar cuando un oyente recibe datos.

Ahora, si desea usar socket.io en su aplicación RN, debe usar este código:

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!');
);

Muchas gracias por Eric Kryski.

A falta de un polyfill para la API de WebSocket, puede crear un módulo nativo que haga uso de sockets web y envíe eventos a Javascript usando eventDispatcher.

En el lado de Javascript, se suscribiría a estos eventos usando DeviceEventEmitter.addListener.

Para obtener más información sobre el uso de módulos nativos, consulte el documento de react-native sobre el tema

Aquí puedes ver las comentarios y valoraciones de los lectores

---

---

Utiliza Nuestro Buscador