是否可以将 React Native 与 socket.io 结合使用 [英] Is it possible to combine React Native with socket.io

问题描述

我正在使用 Phonegap + React.js 和 Socket.io 开发一个应用程序.然而，后来 React-Native 发布了，原生的感觉是惊人的.

I was working on an app with Phonegap + React.js and Socket.io. However, then React-Native got released and the native feel is amazing.

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

I tried getting socket.io-client working with React Native, but unfortunately without much success. I did some research and I'm getting the exact same errors as described in this issue: https://github.com/facebook/react-native/issues/375

对该问题的评论说尝试使用 fetch API 来获取 JS 模块，但我认为我这样做是错误的:

The comments on the issue said to try and use the fetch API to fetch JS modules, but I think I'm doing this wrong:

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 一起工作?还是我看错了?也许还有其他更合适的解决方案?

Is there any way to make socket.io-client work with React Native? Or am I looking at this the wrong way? Perhaps there are other, better suited solutions?

推荐答案

对于像我这样在寻找如何将 socket.io 与 react native 集成的问题的人.

For those like me stumbling across this question looking how to integrate socket.io with react native.

由于 React Native 暂时支持 websockets，你现在可以使用 Socket.io 非常轻松地设置 web sockets.您所要做的就是以下

Since React Native has supported websockets for a short time now, you can now set up web sockets really easily with Socket.io. All you have to do is the following

1. npm install socket.io-client
2. 首先导入 react-native
3. assign window.navigator.userAgent = 'react-native';
4. 导入 socket.io-client/socket.io
5. 在你的构造函数中赋值 this.socket = io('localhost:3001', {jsonp: false});

所以在 npm 安装 socket.io-client 之后它应该看起来像这样:

So in all it should look like this after npm installing 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"中:

and then in 'UserAgent.js':

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

注意:因为 ES6 模块导入被提升，我们不能在与 react-native 和 socket.io 导入相同的文件中进行 userAgent 分配，因此是单独的模块.

Note: because ES6 module imports are hoisted, we can't make the userAgent assignment in the same file as the react-native and socket.io imports, hence the separate module.

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

The above solution should work, but in the case it doesn't try create a separate socketConfig.js file. In there import anything that is needed, including const io = require('socket.io-client/socket.io'); and having window.navigator.userAgent = 'react-native'; BEFORE requiring socket.io-client. Then you can connect your socket there and have all listeners in one place. Then actions or functions can be imported into the config file and execute when a listener receives data.

这篇关于是否可以将 React Native 与 socket.io 结合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！