插座.io没有连接Node.js服务器到React.js客户端

Question

所以我要尝试的是建立一个套接字。express服务器和react客户端的IO连接。也许还值得一提的是，客户端托管在netflix上，服务器托管在heroku上。实际的问题是客户端似乎用HTTP 101连接并接收到websocket消息的升级协议。但之后什么也没发生。没有"connection"或";connected"事件触发。也许有人能指出代码中的错误，或者能指导我解决问题。

服务器

/**
*  App Configuration
*/
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server, {
cors: {
origin: process.env.CLIENT_URL,
methods: ["GET", "POST"],
credentials: true
}
});
/**
* Socket IO
*/
io.on("connection", (socket: any) => {
console.log("Client Connected via Socket");

// Join a conversation
const { deviceId } = socket.handshake.query;
socket.join(deviceId);
// Leave the room if the user closes the socket
socket.on("disconnect", () => {
socket.leave(deviceId);
});
});
/**
* Server Activation
*/
app.listen(process.env.PORT, () => {
console.log(`Listening on port ${process.env.PORT}`);
});

const socketRef = useRef();
useEffect(() => {
// Creates a WebSocket connection
socketRef.current = io(process.env.REACT_APP_API, {
transports: ['websocket'],
query: { deviceId: 'test-id' }
});
socketRef.current.on('connect', () => {
console.log("connected");
});
// Listens for incoming messages
socketRef.current.on("message", (message) => {
console.log(message);
});

// Destroys the socket reference
// when the connection is closed
return () => {
socketRef.current.disconnect();
};
}, []);

编辑:添加关于websocket升级的重复http消息的图像。HTTP消息

Answer 1

将服务器激活行更改到下面

server.listen(process.env.PORT, () => {
console.log(`Listening on port ${process.env.PORT}`);
})