socket.io 客户端事件未触发

Question

我正在尝试在未连接服务器的情况下（故意）运行我的客户端，并捕获 ERR_CONNECTION_REFUSED 错误并将其显示给用户。我读到here，这可以使用套接字事件来实现，特别是connect_error

在我的代码下面，我永远无法触发事件并在其中显示控制台日志。 logging this.io.socket 会打印内容，但没有任何事件可以打印。这是为什么呢？

$.ajax(args)
        .done((msg) => {
          this.io.socket.on('connect', msg => {
            console.log('connect socket io', msg)
          })
          resolve(msg);
        })
        .fail((jqXHR, msg) => {
          return new Promise((resolve, reject) => {
            console.log('inside promise of fail() - this.io.socket', this.io.socket) // this will log data to console

            this.io.socket.on('connect_error', msg => {
              console.log('connect_error socket io', msg)
            })

            this.io.socket.on('connect_failed', (msg) => {
              console.log('connect_failed', msg);
            });

            // return some error here for user
          })
        });

Answer 1

据我所知，只有在 first ajax 调用得到错误响应时，您才尝试连接事件处理程序。这不会导致任何 socket.io 事件处理程序被启动。

将事件处理程序移动到初始化套接字实例的代码中。

请参阅下面的完整示例，其中所有 manager 和 socket 事件都将记录到控制台。

$.ajax(args)
    .done((msg) => {
        // connect to your server
        const socket = io('http://localhost:3000', {
            transports: ['websocket']
        });

        // manager events
        //_________________________________________________________________________________________________
        socket.io.on('connect_error', (err) => {
            console.error(`manager:connect_error ${err}`);
        });

        socket.io.on('connect_timeout', () => {
            console.error(`manager:connect_timeout`);
        });

        socket.io.on('reconnect_attempt', (attempt) => {
            console.error(`manager:reconnect_attempt ${attempt}`);
        });

        socket.io.on('reconnecting', (attempt) => {
            console.error(`manager:reconnecting ${attempt}`);
        });

        socket.io.on('reconnect_error', (err) => {
            console.error(`manager:reconnect_error ${err}`);
        });

        socket.io.on('reconnect_failed', () => {
            console.error(`manager:reconnect_failed`);
        });
        //_________________________________________________________________________________________________

        // socket events
        //_________________________________________________________________________________________________
        socket.on('connect', () => {
            console.log(`socket:connect ${socket.connected}`);
        });

        socket.on('connect_error', (err) => {
            console.error(`socket:connect_error ${err}`);
        });

        socket.on('connect_timeout', (timeout) => {
            console.error(`socket:connect_timeout ${timeout}`);
        });

        socket.on('error', (err) => {
            console.error(`socket:error ${err}`);
        });

        socket.on('disconnect', (reason) => {
            console.info(`socket:disconnect ${reason}`);
            if (reason === 'io server disconnect') {
                // the disconnection was initiated by the server, you need to reconnect manually
                socket.connect();
            }
            // else the socket will automatically try to reconnect
        });

        socket.on('reconnect', (attempt) => {
            console.error(`socket:reconnect ${attempt}`);
        });

        socket.on('reconnect_attempt', (attempt) => {
            console.error(`socket:reconnect_attempt ${attempt}`);
        });

        socket.on('reconnecting', (attempt) => {
            console.error(`socket:reconnecting ${attempt}`);
        });

        socket.on('reconnect_error', (err) => {
            console.error(`socket:reconnect_error ${err}`);
        });

        socket.on('reconnect_failed', () => {
            console.error(`socket:reconnect_failed`);
        });
        //_________________________________________________________________________________________________

        // custom events
        //_________________________________________________________________________________________________
        socket.on('hello', (message) => {
            console.info(message);

            socket.emit('hello', {foo: 'baz'});
        });
        //_________________________________________________________________________________________________

        resolve(msg);
    })
    .fail((jqXHR, msg) => {
        console.error(msg);
    });