Server-sent Events 用于 Angular 5
在前端开发中，实时性一直是一个比较棘手的问题。在早期的开发中，多数前端开发者使用的是基于轮询的方案，这会导致效率不高，并且会消耗大量的带宽和服务器资源。随着技术的发展，新的方案被推陈出新，其中比较有代表性的一个就是 Server-sent Events（SSE），也就是基于服务器推送的一种全新的实时性方案。
本文主要介绍 Server-sent Events 的基本原理和 Angular 5 中如何使用 Server-sent Events 实现数据的实时传输。在文章最后会提供一个完整的示例代码，帮助读者更好地理解。
一、Server-sent Events 基本原理
简单来说，Server-sent Events 就是通过服务器推送的方式，将实时数据自动发送给客户端。客户端只需要接收数据，并根据需要进行处理。
Server-sent Events 的流程如下图所示：
- 建立一个 SSE 连接
客户端通过建立一个 SSE 连接来从服务器获取数据。
- 服务器端发送数据
服务器端在任何时候都能够向 SSE 连接发送数据，并将数据传送给客户端。
- 客户端接收数据
客户端接收到服务器发送的数据，并将数据解析以供使用。
二、Angular 5 中 SSE 的使用
在 Angular 5 中，我们可以使用 @angular/common/http 中的 HttpClient 模块来实现 Server-sent Events。具体实现过程如下：
1.引入 HttpClient 模块来建立 SSE 连接
import { Injectable } from '@angular/core';
import { HttpClient, HttpEvent, HttpHeaders, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/dom/ajax';
import 'rxjs/add/operator/pluck';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';2.定义 SSE 类
在创建 SSE 类之前，我们需要定义一个接口，以规范服务器返回数据的格式。
interface ServerSentEvent {
data: string;
}SSE 类的定义如下：
-- -------------------- ---- -------
-------------
------ ----- ---------- -
------------------- ----- ----------- - -
----------------- --------------------------- -
----- --- - --- -- ------
------ -------------------------- -- -
----- ----------- - --- -----------------
--------------------- - ------- -- -
--------------- ----- ---------- ---
--
------------------- - ------- -- -
----------------------
--
---
-
-3.在组件中使用 SSE
组件中使用此服务时，使用订阅者模式来监听返回的数据。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- ----------------
------------
--------- -----------
--------- - ---------- -
--
------ ----- ------------ ---------- ------ -
------- ------- -------
------------------- ----------- ----------- - -
---------- -
----------------------------------------------- -- -
----------- - ----------
---
-
-完整的示例代码如下所示：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----------- ---------- ------------ ------------ ------------ - ---- -----------------------
------ - ---------- - ---- ------------------
------ -------------------------------
------ --------------------------
------ ---------------------------
------ ------------------------
------ --------------------------
--------- --------------- -
----- -------
-
-------------
------ ----- ---------- -
------------------- ----- ----------- - -
----------------- --------------------------- -
----- --- - --- -- ------
------ -------------------------- -- -
----- ----------- - --- -----------------
--------------------- - ------- -- -
--------------- ----- ---------- ---
--
------------------- - ------- -- -
----------------------
--
---
-
-
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- ----------------
------------
--------- -----------
--------- - ---------- -
--
------ ----- ------------ ---------- ------ -
------- ------- -------
------------------- ----------- ----------- - -
---------- -
----------------------------------------------- -- -
----------- - ----------
---
-
-三、总结
本文在介绍 Server-sent Events 基本原理的同时，也讲述了如何在 Angular 5 中使用 Server-sent Events 实现实时数据传输。对于有实时性要求的前端开发者，Server-sent Events 是一种非常好的解决方案，相比传统的轮询，Server-sent Events 在性能和用户体验上都有着较大的提升。另外，读者在使用 Server-sent Events 时，也应该注意到 SSE 在不同浏览器中的兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6461e42c968c7c53b0339a4f