是否可以将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('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？

Answer 1

对于像我这样的人来说，如何将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文件中，并在侦听器接收数据时执行。

Answer 2

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

Answer 3

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

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

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

Answer 4

编辑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，并要求社区的想法。 有人可能有一个解决方法。