Angular 4 中的 WebSocket

Posted 2023-02-16

【中文标题】Angular 4 中的 WebSocket

【英文标题】：WebSocket in Angular 4

【发布时间】：2017-12-18 13:09:25

【问题描述】：

我正在使用 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);

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

提前谢谢你。

【问题讨论】：

什么是“this.server”？我怀疑它是否有一种类型，可以通过调用 Observable.of 来创建一个可以执行您想要的操作的可观察对象。

打错字了，我的意思是this.subject

【参考方案1】：

我建议您在 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());
        );
    

定义一个事件枚举：

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

然后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');
      );
  

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

【参考方案2】：

我不确定你想用什么来实现

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

我不认为它做你认为它做的事。 相反，您应该创建自己的 BehaviorSubject 并返回 对应的 Observable like

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

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

this.myServerOnSubject.next(true/false);