Question

我正在尝试创建一个Web应用程序，玩家可以在其中加入游戏，并且其姓名将显示在主板视图上。我正在尝试通过使用socket.io的React和Node.js + express实现这一点。

当前，当玩家提交他们的信息时，我向Node服务器发出一个事件，并将他们的信息推送到一系列连接的用户。然后通过API请求返回此数组。我的实现可以从桌面浏览器（Chrome，Firefox等）正常运行，但是，我无法使用移动浏览器（在这种情况下为Android上的Chrome）打开socket.io连接。

在两种情况下，我都通过导航到http://111.111.1.66:3000/（在端口3000上运行的React-app）来访问我的应用程序。我在所有设备上都连接到相同的网络，并且能够在所有浏览器（包括移动设备）上查看/导航我的应用程序。

当客户端连接时，我在服务器中记录一条“用户连接”消息。我可以从桌面浏览器中看到它正常工作，但是尝试在移动设备上连接时未记录任何消息。同样，尝试从移动浏览器提交播放器信息不会发出事件。

相关代码如下：

客户（即玩家从中提交信息的视图）：

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');

socket.io无法从移动浏览器连接

1 个答案: