Можно ли комбинировать React Native с socket.io

Я работал над приложением с Phonegap + React.js и Socket.io. Тем не менее, тогда React-Native был выпущен, а родное чувство потрясающе.

Я попытался получить socket.io-клиент, работающий с React Native, но, к сожалению, без особого успеха. Я провел некоторое исследование, и я получаю те же ошибки, что и в этом выпуске: https://github.com/facebook/react-native/issues/375

В комментариях к этой проблеме было предложено попробовать и использовать API-интерфейс fetch для извлечения модулей JS, но я думаю, что я делаю это неправильно:

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

Это возвращает undefined не функция.

Есть ли способ заставить socket.io-client работать с React Native? Или я смотрю на это неправильно? Возможно, существуют и другие, более подходящие решения?

Ответы

Ответ 1

Для таких, как я, наткнулся на этот вопрос, глядя, как интегрировать socket.io с реакцией native.

Так как React Native поддерживает веб-узлы в течение короткого времени, теперь вы можете легко настроить веб-сокеты с помощью Socket.io. Все, что вам нужно сделать, это следующее

  • npm install socket.io-client
  • первая импортная реакция-родная
  • присвойте window.navigator.userAgent = 'react-native';
  • import socket.io-client/socket.io
  • в вашем конструкторе присвойте this.socket = io('localhost:3001', {jsonp: false});

Итак, во всем он должен выглядеть так после 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!

  ...
}

а затем в 'UserAgent.js':

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

Примечание. Поскольку импорт модулей ES6 высок, мы не можем назначить userAgent в том же файле, что и import-native и socket.io, следовательно, отдельный модуль.

EDIT:

Вышеупомянутое решение должно работать, но в случае, если оно не пытается создать отдельный файл socketConfig.js. Там импортируйте что-нибудь, что необходимо, включая const io = require('socket.io-client/socket.io'); и имеющее window.navigator.userAgent = 'react-native'; ПЕРЕД вызовом socket.io-client. Затем вы можете подключить к нему гнездо и иметь всех слушателей в одном месте. Затем действия или функции могут быть импортированы в файл конфигурации и выполняться, когда слушатель получает данные.

Ответ 2

Теперь, если вы хотите использовать socket.io в своем приложении RN, вы должны использовать этот код:

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

Большое спасибо за Эрик Крыски.

Ответ 3

За исключением polyfill для API WebSocket, вы можете создать собственный модуль, который использует веб-сокеты и отправляет события в Javascript, используя eventDispatcher.

На стороне Javascript вы подписаны на эти события, используя DeviceEventEmitter.addListener.

Для получения дополнительной информации об использовании собственных модулей см. ответный родной документ по теме

Ответ 4

Изменить февраль 2016: React Native теперь поддерживает веб-сокеты, поэтому некоторые из этих советов недействительны.

Вы неверно истолковали вопрос Гитуба, которого я боюсь. В нем, aackerman говорит:

В этом конкретном случае вы, скорее всего, захотите использовать API-интерфейс fetch, который обеспечивается средой.

Он не говорит, что вы должны использовать API-интерфейс fetch для захвата удаленных JS-модулей. Он предлагает, чтобы API-интерфейс Fetch использовался вместо встроенного модуля запросов Node.JS, который недоступен в React Native.

Посмотрите на свой код:

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

Подумайте об этом на секунду - socketScript не является объектом JavaScript, это строка - поэтому как вы можете называть его io?

Что вам действительно нужно сделать, так это parse _bodyText перед его использованием (в браузере вы можете использовать eval), но тогда у вас все еще будет проблема, что, хотя React Native имеет polyfill для XHR и API выборки, он еще не имеет одного для API WebSocket. Если я не ошибаюсь, это означает, что вы застряли.

Я предлагаю открыть проблему Github, чтобы запросить API-интерфейс WebSocket polyfill и попросить мысли сообщества. У кого-то может быть обход.