简介
SSE (Server-Sent Events) 是一种服务器推送技术，它通过源源不断的服务器推送，使客户端能够实时地收到服务器发来的数据。在前端开发中，我们通常使用 WebSocket 技术来实现实时通信，但是在一些简单的场景下，SSE 技术可以代替 WebSocket 来实现实时通信的效果。
AngularJS 是一款流行的前端框架，它的服务机制使得我们可以很容易地实现一个 SSE 服务。本文将详细介绍 AngularJS SSE 服务的使用，并包含使用示例代码。
SSE 服务的实现
在 AngularJS 中，我们可以使用 $http 服务来创建一个 SSE 服务。具体实现方法如下：
-- -------------------- ---- -------
------------------------- -------------------- ------ -
--- -------
------ -
----- ------------- -
------ -------------- --------- ---------------- ----------------------
------------------------ -
------ - --- -----------------
---------------------------------- ------------- -
---------------------------- -
------------------------------- ----------------------
---
---
---
--
------ ---------- -
---------------
------ - -----
-
--
---上面的代码定义了一个 sseService 服务，其中 open 方法用于打开 SSE 连接，close 方法用于关闭 SSE 连接。
在 open 方法中，我们首先通过 $http.get 方法获取服务器地址，然后创建一个 EventSource 对象来建立 SSE 连接。EventSource 对象的 addEventListener 方法用于监听 message 事件，当服务器推送消息时，会调用此方法，并通过 $rootScope.$broadcast 广播 SSEMsg 事件。
在 AngularJS 中，所有的事件都是通过 $rootScope 广播出去的，因此在 addEventListener 中，我们需要使用 $rootScope.$apply 来执行 AngularJS 的事件循环机制，从而确保 $rootScope.$broadcast 能够工作。
SSE 服务的使用
使用 SSE 服务非常简单，我们只需要在控制器中调用 sseService.open() 方法来建立 SSE 连接，并监听 SSEMsg 事件即可。接下来是一个使用 SSE 服务的示例代码：
app.controller('myController', function ($scope, sseService) {
sseService.open('http://example.com/sse')
.then(function() {
$scope.$on('SSEMsg', function(event, data) {
console.log(data);
});
});
});在上面的代码中，我们在控制器中调用 sseService.open() 方法来建立 SSE 连接，并在 then 的回调函数中监听 SSEMsg 事件。当服务器推送新消息时，就会在控制台中输出消息内容。
总结
本文详细介绍了 AngularJS SSE 服务的实现及使用方法，我们可以通过 SSE 技术来实现实时通信的效果。虽然 SSE 技术的应用场景较为有限，但是在一些简单的场景下，它可以代替 WebSocket 来解决实时通信的需求。
完整示例代码请见 https://github.com/example/sse-demo。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d7340968c7c53b0c1f84a