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

我正在开发一个Phonegap + React.js和Socket.io的应用程序。 然而,那么React-Native就被释放了,原生的感觉是惊人的。

我试图让socket.io客户端与React Native工作,但不幸的是没有太多的成功。 我做了一些研究,并得到了与本问题中所述完全相同的错误: https : //github.com/facebook/react-native/issues/375

关于这个问题的评论说,尝试使用获取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一起工作吗? 还是我看着这个错误的方式? 也许还有其他更合适的解决scheme?

       

网上收集的解决方案 "是否可以将React Native与socket.io结合使用"

对于像我这样的人来说,如何将socket.io与native native结合起来,这个问题就陷入了困境。

由于React Native现在已经支持很短的时间,所以现在可以使用Socket.io轻松地设置networking套接字。 你所要做的就是以下几点

  1. npm安装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分配,因此不能分配模块。

编辑:

上面的解决scheme应该可以工作,但是如果不尝试创build一个单独的socketConfig.js文件。 在那里input任何需要的东西,包括const io = require('socket.io-client/socket.io'); 并有window.navigator.userAgent = 'react-native'; 在使用socket.io-client之前。 然后你可以连接你的套接字,并把所有的听众放在一个地方。 然后,可以将动作或函数导入到configuration文件中,并在侦听器接收数据时执行。

现在,如果你想在你的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 。

缺lessWebSocket API的polyfill,您可以创build一个本地模块,使用web-sockets并使用eventDispatcher将事件发送到Javascript。

在Javascript方面,您将使用DeviceEventEmitter.addListener订阅这些事件。

有关使用本地模块的更多信息,请参阅主题上的react-native文档

编辑2016年2月:React Native现在支持Web套接字,所以这些build议的一些是无效的。

你恐怕错误地解释了Github的问题。 其中,aackerman说:

对于这个特定的情况,你可能想要使用环境提供的获取API。

并没有说你应该使用抓取API抓取远程JS模块。 他所build议的是使用获取API来代替内置的Node.JS请求模块,这在React Native中是不可用的。

让我们看看你的代码:

 socketScript = response._bodyText; var socket = socketScript.io(); 

socketScript想想这个 – socketScript不是一个JavaScript对象,它是一个string – 所以你怎么能调用它的io方法呢?

你真正需要做的就是在使用之前parsing_bodyText (在浏览器中你可以使用eval ),但是你仍然会遇到这样的问题:React Native有一个XHR的polyfill和抓取API,还没有一个用于WebSocket API。 除非我错了,这意味着你被卡住了。

我build议打开一个Github的问题来请求一个WebSocket API的polyfill,并要求社区的想法。 有人可能有一个解决方法。