什么是 SSE？
SSE（Server-Sent Events）是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送事件流，从而实现实时通信。与传统的轮询技术相比，SSE 更加高效、实时和可靠。
Angular.js 中的 SSE
在 Angular.js 中，我们可以使用 EventSource 对象来实现 SSE。EventSource 对象允许我们订阅一个 SSE 端点，并接收从服务器推送的事件流。下面是一个简单的示例：
// javascriptcn.com 代码示例
var source = new EventSource('/sse');
source.addEventListener('message', function(event) {
console.log('Received a message:', event.data);
});
source.addEventListener('open', function(event) {
console.log('Connection opened.');
});
source.addEventListener('error', function(event) {
console.error('Error occurred:', event);
});在上面的示例中，我们创建了一个 EventSource 对象，并订阅了一个 SSE 端点 /sse。然后，我们使用 addEventListener 方法注册了三个回调函数：
message：当服务器发送一个消息时调用。open：当连接成功建立时调用。error：当连接发生错误时调用。
在实际应用中，我们可以根据需要自定义这些回调函数，以便处理接收到的事件流。
SSE 模块的实现
为了更方便地使用 SSE，我们可以使用 Angular.js 的 SSE 模块。该模块提供了一个服务 sseService，它封装了 EventSource 对象，并提供了一些常用的方法来处理 SSE 事件流。
安装 SSE 模块
要使用 SSE 模块，我们需要先将其安装到我们的 Angular.js 应用中。可以使用 Bower 来安装：
$ bower install angular-sse --save
然后将 angular-sse.js 文件添加到我们的 HTML 文件中：
<script src="bower_components/angular-sse/angular-sse.js"></script>
使用 SSE 模块
一旦安装了 SSE 模块，我们就可以在我们的 Angular.js 应用中使用它了。首先，我们需要将 sseService 添加到我们的控制器中：
angular.module('myApp', ['sse'])
.controller('myController', function($scope, sseService) {
// ...
});然后，我们可以使用 sseService 的方法来处理 SSE 事件流。例如，我们可以使用 subscribe 方法来订阅一个 SSE 端点：
sseService.subscribe('/sse', function(event) {
console.log('Received a message:', event.data);
});在上面的示例中，我们使用 subscribe 方法订阅了 /sse 端点，并指定了一个回调函数来处理接收到的事件流。当服务器发送一个消息时，我们会在控制台中看到相应的日志。
除了 subscribe 方法，sseService 还提供了其他一些方法来处理 SSE 事件流，例如 unsubscribe 方法用于取消订阅、close 方法用于关闭 SSE 连接等等。具体使用方法可参考官方文档。
总结
SSE 是一种高效、实时和可靠的服务器推送技术，可以用于实现实时通信。在 Angular.js 中，我们可以使用 EventSource 对象来实现 SSE，也可以使用 SSE 模块来更方便地处理 SSE 事件流。无论是使用原始的 EventSource 对象还是使用 SSE 模块，我们都可以在 Angular.js 应用中轻松地实现实时通信功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6571ae37d2f5e1655da5d840