是否可以将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();
    });

这将返回 未定义的不是函数 。

有什么方法可以使socket.io-client与React Native一起工作？还是我看错了方向？也许还有其他更合适的解决方案？

Answer 1

对于像我这样的人，在此问题上tum绊绊，寻找如何将socket.io与react native集成在一起。

由于React Native短时间内支持websocket，因此您现在可以使用Socket.io轻松地设置Web套接字。您要做的只是以下内容

1. npm install socket.io-client
2. 首次进口本机
3. 分配 window.navigator.userAgent = 'react-native';
4. 导入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之前。然后，您可以在此处连接套接字，并将所有侦听器放在一个位置。然后，可以将操作或功能导入配置文件，并在侦听器接收数据时执行。