cannot connect to socket.io server in client side using ngrok

问题

I'm trying to connect to the socket server in react-native,

I'm using ngrok and it's the log when the mobile app running

  HTTP Requests                                                                                                          
-------------                                                                                                          
                                                                                                                       
POST /io/webrtc/               400 Bad Request                                                                         
GET  /io/webrtc/               200 OK                                                                                  

{
    "code": 2,
    "message": "Bad handshake method"
}

although the Web app, it works very well!

Code snippet

Server.js

const express = require('express');

let io = require('socket.io')({
  path: '/io/webrtc',
});

const app = express();
const port = 8080;

//https://expressjs.com/en/guide/writing-middleware.html
app.use(express.static(__dirname + '/build'));
app.get('/', (req, res, next) => {
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept'
  );
  res.sendFile(__dirname + '/build/index.html');
});

const server = app.listen(port, () =>
  console.log(`Example app listening on port ${port}!`)
);

io.listen(server);

const peers = io.of('/webrtcPeer');

let connectedPeers = new Map();

peers.on('connection', (socket) => {
  console.log(socket.id);
  socket.emit('connection-success', { success: socket.id });
  connectedPeers.set(socket.id, socket);

  socket.on('disconnect', () => {
    console.log('disconnected!');
    connectedPeers.delete(socket.id);
  });

  socket.on('offerOrAnswer', (data) => {
    console.log('data-offer||Answer', data);
    // send to other peers if any
    for (const [socketID, socket] of connectedPeers.entries()) {
      // don't send to self
      if (socketID !== data.socketID) {
        console.log('not-offerOrAnswer', socketID, data.payload.type);
        socket.emit('offerOrAnswer', data.payload);
      }
    }
  });

  socket.on('candidate', (data) => {
    // send candidate to the other peers if any
    for (const [socketID, socket] of connectedPeers.entries()) {
      // don't send to self
      if (socketID !== data.socketID) {
        console.log('dont_send_to_self-candidate', socketID, data.payload.type);
        socket.emit('candidate', data.payload);
      }
    }
  });
});
 

mobile App (React Native)

App.js

import React, {useRef, useState, useEffect} from 'react';
import {View, Dimensions, Text} from 'react-native';
import io from 'socket.io-client';

const {width, height} = Dimensions.get('window');
const App = () => {
 ...
  const socket = useRef();

  const serverIP = 'https://22997aecc45f.ngrok.io';

  useEffect(() => {
    socket.current = io.connect(`${serverIP}/webrtcPeer`, {
      path: '/io/webrtc',
      query: {},
    });

    socket.current.on('connection-success', (success) => {
      console.log('success', success); // not logged :)
    });
  }, []);

  return (
    <View>
      <Text>App</Text>
    </View>
  );
};

export default App;

package.json // React Native

"react": "16.13.1",
"react-native": "0.63.3",
"react-native-webrtc": "^1.84.1",
"socket.io-client": "2.3.0"

package.json // web App Reactjs

"dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "socket.io-client": "^3.0.1",
    "web-vitals": "^0.2.4"
  },
  "devDependencies": {
    "express": "^4.17.1",
    "socket.io": "^3.0.1"
  }

#Edit

The issue solved after downgrade socket server and client to 2.3.0 :)

来源：https://stackoverflow.com/questions/64776758/cannot-connect-to-socket-io-server-in-client-side-using-ngrok