我正在为服务器工作的节点中使用socket.io,但是无法连接到我的移动设备本地反应作为客户端

时间:2018-07-29 03:59:15

标签: javascript node.js react-native socket.io

这是我第一次在stackoverflow中发布我的问题。因此,如果我写错了,请纠正我,希望大家能帮助我。所以我对在本机中实现的socket.io-client有问题。我的代码中没有语法错误,可以在expo中很好地运行。但是我也无法将其连接到使用socket.io的服务器节点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代码

    <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>

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

var status = [1,2,3];

这是我的期望结果:
首先,我使用运行命令行节点App.js运行服务器节点js,并在浏览器中使用localhost:3000打开它。
其次,我在设备上通过命令行expo start运行本机客户端响应。
第三,当我单击浏览器上的按钮更新时,它将设备上的文本更改为Nate。 (这是我失败的地方)

顺便说一句,这是我的版本应用程序:
节点8.11.3
博览会1.1.0-beta.4
socket.io-client 2.1.1
react-native-cli 2.0.1
反应本色0.55.4

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

2 个答案:

答案 0 :(得分:0)

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

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,应确保您拥有与客户端和服务器代码完全相同的版本。

答案 1 :(得分:-1)

这是我在代码中添加jfriend00的方式。只是为了确保我没有加错。

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

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

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