Angular 中如何使用 WebSocket？

WebSocket 是一种在客户端和服务器之间建立实时通信的协议。在前端开发中，我们经常需要使用 WebSocket 来实现实时通信，比如聊天室、实时消息推送等功能。在 Angular 中，我们可以使用 @angular/websocket 库来实现 WebSocket 的使用。

安装 @angular/websocket 库

首先，我们需要安装 @angular/websocket 库。使用以下命令进行安装：

npm install --save @angular/websocket

创建 WebSocket 服务

在 Angular 中，我们可以使用服务来管理 WebSocket 的连接和通信。我们可以使用 WebSocketSubject 类来创建一个 WebSocket 服务。

// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';

@Injectable({
  providedIn: 'root'
})
export class WebSocketService {
  private socket$: WebSocketSubject<any>;

  constructor() {}

  public connect(url: string): void {
    this.socket$ = webSocket(url);
  }

  public send(message: any): void {
    this.socket$.next(message);
  }

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

  public disconnect(): void {
    this.socket$.complete();
  }
}

在上面的代码中，我们创建了一个 WebSocketService 服务，它包括了 connect、send、onMessage 和 disconnect 四个方法。其中，connect 方法用来连接 WebSocket，send 方法用来发送消息，onMessage 方法用来监听消息，disconnect 方法用来断开 WebSocket 连接。

在组件中使用 WebSocket 服务

接下来，我们可以在组件中使用 WebSocketService 服务来实现 WebSocket 的使用。

// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';
import { WebSocketService } from './web-socket.service';

@Component({
  selector: 'app-web-socket',
  templateUrl: './web-socket.component.html',
  styleUrls: ['./web-socket.component.scss']
})
export class WebSocketComponent implements OnInit {
  public message: string;

  constructor(private webSocketService: WebSocketService) {}

  ngOnInit(): void {
    this.webSocketService.connect('ws://localhost:8080');

    this.webSocketService.onMessage().subscribe((message) => {
      this.message = message;
    });
  }

  public sendMessage(): void {
    this.webSocketService.send('Hello, WebSocket!');
  }

  public disconnect(): void {
    this.webSocketService.disconnect();
  }
}

在上面的代码中，我们创建了一个 WebSocketComponent 组件，它包括了 message 属性、sendMessage 方法和 disconnect 方法。在 ngOnInit 生命周期钩子中，我们连接了 WebSocket，并使用 onMessage 方法来监听消息。在 sendMessage 方法中，我们发送了一条消息。在 disconnect 方法中，我们断开了 WebSocket 连接。

示例代码

完整的示例代码如下：

// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class WebSocketService {
  private socket$: WebSocketSubject<any>;

  constructor() {}

  public connect(url: string): void {
    this.socket$ = webSocket(url);
  }

  public send(message: any): void {
    this.socket$.next(message);
  }

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

  public disconnect(): void {
    this.socket$.complete();
  }
}

@Component({
  selector: 'app-web-socket',
  templateUrl: './web-socket.component.html',
  styleUrls: ['./web-socket.component.scss']
})
export class WebSocketComponent implements OnInit {
  public message: string;

  constructor(private webSocketService: WebSocketService) {}

  ngOnInit(): void {
    this.webSocketService.connect('ws://localhost:8080');

    this.webSocketService.onMessage().subscribe((message) => {
      this.message = message;
    });
  }

  public sendMessage(): void {
    this.webSocketService.send('Hello, WebSocket!');
  }

  public disconnect(): void {
    this.webSocketService.disconnect();
  }
}

总结

在本文中，我们介绍了如何在 Angular 中使用 WebSocket。我们创建了一个 WebSocketService 服务来管理 WebSocket 的连接和通信，同时在组件中使用 WebSocketService 服务来实现 WebSocket 的使用。希望本文能够对大家学习和使用 Angular 中的 WebSocket 有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6556c485d2f5e1655d122572