socket.io не будет подключаться из мобильного браузера

Question

Я пытаюсь создать веб-приложение, в котором игроки могут присоединиться к игре, и их имя будет отображаться на основной панели. Я пытаюсь сделать это с помощью React и Node.js + express с использованием socket.io.

В настоящее время, когда игрок отправляет свою информацию, я отправляю событие на сервер узла, и его информация передается массиву подключенных пользователей. Этот массив затем возвращается через запрос API. Моя реализация работает, как и ожидалось, в настольных браузерах (Chrome, Firefox и т. Д.), Однако я не могу открыть соединение socket.io с помощью мобильных браузеров (в данном случае Chrome на Android).

Я получаю доступ к своему приложению в обоих случаях, перейдя к http://111.111.1.66:3000/ (приложение React, работающее на порте 3000). Я подключен к одной и той же сети на всех устройствах, и я могу просматривать / перемещаться по своему приложению во всех браузерах (включая мобильный).

Когда клиент подключается, я регистрирую сообщение «пользователь подключен» на сервере. Я вижу, как это работает должным образом в браузерах рабочего стола, но при попытке подключения на мобильном устройстве не регистрируется ни одно сообщение. Аналогичным образом, попытка отправить информацию об игроке из мобильного браузера не приводит к событию.

Соответствующий код выглядит следующим образом:

Клиент (то есть вид, из которого игрок представляет свою информацию):

import React, { Component } from 'react';
import socketClient from 'socket.io-client';

class PlayerJoin extends Component {
  constructor(props) {
    super(props);

    const socket = socketClient('http://localhost:5000');

    this.state = {
      socket,
      name: null,
    };
  }

  handleChange = (e, field) => {
    ...collapsed...
  }

  handleSubmit = () => {
    const { socket, name } this.state;
    const payload = {
      name,
    };

    socket.emit('playerJoin', payload);
  }

  render() {

    return (
      <form className="playerForm">
        <input className="nameInput" onChange={(e) => this.handleChange(e, 'name')} placeholder="Enter name" autoFocus type="text" />
        <button type="button" onClick={this.handleSubmit}>Submit</button>
      </form>
    );
  }
}

Сервер:

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

const users = [];

app.get('/getPlayers', function(req, res){
  res.send(JSON.stringify(users));
});

io.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('playerJoin', (player) => {
    users.push(player);
    socket.broadcast.emit('listUpdate', users); // the main view listens for this event
  });
});

http.listen(5000, () => {
  console.log('listening on port 5000');
});

Answer 1

Попробуйте изменить это

const socket = socketClient('http://localhost:5000');

Для

const socket = socketClient('http://<ip_of_device_where_your_node_server_is_running>:5000');