title: In Angular (v6), socket.io 'on' method's (socket.on()) callback function is not getting called for 'message' type
body: <p>I am working on a Demo WebSocket app. The tech stack consist of following:</p>
  
  <p>Frontend:</p>
  
  <ul>
  <li>Angular(v6)</li>
  <li>Socket.io</li>
  </ul>
  
  <p>Web Server:</p>
  
  <ul>
  <li>Nginx</li>
  </ul>
  
  <p>Backend:</p>
  
  <ul>
  <li>Flask</li>
  <li>Flask-Socketio</li>
  <li>uWSGI</li>
  </ul>
  
  <p>I am able to establish a WebSocket Connection and also able to send/receive message from my web app. I can see the message being sent/received in the<code>Chrome -&gt; Network -&gt; WS</code> section as shown below.</p>
  
  <p><a href="https://i.stack.imgur.com/8v2Wk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8v2Wk.png" alt="enter image description here"></a></p>
  
  <p>So, I am sending <code>Hey!!</code> and receiving back <code>'message', 'my message'</code>. This part looks alright to me. The <strong>issue</strong> is that now I want to take this <code>incoming message</code> and display it in my app. However, I am <strong>not</strong> able to store this message or <code>console.log()</code> the incoming response from server as the <code>socketio.on('message', callback())</code> callback method is not getting fired, which essentially has the logic to process the incoming message as shown below:</p>
  
  <blockquote>
    <p>This is the partial code block from <code>app.service.ts</code> that is <strong>not</strong> working. Complete code snippet is pasted below.</p>
  </blockquote>
  
  <pre><code> public onMessage(): Observable&lt;any&gt; {
  return new Observable&lt;any&gt;(observer =&gt; {
    console.log('hereeee');// This console happens
    // This below method is not firing
    this.socket.on('message', (data: any) =&gt; {
      console.log('Received a message from websocket service');
      observer.next(data);
    });
  });
  </code></pre>
  
  <p>}</p>
  
  <p>I am pasting complete server and client code snippets below.</p>
  
  <p>Server:</p>
  
  <pre><code>@socketio.on('message', namespace='/websocket_test')
  def msg(msg):
      socketio.emit('message', 'my message', room=request.sid)
  </code></pre>
  
  <p>Client:</p>
  
  <p>I am using Angular + RxJS to define my <code>socket.io</code> service methods. Also, I have added <code>comments</code> in snippets below to indicate what is working and what is not.</p>
  
  <blockquote>
    <p>app.service.ts</p>
  </blockquote>
  
  <pre><code>import {HttpClient} from '@angular/common/http';
  import {Injectable} from '@angular/core';
  import {Observable} from 'rxjs';
  import * as socketIo from 'socket.io-client';
  
  export enum Event {
    CONNECT = 'connect',
    DISCONNECT = 'disconnect'
  }
       @Injectable()
          export class AppService {
        constructor(private http: HttpClient) {
        }
  
        private socket;
  
        public initSocket(): void {
          this.socket = socketIo('/websocket_test');
        }
  
        // This method is used to send message to backend
        public sendMe(message: any): void {
          this.socket.emit('message', {data: message});
        }
  
        public onMessage(): Observable&lt;any&gt; {
          return new Observable&lt;any&gt;(observer =&gt; {
            console.log('hereeee'); // This console happens
            // This below method is not firing
            this.socket.on('message', (data: any) =&gt; {
              console.log('Received a message from websocket service');
              observer.next(data);
            });
          });
        }
  
        // This gets called on connect and disconnect event.
        public onEvent(event: Event): Observable&lt;any&gt; {
          return new Observable&lt;Event&gt;(observer =&gt; {
            this.socket.on(event, () =&gt; observer.next());
          });
        }
  
      }
  </code></pre>
  
  <blockquote>
    <p>app.component.ts</p>
  </blockquote>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {AppService} from './app.service';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  
  export class AppComponent implements OnInit {
    messages = [];
    isConnected: boolean;
  
    constructor(private appService: AppService) {
    }
  
    ngOnInit() {
      this.initIoConnection();
    }
  
    private initIoConnection(): void {
      this.appService.initSocket();
  
      // This happens
      this.appService.onEvent(Event.CONNECT)
        .subscribe(() =&gt; {
          this.isConnected = true;
          console.log('connected');
        });
  
      this.appService.onMessage()
        .subscribe((message: any) =&gt; {
          // not getting called
          console.log('Message', message);
          this.messages.push(message);
          // console.log(this.messages);
        });
  
      this.appService.onEvent(Event.DISCONNECT)
        .subscribe(() =&gt; {
          this.isConnected = false;
          console.log('disconnected');
        });
    }
  
    public myMessage(message: string): void {
      if (!message) {
        return;
      }
  
      this.appService.sendMe({
        from: this.user,
        content: message
      });
      this.messageContent = null;
    }
  }
  
  export enum Event {
    CONNECT = 'connect',
    DISCONNECT = 'disconnect'
  }
  </code></pre>
  
  <p>I have tried few things to figure out the issue but with no luck. If anyone is familiar with this issue or has any idea on what I am doing wrong, Please comment here. Any input will be appreciated. Let me know if any additional details is needed. Thanks! </p>