SSE（Server-Sent Events）是 HTML5 中一个非常强大的技术，它不需要前端向服务器端不停地发送请求来获取最新数据，而是由服务器端向客户端推送数据，可以极大地减小服务器的压力，提高网站的性能，减少网络资源的占用。在 AngularJS 的开发中也可以使用 SSE，下面我们来分享一下在 AngularJS 中如何使用 SSE。
基本原理
SSE 是基于 HTTP 协议的长连接技术，这意味着客户端与服务器之间的连接不会像普通的请求-响应协议那样立即中断，而是可以一直维持着连接，服务器可以不断地发送数据给客户端，客户端也可以随时向服务器发送控制数据（比如关闭连接）。SSE 在使用时需要注意以下几点：
- SSE 依赖于 HTTP 协议，因此需要在服务器端支持 SSE。
- SSE 可以通过 EventSource 对象在客户端进行使用。
- SSE 支持自定义事件类型和数据，可以实现灵活的推送数据场景。
- SSE 可以支持多个事件源，因此可以同时在一个网页中打开多个 SSE 连接。
在 AngularJS 中使用 SSE
在 AngularJS 中使用 SSE，我们需要先创建一个 Service 来包装 EventSource 对象，示例代码如下：
-- -------------------- ---- -------
------------------------- -------------------- -
--- ------ - --- --------------------
------ -
----------------- ------------------- --------- -
---------------------------------- --------------- -
---------------------------- -
---------------------
---
---
-
--
---在上述代码中，我们创建了一个名为 SseService 的 Service 用来封装 EventSource 对象。在 SseService 中提供了 addEventListener 方法来注册事件监听器，在服务器端推送事件时，会触发 EventSource 对象的 onmessage 事件，我们在这里通过 $rootScope.$apply 来通知 AngularJS 框架更新界面。
在 SseService 中，我们需要将 $rootScope 注入到 Service 中来保证 AngularJS 框架能够正确处理更新界面的逻辑，同时在 onmessage 事件处理函数中需要使用 $apply 函数来通知 AngularJS 更新界面。
使用 SseService 时，我们只需要在 Controller 中注入该 Service，然后调用 addEventListener 方法即可注册事件监听器，示例代码如下：
app.controller('MyController', function($scope, SseService) {
// 注册事件监听器，监听名为“myEvent”的事件
SseService.addEventListener('myEvent', function(data) {
$scope.data = data;
});
});通过上述代码，我们可以在 Controller 中监听来自服务器端的 myEvent 事件，并在该事件触发时更新 $scope.data 变量，从而刷新界面。
总结
SSE 是一个非常有用的技术，在 AngularJS 应用中也可以得到充分的应用。通过封装 EventSource 对象，我们可以很方便地使用 SSE，在应用场景上也具有很大的灵活性。希望通过本文的介绍，能够对 SSE 的使用有更深层次的认识和理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fc24f0f6b2d6eab320c3f5