typescript Angular 4 中的 WebSocket

WebSocket in Angular 4

提问by Laiso

I am creating a chat application with Angular 4 and websocket. For this, I've followed this Angular websocket tutorial

我正在使用 Angular 4 和 websocket 创建一个聊天应用程序。为此，我遵循了这个Angular websocket 教程

Here is the WebsocketServicesource code:

这是WebsocketService源代码：

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);
  }

}

And it is my ChatService:

这是我的ChatService：

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

const CHAT_URL = 'ws://echo.websocket.org/';

export interface Message {
    author: string,
    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 {
                    author: data.author,
                    message: data.message
                }
            });
    }
}

It works fine, but I want to detect the connection status. I want to know if the connection has been interrupted or the server is down.

它工作正常，但我想检测连接状态。我想知道连接是否已中断或服务器是否已关闭。

For that, I tried to implement an isServerOn()function inside the WebsocketServiceclass like this:

为此，我尝试isServerOn()在WebsocketService类中实现一个函数，如下所示：

isServerOn(): Observable<boolean> {
    return Observable.of(!!this.subject);
}

But it has not resolve the problem. Is there anyone who has encourtered the same problem?

但它并没有解决问题。有没有人遇到过同样的问题？

Thank you in advance.

先感谢您。

回答by luixaviles

I suggest you use type definitions for socket.io-clientin your Angular application. Then define a service as follows:

我建议您在 Angular 应用程序中使用socket.io-client 的类型定义。然后定义一个服务如下：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { Message } from '../model/message';
import { Event } from '../model/event';

import * as socketIo from 'socket.io-client';

const SERVER_URL = 'https://yourserverhost.com';

@Injectable()
export class SocketService {
    private socket;

    public initSocket(): void {
        this.socket = socketIo(SERVER_URL);
    }

    public send(message: Message): void {
        this.socket.emit('message', message);
    }

    public onEvent(event: Event): Observable<any> {
        return new Observable<Event>(observer => {
            this.socket.on(event, () => observer.next());
        });
    }
}

Define an Event enum:

定义一个事件枚举：

export enum Event {
    CONNECT = 'connect',
    DISCONNECT = 'disconnect'
}

Then subscribeto your service functions from your Angular component:

然后subscribe从您的 Angular 组件到您的服务功能：

export class ChatComponent implements OnInit {
  constructor(private socketService: SocketService) { }

   ngOnInit(): void {
    this.initIoConnection();
  }

  private initIoConnection(): void {
    this.socketService.initSocket();

    this.ioConnection = this.socketService.onMessage()
      .subscribe((message: Message) => {
        this.messages.push(message);
      });


    this.socketService.onEvent(Event.CONNECT)
      .subscribe(() => {
        console.log('Connected to the server');
      });

    this.socketService.onEvent(Event.DISCONNECT)
      .subscribe(() => {
        console.log('Disconnected');
      });
  }
}

Find the complete chat project, which is using Node.js, WebSockets and Angular here: https://github.com/luixaviles/socket-io-typescript-chat

在此处找到使用 Node.js、WebSockets 和 Angular 的完整聊天项目：https: //github.com/luixaviles/socket-io-typescript-chat

回答by Patrick Kelleter

I am not sure what you want to achieve with

我不确定你想达到什么目的

 return Observable.of(!!this.subject);

I do not think that it does what you think it does. Instead you should rather create your own BehaviorSubject and return the corresponding Observable like

我不认为它会做你认为的那样。相反，您应该创建自己的 BehaviorSubject 并返回相应的 Observable，例如

isServerOn(): Observable<boolean> {
    return this.myServerOnSubject.asObservable();
}

At the corresponding online/offline code positions you then can emit the next value with

在相应的在线/离线代码位置，您可以发出下一个值

this.myServerOnSubject.next(true/false);