迹忆客 专注技术分享

我们将通过一个例子来介绍 Angular 中的 WebSockets。

Angular 中的 WebSocket

WebSocket 是客户端和服务器之间的持久连接。它提供了一个通过 HTTP 运行的双向全双工通道。

此操作是通过单个 TCP/IP 套接字连接进行的。使用 WebSocket 的最佳示例是在聊天应用程序中。

聊天应用程序在 WebSockets 上工作，它提供了实时发送和接收消息的实时连接。

本教程演示了如何在我们的 Angular 应用程序中使用 WebSocket。在我们的 Angular 应用程序中使用 WebSocket 的最佳方式是在服务中封装我们的 WebSocket 和事件。

我们可以在我们想要使用它的任何组件中使用该服务。

让我们创建一个新的 Angular 应用程序，开始在 Angular 应用程序中使用 WebSocket。我们可以使用以下命令创建一个新的 Angular 应用程序。

# angular
ng new my_app

创建应用程序后，我们将使用以下命令进入应用程序文件夹。

# angular
cd my_app

我们将使用以下命令运行我们的应用程序，如下所示。

# angular
ng serve

在 Angular 中使用 RxJS 实现 WebSockets

首先，我们需要创建一个非常简单的服务，该服务将连接到给定的 URL 并返回一个 RxJS 主题。这个 RxJS 主题将订阅我们想要监听来自连接套接字的任何新传入消息的任何服务或组件。

我们可以使用以下命令创建一个新服务，如下所示。

# angular
ng g service websocketchat

创建新服务后，我们将从服务的 rxjs 库中导入 *。它将允许我们创建既可以作为观察者又可以作为可观察对象的主题。

我们的主题将监视任何传入的消息，并且还将消息广播到已订阅该主题的任何组件。

我们服务中的代码如下所示。

import { Injectable } from '@angular/core';
import * as Rj from 'rxjs';

@Injectable()
export class WebsocketChatService {
  constructor() {}

  private subject: Rj.Subject<MessageEvent>;

  public connect(url): Rj.Subject<MessageEvent> {
    if (!this.subject) {
      this.subject = this.create(url);
      console.log('Successfully connected To: ' + url);
    }
    return this.subject;
  }

  private create(url): Rj.Subject<MessageEvent> {
    let wsc = new WebSocket(url);

    let observable = Rj.Observable.create((obs: Rj.Observer<MessageEvent>) => {
      wsc.onmessage = obs.next.bind(obs);
      wsc.onerror = obs.error.bind(obs);
      wsc.onclose = obs.complete.bind(obs);
      return wsc.close.bind(wsc);
    });
    let observer = {
      next: (data: Object) => {
        if (wsc.readyState === WebSocket.OPEN) {
          wsc.send(JSON.stringify(data));
        }
      },
    };
    return Rj.Subject.create(observer, observable);
  }
}

现在我们已经创建了 websocketchat 服务，我们需要另一个服务来与我们的 WebSocket 接口并充当适配器。它将 WebSocket 的输出调整为可以在前端轻松使用的形式。

我们将服务命名为 chatservice，可以使用以下命令轻松创建。

# angular
ng g service chatservice

一旦我们创建了我们的新服务，我们将从 rxjs 库中导入我们的 websocketchat 服务和 observable。我们还将定义我们的聊天 URL。

我们将创建一个消息接口来定义消息的用户和消息内容，如下所示。

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { map } from 'rxjs/operators';

import { WebsocketChatService } from './websocketchat.service';

const CHAT_URL = 'wss://echo.websocket.org/';

export interface Message {
  user: string;
  messageContent: string;
}

@Injectable()
export class ChatService {
  public messages: Subject<Message>;

  constructor(wscService: WebsocketChatService) {
    this.messages = <Subject<Message>>(
      wscService.connect(CHAT_URL).pipe(map((response: MessageEvent): Message => {
        let content = JSON.parse(response.data);
        return {
          user: content.user,
          messageContent: content.messageContent,
        };
      }))
    );
  }
}

我们将通过将我们的两个服务导入到我们的组件中来更新我们的 app.component.ts 文件。我们将发送如下所示的消息。

import { Component } from '@angular/core';
import { WebsocketChatService } from './websocketchat.service';
import { ChatService } from './chatservice.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [WebsocketChatService, ChatService],
})
export class AppComponent {
  constructor(private chatService: ChatService) {
    chatService.messages.subscribe((msg) => {
      console.log('Response recieved from websocket: ' + msg);
    });
  }

  private message = {
    user: 'Husnain',
    messageContent: 'Hello World!',
  };

  sendMessage() {
    console.log('new message from the client: ', this.message);
    this.chatService.messages.next(this.message);
    this.message.messageContent = '';
  }
}

现在我们将为我们的应用程序创建一个前端，我们将在其中创建一个按钮，当我们单击它时将发送消息，如下所示。

<h1>Send Message by clicking button</h1>
<button (click)="sendMessage()">Send</button>

现在，让我们尝试检查它是如何工作的。

当我们单击发送按钮时，它将在控制台中发送以下消息。

正如你从上面的示例中看到的那样，使用 rxjs 实现 WebSockets 非常容易。