如何建立从 angular-socketio 到 flask-socketio 的 websocket 连接

Question

我是网络套接字的新手，我正在使用 flask-socketio 实现网络套接字服务器，angular-socketio 作为客户端，

我在烧瓶中使用此代码

application.py

@socketio.on('connect', namespace='/test')
def test_connect():    
    print('Client connected')

我在 angular 服务中使用此代码连接到 flask 服务器

socket.service.ts

    import { Injectable } from "@angular/core";
    import * as io from "socket.io-client";
    import { Observable } from "rxjs";

    @Injectable({
      providedIn: "root"
    })
    export class SocketService {      
      private socket;

      constructor() {        
        this.socket = io("/test"); // i get example by connect using flask namespace
this.socket = io("localhost:5000"); // i tried this
this.socket = io(`/api`); // i also tried this

      }

      public sendMessage(message) {
        this.socket.emit("new-message", message);
      }

      public getMessages = () => {
        return Observable.create(observer => {
          this.socket.on("new-message", message => {
            observer.next(message);
          });
        });
      };
    }

我也尝试使用 localhost:5000 作为 URL 连接到 Flask 服务器，但它会导致 CORS 问题，在遇到该问题后我也尝试使用 '/[=33= 连接]' 来自下面的 proxy.config.json 作为 url

{
  "/api": {
  "target": "http://127.0.0.1:5000",
  "secure": false,
  "pathRewrite": {
      "^/api": ""
  }
  }
}

这是我的app.component

app.component.ts

import { Component } from "@angular/core";
import { SocketService } from "./socket.service";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "angularsocketio";

  constructor(private socketService: SocketService) {}
}

Answer 1

如果您需要跨域访问 Socket.IO 服务器，则需要对其进行适当配置。请参阅 documentation 中的 cors_allowed_origins 选项。

Socket.IO 服务的默认 URL 是 /socket.io。如果要使用不同的 URL，则需要告知客户端和服务器。对于服务器，这是 path 选项，也是 documented.

如何建立从 angular-socketio 到 flask-socketio 的 websocket 连接

How to establish websocket connection from angular-socketio to flask-socketio

flask

flask-socketio

angular

angular-socket-io