Est-il possible de combiner Réagir Natif avec la prise.io

Je travaille sur une application avec Phonegap + React.js et de la Prise.io. Cependant, alors Réagir Indigènes est sorti et le natif de la sensation est incroyable.

J'ai essayé de faire prise.io-client de travailler avec Réagissent Natif, mais malheureusement sans beaucoup de succès. J'ai fait quelques recherches et j'obtiens exactement les mêmes erreurs que décrit dans ce numéro: https://github.com/facebook/react-native/issues/375

Les commentaires sur la question dit d'essayer et d'utiliser l'extraction de l'API pour récupérer JS modules, mais je pense que je fais c'est 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();
    });

Il renvoie un pas défini n'est pas une fonction.

Est-il possible de faire de la prise.io-client de travailler avec Réagissent Natif? Ou suis-je en regardant cette façon le mal? Il existe peut-être d'autres, mieux adaptés solutions?

InformationsquelleAutor Timon | 2015-04-02
  1. 52

    Pour ceux qui, comme moi, de tomber sur cette question en regardant comment intégrer la prise.io à réagir natif.

    Depuis Réagir Natif a pris en charge les websockets pour un court laps de temps maintenant, vous pouvez désormais configurer les web sockets vraiment facilement avec la Prise.io. Tout ce que vous avez à faire est la suivante

    1. npm install socket.io-client
    2. d'abord importer réagir indigènes
    3. attribuer window.navigator.userAgent = 'react-native';
    4. import socket.io-client/support.io
    5. dans votre constructeur attribuer this.socket = io('localhost:3001', {jsonp: false});

    Donc dans l'ensemble ça devrait ressembler à ça après npm l'installation de support.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!

  ...
}

    et puis, en UserAgent.js':

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

    Remarque: en raison ES6 module importations sont hissés, nous ne pouvons pas faire le userAgent affectation dans le même fichier que la réaction native et de la prise.io les importations, d'où le module séparé.

    EDIT:

    La solution ci-dessus devrait fonctionner, mais dans le cas où il n'essayez pas de créer une socketConfig.js fichier. Dans n'importer quoi que ce soit qui est nécessaire, y compris const io = require('socket.io-client/socket.io'); et avoir window.navigator.userAgent = 'react-native'; AVANT d'exiger la prise.io-client. Ensuite, vous pouvez connecter votre prise là-bas et ont tous les auditeurs en un seul endroit. Ensuite, les actions ou fonctions peuvent être importés dans le fichier de configuration et de s'exécuter lorsqu'un auditeur reçoit des données.

    • Dans mon cas, n'a pas besoin d'ajouter window.navigator.userAgent = 'react-native';, je ne sais pas pourquoi.
    • +1 Le jsonp: false configuration est importante, car la valeur par défaut pour jsonp causes de la prise.io pour tentative de manipulation du DOM (qui n'existe pas dans la réagir environnement natif). Pour la recherche de la postérité, le message d'erreur est déclenchée: "le document.createElement n'est pas une fonction".
    • Nous-je envoyer un rappel (accusé de réception) à partir du client, le serveur reçoit l'événement et émet le rappel, mais il ne fonctionne pas sur mon client .. savez-vous pourquoi?
    • ce qui réagir la version qui a été utilisé avec cette réponse? Ne fonctionne pas avec v0.19
    • J'ai été en utilisant v0.19 depuis la libération et ma prise fonctionne toujours. Une chose à noter est Réagir Natif maintenant ne ont construit dans les web sockets facebook.github.io/réagir indigènes/docs/réseau.html#websocket si vous êtes à la recherche pour une simple prise de l'intégration.
    • Le jsonp: false bits est important. Aussi, il semble y avoir aucun besoin pour l'utilisateur de l'agent de bits (en fait, il a jeté les erreurs pour me dire document pas défini)
    • Réglage useragent me donne l'erreur Cannot set property userAgent of #<WorkerNavigator> which has only a getter
    • pour une raison quelconque, mon code pouvez vous connecter à douille dans le simulateur iOS, mais pas sur l'iPhone réel. des idées?
    • je voudrais dire à assurez-vous que vous pouvez réellement atteindre l'adresse que vous essayez de vous connecter à partir de votre téléphone. Si vous exécutez un express serveur ou quelque chose de similaire sur votre ordinateur, vous pouvez utiliser quelque chose comme ngrok pour exposer que le port et l'url de votre ordinateur vers votre téléphone
    • Vous pouvez spécifier explicitement le transport comme ceci: transports: ['websocket'] alors vous n'avez pas besoin jsonp: false partie.
    • Pour ceux qui obtiennent un Unable to resolve module, j'ai importé une socket.io comme suit: import io from 'socket.io-client/dist/socket.io';
    • Je ne suis pas en mesure de se connecter à l'aide de cette méthode. Je ne suis pas l'obtention de toute erreur. Quelqu'un peut-il m'aider?

    InformationsquelleAutor Russell Maxfield
  2. 7

    Maintenant, si vous souhaitez utiliser socket.io dans votre RN une application, vous devez utiliser ce code:

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

    Grand merci pour Eric Kryski.

    InformationsquelleAutor Kohver
  3. 2

    Court d'un polyfill pour l'API WebSocket, vous pouvez créer un module natif qui rend l'utilisation des web sockets et envoyer des événements à Javascript à l'aide de eventDispatcher.

    Sur le Javascript côté, vous abonner à ces événements à l'aide de DeviceEventEmitter.addListener.

    Pour plus d'informations sur l'utilisation de modules natifs, voir la réagir natif doc sur le sujet

    InformationsquelleAutor Jonathan Huang
  4. 0

    Modifier Février 2016: Réagir Natif prend désormais en charge les Web Sockets de sorte que certains de ces conseils n'est pas valide.

    Vous avez mal interprété le Github problème, j'ai peur. En elle, aackerman dit:

    Pour ce cas précis, vous aurez probablement envie d'utiliser l'extraction de l'API qui
    est fourni par l'environnement.

    Il n'est pas dire que vous devriez utiliser l'extraction de l'API de saisir à distance JS modules. Ce qu'il suggère, c'est que l'extraction de l'API être utilisé à la place de l'intégré dans Node.JS demande de module, ce qui n'est pas disponible dans Réagissent Natif.

    Regardons votre code:

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

    Pensez-y une seconde socketScript n'est pas un objet JavaScript, c'est une chaîne, donc comment pouvez-vous appeler le io méthode?

    Ce que vous auriez vraiment besoin de faire est d'analyser _bodyText avant de l'utiliser (dans un navigateur, vous pouvez utiliser eval), mais on aurait toujours le problème que tout Réagir Natif a un polyfill pour XHR et l'extraction de l'API, il ne sait pas encore ont l'un pour l'API WebSocket. Si je ne me trompe, cela signifie que vous êtes coincé.

    Je suggère l'ouverture d'un Github question de demander une API WebSocket polyfill et demander les pensées de la communauté. Quelqu'un peut avoir une solution de contournement.

    InformationsquelleAutor Colin Ramsay