是否可以将React Native与socket.io结合使用

Question

我正在使用Phonegap + React.js和Socket.io开发应用程序.然而,然后React-Native发布了,原生的感觉很棒.

我尝试让socket.io-client使用React Native,但遗憾的是没有太大的成功.我做了一些研究,我得到了与本期中描述的完全相同的错误:https://github.com/facebook/react-native/issues/375

关于该问题的评论说试图使用fetch API来获取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一起工作？或者我是以错误的方式看待这个？也许还有其他更适合的解决方案？

Answer 1

对于像我这样的人来说,看到如何将socket.io与本地反应集成在一起.

由于React Native现在支持websockets很短的时间,现在您可以使用Socket.io轻松设置Web套接字.您所要做的就是以下内容

1. npm install socket.io-client
2. 首先导入反应原生
3. 分配 window.navigator.userAgent = 'react-native';
4. import socket.io-client/socket.io
5. 在你的构造函数中 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模块导入被挂起,我们无法在与react-native和socket.io导入相同的文件中进行userAgent分配,因此是单独的模块.

编辑:

上面的解决方案应该可以工作,但是在不尝试创建单独的socketConfig.js文件的情况下.在那里导入任何需要的东西,包括const io = require('socket.io-client/socket.io');并且window.navigator.userAgent = 'react-native';在要求socket.io-client之前.然后,您可以将套接字连接到那里,并将所有侦听器放在一个位置.然后可以将操作或函数导入配置文件,并在侦听器接收数据时执行.

Answer 2

现在,如果要在RN应用程序中使用socket.io,则必须使用以下代码:

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

非常感谢Eric Kryski.