如何在 Angular 中使用 Websockets 进行实时通信

什么是 Websockets？

Websockets 是一种 HTML5 技术，它允许客户端和服务器之间建立一个持久性的连接，并且在连接建立后可以双向通信。Websockets 使得实时通信变得非常容易，因为它们允许服务器向客户端推送数据而不需要客户端发起请求。

为什么要使用 Websockets？

使用 Websockets 可以让我们实现实时通信，这在许多应用程序中非常有用。例如，如果你正在构建一个聊天应用程序，那么使用 Websockets 可以让你实现实时聊天，而不需要让客户端不停地轮询服务器来检查是否有新消息。

如何在 Angular 中使用 Websockets？

在 Angular 中使用 Websockets 很简单。我们可以使用 WebSocket 对象来创建一个 Websocket 连接，然后使用 RxJS 来处理从服务器接收到的数据。

首先，让我们创建一个服务来管理我们的 Websocket 连接：

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

@Injectable({
  providedIn: 'root'
})
export class WebsocketService {
  private socket: WebSocket;
  private readonly url = 'ws://localhost:8080';

  public connect(): Observable<any> {
    this.socket = new WebSocket(this.url);

    return new Observable((observer: Observer<any>) => {
      this.socket.onmessage = (event) => {
        observer.next(event.data);
      };

      this.socket.onerror = (event) => {
        observer.error(event);
      };

      this.socket.onclose = () => {
        observer.complete();
      };
    });
  }

  public sendMessage(message: string): void {
    this.socket.send(message);
  }
}

在上面的代码中，我们创建了一个 WebsocketService 服务来管理我们的 Websocket 连接。在 connect() 方法中，我们创建了一个 Observable 对象来处理从服务器接收到的数据。在 sendMessage() 方法中，我们可以向服务器发送消息。

现在，让我们看一下如何在组件中使用这个服务：

// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';
import { WebsocketService } from './websocket.service';

@Component({
  selector: 'app-root',
  template: `
    <input type="text" [(ngModel)]="message">
    <button (click)="sendMessage()">Send</button>
    <ul>
      <li *ngFor="let message of messages">{{ message }}</li>
    </ul>
  `
})
export class AppComponent implements OnInit {
  public message: string;
  public messages: string[] = [];

  constructor(private websocketService: WebsocketService) {}

  public ngOnInit(): void {
    this.websocketService.connect().subscribe((message: string) => {
      this.messages.push(message);
    });
  }

  public sendMessage(): void {
    this.websocketService.sendMessage(this.message);
    this.message = '';
  }
}

在上面的代码中，我们注入了 WebsocketService 服务，并在 ngOnInit() 方法中订阅了从服务器接收到的数据。在 sendMessage() 方法中，我们向服务器发送消息，并清空输入框中的文本。

总结

使用 Websockets 可以让我们实现实时通信，这在许多应用程序中非常有用。在 Angular 中使用 Websockets 很简单，我们只需要创建一个 WebSocket 对象来创建一个 Websocket 连接，然后使用 RxJS 来处理从服务器接收到的数据。在组件中使用这个服务也很容易，我们只需要注入 WebsocketService 服务，并在 ngOnInit() 方法中订阅从服务器接收到的数据。

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