angular集成websocket_Angular Websocket教程

汝楷
2023-12-01

Angular Websocket教程

在本教程中,我们将介绍如何实现一个非常简单的基于WebSocket的Angular应用程序。本教程版本:

angular ^6.1.0

rxjs ^6.0.0

浏览器兼容性

在这个时候,我认为让你知道websocket浏览器的兼容性不是100%,一些旧的浏览器可能不支持WebSockets是个好主意。因此,如果您暂时没有更新,本教程可能无法在您的浏览器中运行。

Angular中的WebSocket

Angular使用RxJS,它本质上是一个反应式扩展的javascript实现。这是一个使用可观察序列组成异步和基于事件的程序的库,非常适合使用WebSockets。

简而言之,RxJS允许我们从websocket连接中侦听新消息,然后在“X”事件发生时执行操作。这方面的一个例子可以是实时聊天应用程序。假设我们有3个人连接到我们的聊天应用程序,其中一个人发送消息。如果我们想在收到消息时在应用程序中执行某些操作,那么我们可以简单地订阅“新消息”事件并在触发事件时处理该事件。

使用WebSocket

在我们的角度应用程序中实现WebSockets的最佳方法是将我们的WebSockets和事件封装在服务中,然后在我们希望与websocket交互的任何组件中调用该服务。

创建应用程序

使用Angular CLI,通过在命令行中键入以下内容来创建新应用程序:

ng new websocket_tutorial

这应该创建一个新的,功能齐全的Angular应用程序,我们将在其中实现基于websocket的服务。为了确保它的工作类型:

ng serve

您应该希望看到服务器在端口4200上成功启动。如果您在首选的Web浏览器中导航到localhost:4200,您应该会看到'app works!' 在浏览器中显示。现在我们已经启动并运行了我们的基本应用程序,让我们继续创建我们的websocket服务。

创建我们的Websocket服务

为了让我们开始,我们将创建一个非常简单的服务,该服务将连接到任何给定的URL并返回我们可以在其他服务/组件中订阅的RxJS主题,以便侦听来自连接套接字的任何传入消息。

ng g service websocket

我们需要从新服务顶部的rxjs库中导入*。这将使我们能够创造既能观察又能观察的主体。这实际上意味着我们的主题将观察我们的websocket以获取任何传入消息,并将这些消息广播到恰好订阅此服务的任何组件。

import { Injectable } from '@angular/core';

import {Subject, Observer, Observable} from 'rxjs';;

@Injectable()

export class WebsocketService {

constructor() { }

private subject: Rx.Subject;

public connect(url): Rx.Subject {

if (!this.subject) {

this.subject = this.create(url);

console.log("Successfully connected: " + url);

}

return this.subject;

}

private create(url): Rx.Subject {

let ws = new WebSocket(url);

let observable = Rx.Observable.create(

(obs: Rx.Observer) => {

ws.onmessage = obs.next.bind(obs);

ws.onerror = obs.error.bind(obs);

ws.onclose = obs.complete.bind(obs);

return ws.close.bind(ws);

})

let observer = {

next: (data: Object) => {

if (ws.readyState === WebSocket.OPEN) {

ws.send(JSON.stringify(data));

}

}

}

return Rx.Subject.create(observer, observable);

}

}

接下来我们要做的是创建一个与我们的websockets接口的第二个服务,它将作为一种适配器,它将我们的websocket的输出调整为我们可以在前端轻松使用的形式。再次使用angular-cli创建此服务:

ng g service chat

这应该在根目录中创建一个chat.service.ts。在这个文件中,我们想要做这样的事情:

import { Injectable } from '@angular/core';

import { Observable, Subject } from 'rxjs';

import { WebsocketService } from './websocket.service';

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

export interface Message {

author: string,

message: string

}

@Injectable()

export class ChatService {

public messages: Subject;

constructor(wsService: WebsocketService) {

this.messages = >wsService

.connect(CHAT_URL)

.pipe(map((response: MessageEvent): Message => {

let data = JSON.parse(response.data);

return {

author: data.author,

message: data.message

}

}));

}

}

如果是6.0以下的rxjs版本,map函数可以直接使用,代码如下:

this.messages = >wsService

.connect(CHAT_URL)

.map((response: MessageEvent): Message => {

let data = JSON.parse(response.data);

return {

author: data.author,

message: data.message

}

});

更新我们的应用组件

最后,我们要更新我们的app.component.ts文件,以便它导入我们新创建的聊天服务,并允许我们将消息推送到此websocket:

import { Component } from '@angular/core';

import { WebsocketService } from './websocket.service';

import { ChatService } from './chat.service';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

providers: [ WebsocketService, ChatService ]

})

export class AppComponent {

constructor(private chatService: ChatService) {

chatService.messages.subscribe(msg => {

console.log("Response from websocket: " + msg);

});

}

private message = {

author: 'tutorialedge',

message: 'this is a test message'

}

sendMsg() {

console.log('new message from client to websocket: ', this.message);

this.chatService.messages.next(this.message);

this.message.message = '';

}

}

最后,我们需要更新我们的app组件的html页面,以便我们可以实际使用我们在组件文件中定义的sendMsg()函数:

Angular 2 WebSockets Tutorial

Send Message

完成这些更改后,通过转到根目录并输入以下命令来提供应用程序:

ng serve

您应该在浏览器中看到Angular 2 WebSockets教程和“发送消息”按钮。

打开控制台并单击按钮几次,您应该看到您的应用程序向测试websocket服务器发送和接收消息。

 类似资料: