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<MessageEvent>;
public connect(url): Rx.Subject<MessageEvent> {
if (!this.subject) {
this.subject = this.create(url);
console.log("Successfully connected: " + url);
}
return this.subject;
}
private create(url): Rx.Subject<MessageEvent> {
let ws = new WebSocket(url);
let observable = Rx.Observable.create(
(obs: Rx.Observer<MessageEvent>) => {
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<Message>;
constructor(wsService: WebsocketService) {
this.messages = <Subject<Message>>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 = <Subject<Message>>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（）函数：
<!-- app.component.html -->
<h1>
Angular 2 WebSockets Tutorial
</h1>
<button (click)="sendMsg()">Send Message</button>
完成这些更改后，通过转到根目录并输入以下命令来提供应用程序：
ng serve
您应该在浏览器中看到Angular 2 WebSockets教程和“发送消息”按钮。
打开控制台并单击按钮几次，您应该看到您的应用程序向测试websocket服务器发送和接收消息。
网友评论