Angular 12 中如何使用 HttpClient 实现 WebSocket 连接-JavaScript中文网-JavaScript教程资源分享门户

WebSocket 是一种基于 HTTP 协议的双向通讯协议，它实现了真正的实时通讯，可以大大降低服务器和客户端之间的通信延迟，让用户更快得到服务响应。在 Angular 12 中，我们可以使用 HttpClient 来实现 WebSocket 连接。本文将介绍如何使用 HttpClient 在 Angular 12 中实现 WebSocket 连接。

WebSocket 连接简介

WebSocket 协议是 HTML5 开始推出的一种网络协议，它是基于 HTTP 协议进行通信的，采用初始的 HTTP 协议建立连接，通过转换协议进行信息传输。相比传统的 HTTP 协议，WebSocket 协议建立连接后，客户端和服务器端之间可以随时发送数据。并且它支持服务器端主动发送消息，让客户端实时获取服务器端的变化，从而实现真正的实时通讯。

准备工作

在开始实现之前，我们需要进行一些准备工作。首先，我们需要在 Angular 12 项目中安装 rxjs 库和 @types/websocket 库。我们可以通过以下命令来进行安装：

npm install --save rxjs @types/websocket

rxjs 库是利用现有的异步代码来组合和编排未来的异步代码，以及支持将回调压成非常简单的数字来管理复杂应用的库。而 @types/websocket 库则可以为我们的 TypeScript 代码提供 WebSocket 的类型定义。

创建 WebSocket 服务

为了实现 WebSocket 连接，我们需要创建一个 WebSocket 服务。在我们的服务中，我们将使用 websocket 库来创建 WebSocket 客户端，并利用 Angular 的 HttpClient 处理我们发出的 HTTP 请求。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';

@Injectable({
  providedIn: 'root'
})
export class WebSocketService {

  private socket$: WebSocketSubject<any>;

  constructor(private http: HttpClient) {}

  public connect(): WebSocketSubject<any> {
    const url = 'ws://localhost:3000' // WebSocket 服务端地址
    this.socket$ = webSocket(url);
    return this.socket$;
  }
}

在上述代码中，我们首先引入了 Angular 中的 HttpClient 和 rxjs/webSocket 库。在 WebSocketService 类中，我们创建了 socket$ 变量以保存 WebSocket 对象，我们也可以通过 socket$ 来发送实时消息。在 connect() 方法中，我们创建了 url 变量来保存 WebSocket 服务端的地址。我们可以通过 webSocket() 函数来创建 WebSocket 客户端，然后将其保存在 socket$ 变量中，最后返回 socket$ 对象。

实现 WebSocket 的通讯

在 WebSocketService 类中，我们已经创建了 WebSocket 客户端，我们还需要实现 WebSocket 的通讯。为了实现 WebSocket 的通讯，我们可以通过 socket$ 变量来发送和接收消息。我们可以通过以下代码来实现：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';

@Injectable({
  providedIn: 'root'
})
export class WebSocketService {

  private socket$: WebSocketSubject<any>;

  constructor(private http: HttpClient) {}

  public connect(): WebSocketSubject<any> {
    const url = 'ws://localhost:3000' // WebSocket 服务端地址
    this.socket$ = webSocket(url);

    this.socket$.subscribe(
      (message) => console.log('Received message:', message),
      (err) => console.error('Error:', err),
      () => console.log('WebSocket has been closed')
    );

    return this.socket$;
  }

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

在上述代码中，我们定义了 connect() 方法和 sendMessage() 方法来实现 WebSocket 的通讯。在 connect() 方法中，我们通过 subscribe() 函数来处理我们收到的 WebSocket 消息和错误消息。在 sendMessage() 方法中，我们使用 next() 函数来发送消息。我们可以通过传递一个 message 参数来发送实时消息。

使用 WebSocket

现在我们已经创建了 WebSocket 服务并实现了 WebSocket 的通讯，接下来我们将介绍如何在 Angular 12 应用程序中使用它。

import { Component, OnInit } from '@angular/core';
import { WebSocketService } from './web-socket.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'web-socket-angluar';

  constructor(private webSocketService: WebSocketService) {}

  ngOnInit(): void {
    const socket = this.webSocketService.connect();

    socket.subscribe(
      (message: any) => {
        console.log('Received message:', message);
      },
      (err: any) => console.error('Error:', err),
      () => console.log('WebSocket has been closed')
    );
  }

  sendMessage(message: any): void {
    this.webSocketService.sendMessage(message);
  }
}

在上述代码中，我们在根组件 AppComponent 中引入了 WebSocketService 并使用 connect() 方法来创建 WebSocket 连接。在 ngOnInit() 方法中，我们使用 subscribe() 函数来处理我们收到的 WebSocket 消息和错误消息。在 sendMessage() 方法中，我们使用 sendMessage() 函数来发送消息。我们可以在模板中使用 sendMessage() 函数来发送消息。

总结

Angular 12 可以使用 HttpClient 来实现 WebSocket 连接。在本文中，我们详细介绍了如何使用 HttpClient 在 Angular 12 中实现 WebSocket 连接，并展示了用于连接与通讯的完整代码示例。希望本文能够帮助读者更好地理解 Angular 12 中 WebSocket 连接的工作方式并在自己的项目中应用这些技术。

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