WebSocket 连接到“wss://******/socket.io/?EIO=4&transport=websocket&sid=T2Sf_4oNIisxKLwsAAAK”失败

Question

我正在与 socket.io 建立 WebSocket 连接，当我登录时，出现此错误：

WebSocket connection to 'wss://******/socket.io/?EIO=4&transport=websocket&sid=T2Sf_4oNIisxKLwsAAAK' failed:websocket.js:54

但是随后建立了连接，尽管我不确定它是否正确完成。 它没有给我带来任何问题，但启动时总是首先出现该错误，然后一切正常。 但问题是，一旦我登录，错误发生后一切似乎都正常。 只是一开始就弹出这个错误，我想确保它在生产后不会引起任何问题。 我真的很感激你能提供的任何帮助。 提前致谢！

这是我的带有 express 的服务器代码：

const http = require('http');
const server = http.createServer(app);

const { Server } = require('socket.io')
const io = new Server(server)

这是我的客户端代码：

       var socket = io.(Config.getHost());
       socket.emit('connection', {
           console.log('*******');
       });
   
       socket.on('disconnect', function() {
           console.log('*******');
       });

Answer 1

我不知道这是否有帮助，但我的控制台没有错误。 就我自己而言，我的客户是一个 angular 项目。 所以我在服务器上建立了如下连接。

const app = require('express')();
const httpServer = require('http').createServer(app);
const cors = require('cors');
const io = require('socket.io')(httpServer, {
  cors: {
    origin : 'http://localhost:4200',
    methods: ["GET", "POST"],  
  },
});

const { instrument } = require("@socket.io/admin-ui");
const passport = require('passport');
const bcrypt = require('bcrypt');
const bodyParser = require("body-parser");
const LocalStrategy = require('passport-local').Strategy;
const port = 3000;
const shapes = {}; // Store shapes on the server
const { Pool } = require('pg')
const dotenv = require('dotenv');
dotenv.config();
const session = require('express-session');
const pgSession = require('connect-pg-simple')(session);
app.use(require('express').json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cors({
  origin : 'http://localhost:4200',
  methods: ["GET", "POST"],
}));

io.on('connection', (socket) => {
    const shapeTypes = ['Circle', 'Rect', 'Line', 'Arrow', 'Text'];

    shapeTypes.forEach((shapeType) => {
      socket.on(`create${shapeType}`, (shapeData) => {
        shapes[shapeData.id] = shapeData;
        io.emit(`create${shapeType}`, shapeData);
      });

      socket.on(`update${shapeType}`, (shapeData) => {
        shapes[shapeData.id] = shapeData;
        io.emit(`update${shapeType}`, shapeData);
      });
    });
      
    // Handle disconnection
    socket.on('disconnect', () => {
      console.log('A client disconnected');
    });

});

instrument(io, {
  auth: false,
  mode: "development",
});
httpServer.listen(port, () => console.log(`listening on port ${port}`));

在我的 angular 中，我只做了简单的连接。

import { io } from 'socket.io-client';
public io = io('http://localhost:3000'); // I initialized this in the constructor

我可以做 io.emit 和 io.on

Answer 2

只是为了澄清问题，通过使用以下设置使用 WebSocket 协议在 httpd.conf 文件中配置代理来解决问题：

ProxyPass /socket.io ws://127.0.0.1:5001/socket.io connectiontimeout=3000 timeout=3000
ProxyPassReverse /socket.io ws://127.0.0.1:5001/socket.io

这允许服务器和应用程序之间成功通信。我希望这个解决方案可以帮助将来遇到类似问题的其他人！