sockeIO连接失败

Question

使用socketIO通信时，一直连不上服务端，我使用其他客户端的连接是可以的
服务端代码

// Setup basic express server
const express = require('express');
const app = express();
const path = require('path');
const server = require('http').createServer(app);
const io = require('socket.io')(server);
const port = process.env.PORT || 8081;

server.listen(port, () => {
  console.log('Server listening at port %d', port);
});

// Routing

app.use(express.static(path.join(__dirname, 'public')));
app.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By",' 3.2.1');
  next();
});
app.use(function (req, res, next) {
  res.set('Access-Control-Allow-Credentials', true)
  res.set('Content-Type', 'text/plain; charset=UTF-8')
  next()
})
// Chatroom

let numUsers = 0;

io.on('connection', (socket) => {
  console.log('链接成功')
  let addedUser = false;

  // when the client emits 'new message', this listens and executes
  socket.on('new message', (data) => {
    // we tell the client to execute 'new message'
    socket.broadcast.emit('new message', {
      username: socket.username,
      message: data
    });
  });

  // when the client emits 'add user', this listens and executes
  socket.on('add user', (username) => {
    console.log(username);
    if (addedUser) return;

    // we store the username in the socket session for this client
    socket.username = username;
    ++numUsers;
    addedUser = true;
    socket.emit('login', {
      numUsers: numUsers
    });
    // echo globally (all clients) that a person has connected
    socket.broadcast.emit('user joined', {
      username: socket.username,
      numUsers: numUsers
    });
  });

  // when the client emits 'typing', we broadcast it to others
  socket.on('typing', () => {
    socket.broadcast.emit('typing', {
      username: socket.username
    });
  });

  // when the client emits 'stop typing', we broadcast it to others
  socket.on('stop typing', () => {
    socket.broadcast.emit('stop typing', {
      username: socket.username
    });
  });

  // when the user disconnects.. perform this
  socket.on('disconnect', () => {
    console.log('断开');
    if (addedUser) {
      --numUsers;

      // echo globally that this client has left
      socket.broadcast.emit('user left', {
        username: socket.username,
        numUsers: numUsers
      });
    }
  });
});

客户端代码

import React, { Component } from 'react';
// import { StyleSheet, Text, View } from 'react-native';
import {io} from 'socket.io-client';

const socket = io("/socket"); // replace with the IP of your server, when testing on real devices

export default class App extends Component {
  constructor(props: any) {
    super(props);
    this.state = {
      connected: socket.connected,
      currentTransport: socket.connected ? socket.io.engine.transport.name : '-',
      lastMessage: ""
    };
  }
  
  componentDidMount() {
    socket.on('connect', () => this.onConnectionStateUpdate());
    socket.on('disconnect', () => this.onConnectionStateUpdate());
    socket.on('message', (content) => this.onMessage(content));
  }

  componentWillUnmount() {
    socket.off('connect');
    socket.off('disconnect');
    socket.off('message');
  }

  onConnectionStateUpdate() {
    console.log('12312312312312321');
    
    this.setState({
      connected: socket.connected,
      currentTransport: socket.connected ? socket.io.engine.transport.name : '-'
    });
    if (socket.connected) {
      socket.io.engine.on('upgrade', () => this.onUpgrade());
    } else {
      socket.io.engine.off('upgrade');
    }
  }

  onMessage(content: any) {
    this.setState({
      lastMessage: content
    });
  }

  onUpgrade() {
    this.setState({
      currentTransport: socket.io.engine.transport.name
    });
  }

  render() {
    return (
      <p style={styles.container}>
        {/* <p>State: { this.state.connected ? 'Connected' : 'Disconnected' }</p>
        <p>Current transport: { this.state.currentTransport }</p>
        <p>Last message: { this.state.lastMessage }</p> */}
      </p>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
};

这个客户端代码是从成功连接的地方拷贝过来的，但是在这个项目中还是无法连接，在network中的请求中发现response的connection为close，并且network中的ws返回WebSocket is closed before the connection is established，令我很不解的是同一个服务端的代码，并且前端代码也是一样的为什么连接不上，劳烦各位帮帮忙，看看问题出在哪里

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 以下回答来自chatgpt:

  首先，可能会有多种原因导致这种问题的出现，以下是一些常见的可能性和可能的解决方案：

  1. 版本问题：检查服务端和客户端的socketIO版本是否匹配。如果他们不匹配，可能会导致连接问题。如果发现版本不匹配，则需要更新客户端或服务端版本，以确保两者版本一致。

  2. 防火墙问题：如果你的服务器和客户端不在同一个网络环境中，比如一个在局域网中，一个在互联网中，那么防火墙可能会阻止连接。这时需要确保防火墙允许socketIO流量通过。你可以在服务端和客户端的机器上打开相应的端口，确保它们可以彼此通信。

  3. SSL证书问题：如果使用了SSL证书，可能会导致连接问题。确保SSL证书配置正确。

  4. 数据交换问题：在检查前面的问题之后，如果你仍然找不到问题所在，那么你可以尝试在客户端和服务端之间传递一些测试数据（例如文本消息），确保数据可以正常到达并返回。如果你发现它们可以相互通信，那么问题可能是出现在你的socketIO代码中。你可以检查你的代码实现并确保它们没有任何问题。

  以下是一个可能的解决方案，你可以尝试执行以下步骤来解决这个问题：

  1. 确保你的代码的版本是匹配的。例如，确保你的socketIO客户端使用的是与你的服务端相同的版本。

  2. 检查防火墙设置。确保你的防火墙设置允许socketIO流量通过。

  3. 确保SSL证书配置正确。

  4. 尝试传递一些测试数据。如果数据可以正常到达并返回，那么你的代码实现可能存在问题。

  如果上述步骤都没有解决问题，你可以尝试将代码上传到GitHub或其他社区，并请求其他开发者帮助你找到问题所在。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^