迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > Angular >

Angular 中的 WebSocket

作者:迹忆客 最近更新:2023/03/23 浏览次数:

我们将通过一个例子来介绍 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>

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

Angular 示例中的 websocket

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

Angular 示例结果中的 websocket

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

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便