ios - react - sockets node

¿Es posible combinar React Native con socket.io?

Question

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

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

Los comentarios sobre el tema decían intentar usar la API fetch para recuperar módulos JS, pero creo que estoy haciendo esto 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 forma de hacer que socket.io-client funcione con React Native? ¿O estoy mirando esto de la manera incorrecta? ¿Quizás hay otras soluciones más adecuadas?

Answer 1

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

En el lado de Javascript, se suscribirá a estos eventos utilizando DeviceEventEmitter.addListener .

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

Answer 2

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 .

Answer 3

Editar febrero de 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 obtención que proporciona el entorno.

No dice que deba usar la API de captación para obtener módulos JS remotos. Lo que está sugiriendo es que la API de recuperación se use 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 debería hacer es analizar _bodyText antes de usarlo (en un navegador podría usar eval ), pero aún así tendría el problema de que si bien React Native tiene un polyfill para XHR y la API de recuperación, no lo hace '' 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 polyfill API de WebSocket y preguntar por los pensamientos de la comunidad. Alguien podría tener una solución alternativa.

Answer 4

Para aquellos como yo que tropezan con esta pregunta buscando cómo integrar socket.io con react native.

Dado que React Native ha soportado websockets por un corto tiempo, ahora puede configurar sockets web con mucha facilidad con Socket.io. Todo lo que tienes que hacer es lo siguiente

1. npm install socket.io-client
2. primera importación react-native
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 instalar npm 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 están elevadas, no podemos realizar la asignación del Agente de usuario en el mismo archivo que las importaciones react-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 separado. Ahí importa todo lo que sea necesario, 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 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 escucha recibe datos.