Angular无法连接Flask SocketIO WebSocket 问题求助

问题场景 #

后端用Flask-SocketIO搭建了WebSocket服务，用原生SocketIO脚本可以正常连接通信，但Angular用WebSocketSubject直接连接时失败，后端控制台输出400错误日志。

后端（Flask-SocketIO）代码 #

app = Flask(__name__)
CORS(app)
socketio = SocketIO(app, cors_allowed_origins="*")

# 自定义WebSocket连接事件处理器
@socketio.on('connect')
def handle_connect():
    print('WebSocket客户端已连接')

# 自定义事件处理器
@socketio.on('my_event')
def handle_my_event(data):
    print('收到自定义事件: ' + data)
    emit('my_response', '服务器已接收: ' + data, broadcast=True)


socketio.run(app, debug=True)

Angular前端代码（无法连接） #

public connect(): Observable<any> {
  this.socket$ = new WebSocketSubject('ws://127.0.0.1:5000');
  return this.socket$.asObservable()
}

后端错误日志 #

(8280) accepted ('127.0.0.1', 46326)
127.0.0.1 - - [12/Aug/2023 15:39:16] "GET / HTTP/1.1" 400 359 0.001002

可正常连接的原生SocketIO脚本 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.3/socket.io.js"></script>
<script>
    var socket = io.connect('ws://127.0.0.1:5000');

    socket.on('connect', function() {
        console.log('WebSocket已连接');
        socket.emit('my_event', 'Hello, Server!');
    });

    socket.on('my_response', function(data) {
        console.log('收到服务器响应:', data);
    });
</script>

核心原因 #

你混淆了原生WebSocket协议和SocketIO协议：

• Flask-SocketIO不是纯原生WebSocket服务器，它实现的是SocketIO协议——这是一种在WebSocket基础上封装了握手流程、事件编码、 fallback机制的自定义协议，和原生WebSocket不兼容。
• 原生SocketIO脚本用的是官方io客户端，它会自动完成SocketIO的握手、协议协商，所以能正常连接。
• Angular的WebSocketSubject只是原生WebSocket的封装，完全不懂SocketIO的自定义规则，直接发起连接时，后端收到的不是预期的SocketIO握手请求，因此返回400错误。

解决方案 #

要让Angular和Flask-SocketIO通信，必须使用Angular版的SocketIO客户端，而非原生WebSocket：

1. 安装依赖

npm install ngx-socket-io socket.io-client

2. 在AppModule中配置SocketIO

// app.module.ts
import { NgModule } from '@angular/core';
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';

// 配置后端地址
const socketConfig: SocketIoConfig = { url: 'http://127.0.0.1:5000', options: {} };

@NgModule({
  imports: [SocketIoModule.forRoot(socketConfig)],
  // ...其他模块声明
})
export class AppModule { }

3. 在组件中使用SocketIO客户端

import { Component } from '@angular/core';
import { Socket } from 'ngx-socket-io';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  constructor(private socket: Socket) {}

  connect(): Observable<any> {
    // 监听连接成功事件
    this.socket.on('connect', () => {
      console.log('SocketIO连接成功');
      // 发送自定义事件到后端
      this.socket.emit('my_event', '来自Angular的消息!');
    });

    // 返回服务器响应的Observable
    return this.socket.fromEvent('my_response');
  }
}

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