Angular CLI：使用 proxy.conf.json 代理 websocket

JS

使用 Angular CLI 和 proxy.conf.JSon 代理 WebSocket

Angular CLI 是一个强大的工具，用于简化 Angular 应用程序的开发和构建过程。在开发过程中，我们经常需要与后端服务器进行通信，而有时候，这涉及到使用 WebSocket 进行实时通讯。在这篇文章中，我们将讨论如何使用 Angular CLI 的 proxy.conf.JSon 文件来代理 WebSocket 请求，以便更轻松地处理与后端的实时通信。

1. 什么是 WebSocket？

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它允许在客户端和服务器之间进行实时数据传输。与传统的 HTTP 请求不同，WebSocket 连接是持久的，可以在客户端和服务器之间双向发送消息。

2. Angular CLI 中的 proxy.conf.JSon

Angular CLI 提供了一个强大的代理功能，允许我们在开发过程中将某些请求代理到不同的目标。为了代理 WebSocket 请求，我们可以使用 proxy.conf.JSon 文件。

JSon
// proxy.conf.JSon
{
  "/socket": {
    "target": "ws://localhost:3000",
    "secure": false,
    "ws": true
  }
}

在上面的例子中，我们配置了一个代理规则，将所有以 "/socket" 开头的请求代理到目标地址为 "ws://localhost:3000" 的 WebSocket 服务器上。这里的 secure 设置为 false 表示不使用安全连接，而 "ws": true 表示启用 WebSocket。

3. 配置 Angular 项目

要让 Angular CLI 使用我们的代理配置，我们需要在 angular.JSon 文件中进行相应的设置。

JSon
// angular.JSon
{
  // ...
  "architect": {
    "build": {
      // ...
      "options": {
        // ...
        "proxyConfig": "proxy.conf.JSon"
      }
    },
    "serve": {
      // ...
      "options": {
        // ...
        "proxyConfig": "proxy.conf.JSon"
      }
    }
  }
}

确保将 "proxyConfig" 配置为我们刚刚创建的 proxy.conf.JSon 文件。

4. 实际应用中的例子

现在，让我们通过一个简单的实际例子来演示如何在 Angular 应用中使用 WebSocket，并通过代理进行通信。

首先，安装 websocket 库：

bash
npm install websocket

然后，在 Angular 组件中使用 WebSocket：

typescript
// app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-root',
  template: <code>
    <h1>WebSocket Example</h1>
    <button (click)="sendMessage()">Send Message</button>
    <ul>
      <li *ngFor="let message of messages">{{ message }}</li>
    </ul>
  </code>,
})
export class AppComponent implements OnInit {
  private socket: WebSocket;
  messages: string[] = [];
  ngOnInit() {
    this.socket = new WebSocket('ws://localhost:4200/socket');
    this.socket.onmessage = (event) => {
      this.messages.push(event.data);
    };
  }
  sendMessage() {
    this.socket.send('Hello, WebSocket!');
  }
}

在上面的例子中，我们创建了一个简单的 Angular 组件，通过 WebSocket 与后端通信。在组件初始化时，我们创建了一个 WebSocket 连接，并在收到消息时将消息添加到 messages 数组中。通过按钮点击，我们可以向后端发送消息。

通过以上步骤，我们成功地配置了 Angular CLI 来代理 WebSocket 请求，使得与后端的实时通信变得更加简便。

5.

在本文中，我们介绍了如何使用 Angular CLI 的 proxy.conf.JSon 文件来代理 WebSocket 请求。通过简单的配置，我们能够在开发过程中更轻松地处理与后端的实时通信，为构建实时应用程序提供了方便的工具。希望这篇文章对你在使用 Angular CLI 开发实时应用程序时有所帮助。