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

Is it possible to combine React Native with socket.io

提问by Timon

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.

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

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

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

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:

关于该问题的评论说尝试使用 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();
    });

This returns an undefined is not a function.

这将返回一个undefined is not a function。

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

回答by Russell Maxfield

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

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

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

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

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

1. npm 安装 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});

So in all it should look like this after npm installing socket.io-client:

因此，在 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!

  ...
}

and then in 'UserAgent.js':

然后在“UserAgent.js”中：

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

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.

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

EDIT:

编辑：

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.

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

回答by Kohver

Now, if you want to use socket.io in your RN app, you must use this code:

现在，如果您想在 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!');
});

Big thanks for Eric Kryski.

非常感谢Eric Kryski。

回答by Jonathan Huang

Short of a polyfill for the WebSocket API, you can create a native module that makes use of web-sockets and send events to Javascript using eventDispatcher.

缺少 WebSocket API 的 polyfill，您可以创建一个使用 Web 套接字的本机模块，并使用eventDispatcher.

On the Javascript side, you would subscribe to these events using DeviceEventEmitter.addListener.

在 Javascript 方面，您将使用DeviceEventEmitter.addListener.

For more information on using native modules, see the react-native doc on the topic

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

回答by Colin Ramsay

Edit Feb 2016: React Native now supports Web Sockets so some of this advice is invalid.

2016 年 2 月编辑：React Native 现在支持 Web Sockets，因此其中一些建议无效。

You've misinterpreted the Github issue I'm afraid. In it, aackerman says:

恐怕你误解了 Github 问题。在其中，aackerman 说：

For this specific case you'll likely want to use the fetch API which is provided by the environment.

对于这种特定情况，您可能希望使用环境提供的 fetch API。

He doesn'tsay that you should use the fetch API to grab remote JS modules. What he's suggesting is that the fetch API be used in place of the built-in Node.JS request module, which isn't available in React Native.

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

Let's look at your code:

让我们看看你的代码：

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

Think about this for a second - socketScriptisn't a JavaScript object, it's a string - therefore how can you call the iomethod on it?

想一想——socketScript这不是一个 JavaScript 对象，它是一个字符串——那么你怎么能调用io它的方法呢？

What you'd really need to do is parse _bodyTextbefore using it (in a browser you could use eval), but then you'd still have the problem that while React Native has a polyfill for XHR and the fetch API, it doesn't yet have one for the WebSocket API. Unless I'm mistaken, this means you're stuck.

你真正需要做的是_bodyText在使用之前进行解析（在浏览器中你可以使用eval），但是你仍然会遇到一个问题，虽然 React Native 有一个用于 XHR 和 fetch API 的 polyfill，但它还没有有一个用于 WebSocket API。除非我弄错了，否则这意味着你被卡住了。

I suggest opening a Github issue to request a WebSocket API polyfill and ask for the thoughts of the community. Someone might have a workaround.

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