WebSocket in Angular 4

Question

私はAngular 4とwebsocketでチャットアプリケーションを作成しています。このために、私はここに、このAngular websocket tutorial

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

} 

そして、それはです私の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 
       } 
      }); 
    } 
} 

接続状態。私は、接続が中断されているか、サーバーがダウンしているかどうかを知りたい。そのために

、私はこのようなWebsocketServiceクラス内isServerOn()機能を実装しようとした：

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

しかし、それは問題を解決していません。同じ問題を抱えている人はいますか？

ありがとうございます。

Answer 1

は、私はあなたが、私はそれはあなたがそれがない何を考えていないと思います

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

では達成したいのかわかりません。 代わりにするのではなく、私はあなたが使用することをお勧めしますが、その後

this.myServerOnSubject.next(true/false); 

Answer 2

で次の値を発することができる独自のBehaviorSubjectを作成し、対応するオンライン/オフラインのコード位置で

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

よう が観測対応返す必要がありますAngularアプリケーションのsocket.io-clientの型定義を参照してください。次のようにサービスを定義します。あなたの角度成分から、あなたのサービス機能へ

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

その後subscribe：

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

はイベント列挙型を定義し、完全なチャットプロジェクトを探す

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

、ここでNode.js、WebSockets、Angularを使用しています：https://github.com/luixaviles/socket-io-typescript-chat