angular集成websocket_Angular Websocket教程

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