¿Es posible combinar React Native con socket.io?

Estaba trabajando en una aplicación con Phonegap + React.js y Socket.io. Sin embargo, luego se lanzó React-Native y la sensación nativa es increíble.

Intenté que socket.io-client trabajara con React Native, pero desafortunadamente sin mucho éxito. Investigué un poco y estoy obteniendo exactamente los mismos errores que se describen en este número: https://github.com/facebook/react-native/issues/375

Los comentarios sobre el problema dicen que intente usar la API de recuperación para buscar módulos JS, pero creo que lo estoy haciendo mal:

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(); }); 

Esto devuelve un indefinido no es una función .

¿Hay alguna manera de hacer que socket.io-client funcione con React Native? ¿O estoy mirando esto de la manera incorrecta? Tal vez hay otras soluciones más adecuadas?

Para aquellos como yo, tropezando con esta pregunta buscando cómo integrar socket.io con reactjsr nativo.

Debido a que React Native ha admitido websockets por un corto tiempo, ahora puede configurar sockets web muy fácilmente con Socket.io. Todo lo que tienes que hacer es lo siguiente

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

Entonces, en general, debería verse así después de que npm instaló 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 del módulo ES6 son izadas, no podemos hacer que la asignación userAgent se realice en el mismo archivo que las importaciones reactjsr-native y socket.io, de ahí 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 por separado. Allí importa todo lo que se necesita, incluido const io = require('socket.io-client/socket.io'); y tener window.navigator.userAgent = 'react-native'; ANTES de requerir socket.io-client. Luego puede conectar su zócalo allí y tener a todos los oyentes en un solo lugar. Luego, las acciones o funciones pueden importarse en el archivo de configuración y ejecutarse 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 utilizando eventDispatcher .

En el lado de Javascript, te suscribirías 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

Edit Feb 2016: React Native ahora es compatible con Web Sockets, por lo que algunos de estos consejos no son válidos.

Has malinterpretado el problema de Github, me temo. En él, aackerman dice:

Para este caso específico, es probable que desee utilizar la API de búsqueda que proporciona el entorno.

Él no dice que debe usar la API de búsqueda para obtener módulos JS remotos. Lo que está sugiriendo es que se use la API de recuperación en lugar del módulo de solicitud Node.JS incorporado, que no está disponible en React Native.

Veamos tu código:

 socketScript = response._bodyText; var socket = socketScript.io(); 

Piense en esto por un segundo: socketScript no es un objeto JavaScript, es una cadena; por lo tanto, ¿cómo puede llamar al método io en él?

Lo que realmente tendría que hacer es analizar _bodyText antes de usarlo (en un navegador podría usar eval ), pero aún tendría el problema de que mientras Reacciona Native tiene un polyfill para XHR y la API de búsqueda, no funciona. Todavía tengo uno para la API de WebSocket. A menos que me equivoque, esto significa que estás atrapado.

Sugiero abrir un problema de Github para solicitar un relleno de API de WebSocket y preguntar por los pensamientos de la comunidad. Alguien puede tener una solución alternativa.