如何将 socket.io 与 Heroku 部署的 React Native 应用程序连接? [英] How to connect socket.io with a Heroku-deployed React Native app?

问题描述

我几乎用谷歌搜索来解决这个问题.似乎很多关于将 socket.io 与 React Native 连接的现有信息已经过时，或者我可能只是解释错误?

I have almost googled my fingers off trying to figure this out. It seems a lot of the existing info on connecting socket.io with React Native is outdated, or maybe I'm just interpreting things wrong?

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

I've managed to get the client-side connected (I'm getting the client console logs when I connect to my app). It seems to be the server-side that's giving me issues. Why is the data being emitted from the client not showing up as a log in my terminal? None of the related console.logs in my server.js are logging but the App.js console.logs are registering.

这是我完整的 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 };

我在客户端获取控制台日志就好了(例如，当我在博览会上打开我的应用程序时会显示连接到服务器"和你好:世界"的东西.但我没有得到服务器- 端控制台日志.

I am getting the console logs on the client side just fine (for instance, the "connected to server" and "hello: world" stuff is showing up when I open my app on expo. But I am not getting the server-side console logs.

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

What am I doing wrong - how do I get socket.io fully working with a deployed React-Native app?

我真的很感激任何帮助！我一直坚持这个.

I would really appreciate any help at all! I've been stuck on this forever.

推荐答案

我假设所有代码都可以工作，只是不是日志记录，因为这就是您要问的全部内容.问题是 Node 没有输出到浏览器的控制台.

I'm assuming all the code works, just not the logging since that's all you're asking about. The problem is Node doesn't output to your browser's console.

如果它部署在 heroku 上，那么您应该看到所有内容都记录在那里，否则您可以使用像 https://github.com/node-inspector/node-inspector 输出到浏览器.

If it's deployed on heroku then you should see everything being logged there, otherwise you can use libraries like https://github.com/node-inspector/node-inspector to output to your browser.

这篇关于如何将 socket.io 与 Heroku 部署的 React Native 应用程序连接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！