title: How do I receive messages from websocket server and populate angular component
body: <p>I am learning how to incorporate live chat into an Angular project using <a href="https://socket.io/" rel="nofollow noreferrer">Socket.IO</a> and following <a href="https://tutorialedge.net/typescript/angular/angular-socket-io-tutorial/" rel="nofollow noreferrer">This tutorial I found</a></p>
  
  <p>I incorporated an input box into my component and now I'm successfully sending a message from the component to the server. </p>
  
  <p><a href="https://i.stack.imgur.com/p50Wn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p50Wn.png" alt="Chat server working"></a></p>
  
  <p>The problem that I'm running into is that I don't know how to use the emit send the message back to the user and update the DOM. </p>
  
  <p>I'll run through my code. The chat box doesn't have its own component but eventually, it will. Here is the typescript code for where the chatbox lives. I'm creating a card game so you'll notice references to decks and dealers. </p>
  
  <pre><code>import { Component, OnInit, OnDestroy } from '@angular/core';
  import { DealerService } from '../services/dealer.service';
  import { ChatService } from '../services/chat.service';
  
  
  @Component({
    selector: 'app-blackjackgame',
    templateUrl: './blackjackgame.component.html',
    styleUrls: ['./blackjackgame.component.css']
  })
  export class BlackjackgameComponent implements OnInit, OnDestroy {
  
    constructor(private dealer: DealerService, private chat: ChatService) { }
  
    ngOnInit() {
      this.dealer.generateDeck();
      this.dealer.shuffle(5);
      this.chat.messages.subscribe(msg =&gt; {
        console.log(msg);
      });
  
    }
  
    // This is now working
    sendMessage(message: string) {
      this.chat.sendMsg(message);
    }
  
  
    // Is this proper way to do this? I'm not sure
    updateMessages(message: string) {
      console.log('message was emitted: ' + message);
    }
  
    ngOnDestroy() {
      // no longer needed since generateDeck has it's own destroy
      // this.deckService.destroy_deck();
    }
  
  }
  </code></pre>
  
  <p>I have two main services, chat service, and WebSocket service. </p>
  
  <p>The chat service looks like this</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { WebsocketService } from './websocket.service';
  import { Observable, Subject } from 'rxjs/Rx';
  
  @Injectable()
  export class ChatService {
  
    messages: Subject&lt;any&gt;;
  
    constructor(private wsService: WebsocketService) {
      this.messages = &lt;Subject&lt;any&gt;&gt;wsService
        .connect()
        .map((response: any): any =&gt; {
        return response;
      });
    }
  
    sendMsg(msg){
      this.messages.next(msg);
    }
  
  }
  </code></pre>
  
  <p>And my WebSocket service looks like this</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import * as io from 'socket.io-client';
  import { Observable } from 'rxjs/Observable';
  import * as Rx from 'rxjs/Rx';
  import { environment } from '../../environments/environment';
  
  
  @Injectable()
  export class WebsocketService {
  
    private socket; // socket that connects to our socket.io server
    constructor() { }
  
    connect(): Rx.Subject&lt;MessageEvent&gt; {
      this.socket = io(environment.ws_url);
  
      const observable = new Observable(observer =&gt; {
        this.socket.on('message', (data) =&gt; {
          console.log('Received a message from websocket service');
          observer.next(data);
        });
        return () =&gt; {
          this.socket.disconnect();
        };
      });
  
      const observer = {
        next: (data: Object) =&gt; {
          this.socket.emit('message', JSON.stringify(data));
        }
      };
  
      return Rx.Subject.create(observer, observable);
    }
  
  }
  </code></pre>
  
  <p>And finally, I have a websocket server written in plain javascript. You've seen part of it in my photo above. The full code looks like this</p>
  
  <pre><code>var app = require('express')();
  var http = require('http').Server(app);
  var io = require('socket.io')(http);
  
  
  
  /*io.on('connection', function(socket){
      console.log('Connection made');
      socket.on('chat message', function(msg){
          io.emit('chat message', msg);
      });
  });*/
  
  io.on('connection', function(socket){
      console.log('connection');
      socket.on('message', function(message){
          console.log('Message received: ' + message);
          io.emit('message', {type:'new-message', text:message});
      })
  })
  
  http.listen(5000, function(){
    console.log('listening on *:5000');
  });
  </code></pre>
  
  <p>So again, I have my websocket server logging when it receives a message. My question is, how do I go back the other way? I want to update my DOM in the component with the new message based on the emitted message from the WebSocket. Any suggestions will be greatly appreciated; I'm very new to this. </p>