title: How to establish websocket connection from angular-socketio to flask-socketio
body: <p>I am new to web socket, i'm implementing web socket server using flask-socketio, and angular-socketio as client,</p>
  
  <p>i use this code in flask</p>
  
  <blockquote>
    <p>application.py</p>
  </blockquote>
  
  <pre><code>@socketio.on('connect', namespace='/test')
  def test_connect():    
      print('Client connected')
  </code></pre>
  
  <p>and i use this code in angular service to connect to flask server</p>
  
  <blockquote>
    <p>socket.service.ts</p>
  </blockquote>
  
  <pre><code>    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 = () =&gt; {
          return Observable.create(observer =&gt; {
            this.socket.on("new-message", message =&gt; {
              observer.next(message);
            });
          });
        };
      }
  </code></pre>
  
  <p>i also try to connect to flask server using localhost:5000 as the URL, but it leads CORS problem, and after facing that issue i also try to connect using '/api' from proxy.config.json below as the url</p>
  
  <pre><code>{
    "/api": {
    "target": "http://127.0.0.1:5000",
    "secure": false,
    "pathRewrite": {
        "^/api": ""
    }
    }
  }
  </code></pre>
  
  <p>this is my app.component</p>
  
  <blockquote>
    <p>app.component.ts</p>
  </blockquote>
  
  <pre><code>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) {}
  }
  </code></pre>