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

这将返回 undefined不是函数。

有没有办法让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与反应原生。

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

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

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}） ;

1. npm install socket.io-client
2. first import react-native
3. assign window.navigator.userAgent = 'react-native';
4. import socket.io-client/socket.io
5. in your constructor assign 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模块导入已挂起，我们无法在同一文件中进行userAgent分配作为react-native和socket.io导入，因此是单独的模块。

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'）; 并且有窗口。 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屋！