【问题标题】:How to connect socket.io with a Heroku-deployed React Native app?如何将 socket.io 与 Heroku 部署的 React Native 应用程序连接起来?
【发布时间】:2018-10-05 05:57:55
【问题描述】:

我几乎用谷歌搜索了我的手指试图弄清楚这一点。似乎很多关于将 socket.io 与 React Native 连接的现有信息已经过时,或者我只是解释错了?

我已经成功连接了客户端(当我连接到我的应用程序时,我正在获取客户端控制台日志)。似乎是服务器端给我带来了问题。为什么从客户端发出的数据没有在我的终端中显示为日志?我的 server.js 中没有相关的 console.logs 正在记录,但 App.js console.logs 正在注册。

编辑:这是我完整的 App.js 文件:

import Expo from 'expo';
import React from 'react';
import { Dimensions, StyleSheet, Text, View } from 'react-native';

import store from './src/store';
import { Provider } from 'react-redux';


// window.navigator.useragent = 'react-native'; -> not necessary anymore?



const ROOT_URL = 'https://myherokudomain.herokuapp.com';

const io = require('socket.io-client/dist/socket.io');
const socket = io.connect(ROOT_URL);


socket.on('connect', () => {
     console.log('Connected to server');
});


socket.on('example', (data) => {
    console.log(data);

    socket.emit('my other event', { my: 'data' });
});


socket.on('disconnect', () => {
    console.log('Disconnected from server');
});

export default class App extends React.Component {


render() {

// const MainNavigator = my react-navigation system

return (
  <Provider store={store}>
    <View style={styles.container}>
      <MainNavigator />
    </View>
  </Provider>
  );
 }
}

编辑:这是我的完整 server.js 文件:

const config = require('./config/config');
const { mongoose } = require('./db/mongoose');
const express = require('express');

const cors = require('cors');


const app = express();
const port = process.env.PORT;

// ************ Include and use separate routes file
app.use(require('./routes/routes'));
// ************


//Cross-Origin resource sharing. cors library solves CORS problems.
app.use(cors());


//***********
/* Chat server code*/


// enabled heroku session affinity: 
// see https://devcenter.heroku.com/articles/session-affinity
// to enable:   heroku features:enable http-session-affinity
// to diable:   heroku features:disable http-session-affinity

const socketIO = require('socket.io');
const http = require('http');


const server = http.createServer(app);

const io = socketIO(server, { origin: "*:*" });
//********** */


io.on('connection', (socket) => {
    console.log('A client just joined', socket.id);

    socket.emit('example', { hello: 'world' });

    socket.on('my other event', (data) => {
        console.log(data);
    });


    socket.on('disconnect', () => {
        console.log('User was disconnected');
    });
});


server.listen(port, (err) => {
    console.log(`started on port ${port}`);
});



module.exports = { app };

我在客户端获取控制台日志很好(例如,当我在 expo 上打开我的应用程序时,会显示“已连接到服务器”和“hello: world”的内容。但我没有获取服务器- 侧控制台日志。

我做错了什么 - 如何让 socket.io 与已部署的 React-Native 应用程序完全配合?

如果有任何帮助,我将不胜感激!我一直坚持这一点。

【问题讨论】:

  • 请发布您的App.js 文件。
  • 嗨 Colin,我刚刚在我的 App.js 中发布了所有内容(除了我删除了 react-navigation 内容以缩短它,因为它无关紧要)
  • 你确定const socket = io.connect(ROOT_URL); 是正确的吗?
  • 我相信这是正确的,因为 ROOT_URL 是我的 heroku 域,当我在手机上打开我的应用程序时,我会看到客户端“连接到服务器”日志。
  • 老实说,我认为您对socketio 的命名在某处有些混淆。我会再次阅读本教程并确保名称正确。

标签: reactjs sockets react-native socket.io


【解决方案1】:

我假设所有代码都有效,只是日志记录无效,因为这就是您要问的全部内容。问题是 Node 没有输出到浏览器的控制台。

如果它部署在 heroku 上,那么您应该会看到那里记录了所有内容,否则您可以使用像 https://github.com/node-inspector/node-inspector 这样的库来输出到您的浏览器。

【讨论】:

  • 马特你是一个救生员!!我坚信与套接字相关的日志应该显示在我的 mac 终端中,所以我认为我的实现是错误的,并一直专注于更改服务器和客户端上的代码......我完全忽略了检查 heroku日志。我的天啊!当我检查heroku日志时,一切都如你所说。我的数据正在那里发送和记录。在某些事情上,我显然还是个菜鸟。谢谢!!
【解决方案2】:

您没有获取服务器端控制台日志,因为 1.) 它们只登录服务器,2.) 如果您确实想要发回数据,您不会发出它们。

【讨论】:

  • 在 App.js 我发射 -> socket.emit('my other event', { my: 'data' });作为测试并且不会显示在终端中。
  • 另外,当我连接或断开我的应用程序时,服务器没有向我显示日志(但我得到了与客户端相关的日志)。从理论上讲,我至少应该得到 server.js 中所见的“A 客户端刚刚加入”日志,但这并没有发生
猜你喜欢
  • 2018-08-04
  • 1970-01-01
  • 1970-01-01
  • 2019-04-18
  • 1970-01-01
  • 1970-01-01
  • 2020-05-08
  • 2017-11-07
  • 1970-01-01
相关资源
最近更新 更多