一尘不染

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

node.js

我正在使用Phonegap + React.js和Socket.io开发一个应用程序。但是,随后React-Native发行了,其原生感觉很棒。

我试图让socket.io-client与React
Native一起工作,但是不幸的是没有成功。我做了一些研究,发现与此问题中描述的错误完全相同:https : //github.com/facebook/react-
native/issues/375

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

这将返回 未定义的不是函数

有什么方法可以使socket.io-client与React Native一起工作?还是我看错了方向?也许还有其他更合适的解决方案?


阅读 693

收藏
2020-07-07

共1个答案

一尘不染

对于像我这样的人,在此问题上tum绊绊,寻找如何将socket.io与react native集成在一起。

由于React Native短时间内支持websocket,因此您现在可以使用Socket.io轻松地设置Web套接字。您要做的只是以下内容

  1. npm install 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分配,因此是单独的模块。

编辑:

上面的解决方案应该可以,但是在这种情况下,请不要尝试创建单独的socketConfig.js文件。在其中导入任何需要的东西,包括const io = require('socket.io-client/socket.io');并且window.navigator.userAgent = 'react- native';需要socket.io-
client之前。然后,您可以在此处连接套接字,并将所有侦听器放在一个位置。然后,可以将操作或功能导入配置文件,并在侦听器接收数据时执行。

2020-07-07