如何使用websockets将消息发送到后端

Question

I am trying to create real-time chat between Django backend and Angular 4 frontend using PostgreSQL database. Let's assume that I would like to create chatbot for instance like ALICE . I am not sure but it seems to me that the most optimal solution would be to use websockets? I would like to write message on frontend, press enter and send my message to backend. Then I would like to get a response. I am trying to do this in the way shown below, however I get error. I would like to input my own text on frontend, press enter and send it.

app.component.html:

<button (click)="sendMsg()">Send Message</button>

<h4>Type away! Press [enter] when done.</h4>
<div><key-up3 (keyup7)="send($event)"></key-up3></div>

app.component.ts:

import { Component } from '@angular/core';
import { WebsocketService } from './websocket.service';
import { ChatService } from './chat.service';
import { Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ WebsocketService, ChatService ]
})
export class AppComponent {

    constructor(private chatService: ChatService) {
        chatService.messages.subscribe(msg => {
      console.log("Response from websocket: " + msg);
        });
    }

    private message = {
        message: 'this is a test message'
    }

  sendMsg() {
        console.log('new message from client to websocket: ', this.message);
        this.chatService.messages.next(this.message);
        this.message.message = '';
    }

  send(msg) {
     this.message = msg;
     this.sendMsg();
  }

}

@Component({
  selector: 'key-up3',
  template: `
    <input #box (keyup.enter)="keyup7.emit(box.value)">
    <p>{{value}}</p>
  `
})
export class KeyUpComponent_v3 {
   @Output() keyup7 = new EventEmitter<string>();
}

websocket.service.ts:

import { Injectable } from '@angular/core';
import * as Rx from 'rxjs/Rx';

@Injectable()
export class WebsocketService {
  constructor() { }

  private subject: Rx.Subject<MessageEvent>;

  public connect(url): Rx.Subject<MessageEvent> {
    if (!this.subject) {
      this.subject = this.create(url);
      console.log("Successfully connected: " + url);
    }
    return this.subject;
  }

  private create(url): Rx.Subject<MessageEvent> {
    let ws = new WebSocket(url);

    let observable = Rx.Observable.create(
    (obs: Rx.Observer<MessageEvent>) => {
        ws.onmessage = obs.next.bind(obs);
        ws.onerror = obs.error.bind(obs);
        ws.onclose = obs.complete.bind(obs);
        return ws.close.bind(ws);
    })
let observer = {
        next: (data: Object) => {
            if (ws.readyState === WebSocket.OPEN) {
                ws.send(JSON.stringify(data));
            }
        }
    }
    return Rx.Subject.create(observer, observable);
  }

}

chat.service.ts:

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs/Rx';
import { WebsocketService } from './websocket.service';

const CHAT_URL = 'ws://localhost:8000/';

export interface Message {
    message: string
}

@Injectable()
export class ChatService {
    public messages: Subject<Message>;

    constructor(wsService: WebsocketService) {
        this.messages = <Subject<Message>>wsService
            .connect(CHAT_URL)
            .map((response: MessageEvent): Message => {
                let data = JSON.parse(response.data);
                return {
                    message: data.message
                }
            });
    }
}

UPDATE KeyUp.emit(box.value) in the template had upercase K. in the component was lowercase. However at this moment when I write something and press enter nothing happens. Any suggestions?

Error after update:

Answer 1

You could add an EventEmitter to your keyUp component

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'key-up3',
  template: `
    <input #box (keyup.enter)="keyUp.emit(box.value)">
    <p>{{value}}</p>
  `
})
export class KeyUpComponent_v3 {
   @Output() keyUp = new EventEmitter<string>();
}

then in your main component listen for that event and set the message value accordingly.You will want to make your message property public so it can be set the template.

<h4>Type away! Press [enter] when done.</h4>
<div><key-up3 (keyUp)="message = $event"></key-up3></div>

Additionally:

RxJS has a class called the WebSocketSubject, you can use that to send and receive messages from your server very easily, here is a quick example of a service.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class SocketServer {

    private webSocket$ = Observable.webSocket('ws://localhost:3000/');

    public asObservable(): Observable<any> {
        return this.webSocket$.retry();
    }

    public sendData(value) {
        this.webSocket$.next(value);
    }
}

.retry() will attempt to reconnect to the WebSocket if it becomes disconnected