是否可以将 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 is not a function 。

有没有办法让 socket.io-client 与 React Native 一起工作？还是我看错了？也许还有其他更适合的解决方案？

原文由 Timon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于像我这样偶然发现这个问题的人，他们正在寻找如何将 socket.io 与 react native 集成。

由于 React Native 支持 websocket 的时间很短，你现在可以使用 Socket.io 非常轻松地设置 web socket。您所要做的就是以下

1. npm install socket.io-client
2. 首先导入 react-native
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 之前。然后您可以在那里连接您的套接字并将所有侦听器放在一个地方。然后可以将动作或函数导入配置文件并在侦听器接收到数据时执行。

原文由 Russell Maxfield 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果没有 WebSocket API 的 polyfill，您可以创建一个使用 web-socket 的本机模块，并使用 eventDispatcher 将事件发送到 Javascript。

在 Javascript 方面，您可以使用 DeviceEventEmitter.addListener 订阅这些事件。

有关使用本机模块的更多信息，请参阅 有关该主题的 react-native 文档

原文由 Jonathan Huang 发布，翻译遵循 CC BY-SA 3.0 许可协议