时间戳

首页 > 解决方案 > 我在为服务器工作的节点中使用socket.io，但无法连接到我的移动端，作为客户端反应本机

javascript - 我在为服务器工作的节点中使用socket.io，但无法连接到我的移动端，作为客户端反应本机

问题描述

这是我第一次在stackoverflow中发布我的问题。所以如果我错了请纠正我，我希望你们能帮助我。所以我对 socket.io-client 有问题，无法在 react native 中实现。我的代码中没有语法错误，可以在 expo 中运行良好。但是我无法将它连接到也使用 socket.io 的服务器节点 js。这是我的客户反应本机代码

    import React from 'react';
    import { StyleSheet, Text, View } from 'react-native';
    window.navigator.userAgent = 'react-native';
    import io from 'socket.io-client/dist/socket.io';

    export default class App extends React.Component {
      state = {
         name: 'bob'
      }

      constructor(){
         super();

         this.socket = io('localhost:3000',{jsonp: false});

         console.log('socket = ',this.socket);

         this.socket.on('update', () => this.setState({name: 'Nate'}));
      }

      render() {
        return (
          <View style={styles.container}>
            <Text>{this.state.name}</Text>
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
    });

这是我的服务器节点 js 代码

    var express = require('express');
    var app = express();
    var server = require('http').Server(app);
    var io = require('socket.io')(server);

    server.listen(3000);

    app.get('/', function (req, res) {
      res.sendfile(__dirname + '/index.html');
    });

    io.on('connection', function (socket) {
        console.log(socket.id);
        socket.on('update', () => {
          console.log('sending update');
          io.emit('update');
        });

        socket.on('sending', () =>{
          console.log('sending');
          io.emit('ending');
        });
    });

这是我的服务器节点 js 中的 index.html 代码

    <h1>Hello world </h1>

    <button>Update</button>

    <script src="/socket.io/socket.io.js"> </script>
    <script>
        var socket = io();
        var button = document.querySelector('button');
        button.onclick = function(){
            console.log('update');
            socket.emit('update');
            socket.on('ending',() => {
               console.log('ending');
            });
        }
    </script>

这是我的预期结果：
首先，我使用运行命令行节点 App.js 运行我的服务器节点 js，并使用 localhost:3000 在我的浏览器上打开它。
其次，我在我的设备上使用命令行 expo start 运行我的客户端 react native。
第三，当我点击浏览器上的按钮更新时，它会将我设备上的文本更改为 Nate。（这是我失败的地方）

顺便说一句，这是我的版本应用程序：
节点 8.11.3
expo 1.1.0-beta.4
socket.io-client 2.1.1
react-native-cli 2.0.1
react-native 0.55.4

这是我的 github，我的代码客户端反应原生：https ://github.com/nyomanyudis/albmus3 服务器节点 js：https ://github.com/nyomanyudis/serverSocketIO

标签： javascriptnode.jsreact-nativesocket.io

解决方案

我将发布一个答案（即使我们还没有答案），因为我需要发布建议的多行代码以进行进一步调试。我建议您在 React 客户端中添加它（注意添加http://到 URL）和所有新的事件处理程序以记录其他事件：

let socket = this.socket = io('http://localhost:3000',{jsonp: false});

socket.on('connect_error, function(e) {
    console.log('connect_error', e);
}).on('connect_timeout', , function() {
    console.log('connect_timeout');
}).on('connect', function() {
    console.log('connect');
}).on('error', function(e) {
    console.log('error', e);
}).on('disconnect', function() {
    console.log('disconnect');
}).on('reconnect', function(n) {
    console.log('reconnect', n);
}).on('reconnect_error', function(e) {
    console.log('reconnect_error', e);
}).on('reconnect_failed', function(e) {
    console.log('reconnect_failed', e);
});

然后，报告哪些消息显示在 React 客户端控制台中以及错误消息是什么。

编辑：听起来您收到有关客户端和服务器版本不兼容的消息。对于 socket.io，您应该确保您拥有完全相同版本的客户端和服务器代码。

推荐阅读