Angular使用socket.io-client无法连接WebSocket服务器问题

核心问题在于Quarkus默认提供的是标准JSR-356 WebSocket实现，而Socket.IO是基于WebSocket之上的自定义协议（包含额外的握手、心跳和帧格式），两者并不直接兼容。Insomnia使用的是原生WebSocket客户端，所以能正常连接；但socket.io-client是专门针对Socket.IO协议的客户端，直接连接标准WebSocket服务器会出现协议不匹配的情况，导致前端无法触发连接事件。

解决思路 #

1. 在Quarkus中适配Socket.IO协议 #

如果坚持要使用Socket.IO客户端，需要在Quarkus端搭建Socket.IO服务器：

• 引入Socket.IO相关的依赖（以Maven为例）：

  <dependency>
      <groupId>io.socket</groupId>
      <artifactId>socket.io-server</artifactId>
      <version>4.7.2</version>
  </dependency>
  <dependency>
      <groupId>io.quarkus</groupId>
      <artifactId>quarkus-netty</artifactId>
  </dependency>
  

• 编写Socket.IO启动代码：

  import io.socket.socketio.server.SocketIoServer;
  import jakarta.enterprise.context.ApplicationScoped;
  import jakarta.enterprise.event.Observes;
  import io.quarkus.runtime.StartupEvent;
  
  @ApplicationScoped
  public class SocketIoBootstrap {
  
      void onStartup(@Observes StartupEvent event) {
          SocketIoServer server = new SocketIoServer();
          server.addConnectListener(client -> {
              System.out.println("Client connected: " + client.getId());
              client.send("welcome", "Hello from Quarkus Socket.IO");
          });
          server.listen(8080);
      }
  }
  

• 前端保持使用socket.io-client或ngx-socket-io，连接路径改为http://localhost:8080（Socket.IO默认路径）

2. 前端改用原生WebSocket客户端 #

如果不需要Socket.IO的额外特性（如房间、自动重连降级），直接使用标准WebSocket即可：

• Angular中使用原生WebSocket API的示例：

  import { Injectable } from '@angular/core';
  
  @Injectable({ providedIn: 'root' })
  export class WebSocketService {
      private socket: WebSocket | null = null;
  
      connect() {
          this.socket = new WebSocket('ws://localhost:8080/your-websocket-endpoint');
          
          this.socket.onopen = () => {
              console.log('WebSocket connected');
              this.socket?.send('Hello from Angular');
          };
  
          this.socket.onmessage = (event) => {
              console.log('Received message:', event.data);
          };
  
          this.socket.onerror = (error) => {
              console.error('WebSocket error:', error);
          };
  
          this.socket.onclose = () => {
              console.log('WebSocket closed');
          };
      }
  
      sendMessage(message: string) {
          if (this.socket?.readyState === WebSocket.OPEN) {
              this.socket.send(message);
          }
      }
  }
  

• 在组件中注入该服务并调用connect()方法即可

3. 排查连接细节（用于验证问题） #

• 打开浏览器开发者工具的Network标签，筛选WS或XHR类型：
  • 如果用socket.io-client，会先发起GET /socket.io/?EIO=4&transport=polling的请求，查看该请求的响应状态和内容
  • 检查Quarkus日志，确认收到的请求路径和协议类型，标准WebSocket请求会带有Upgrade: websocket头

内容的提问来源于stack exchange，提问作者Flotares