在实时应用中，Server-Sent Events (SSE) 技术可用于向浏览器推送服务器端的更新事件。在这篇文章中，我们将介绍如何使用 SSE 实现实时定位跟踪应用。
简介
实时定位跟踪应用通常会使用 WebSockets 或 Long Polling 技术来实现。但是，它们都需要额外的服务器配置和协议支持。与此不同的是，SSE 是基于 HTTP 协议实现的，不需要任何额外的服务器配置，也不需要任何新的协议。
SSE 提供了以下特性：
- 与浏览器内置的 EventSource 接口兼容
- 可以根据消息类型和事件名称进行过滤
- 可以和 HTTP Cookie、HTTP Basic 认证等一起使用
实现
我们将使用 Node.js 和 Express 来实现 SSE。首先，我们创建一个 /location 路由，该路由将作为我们 SSE 的端点。在这个路由中，我们为客户端创建一个 SseStream 对象，并将其添加到一个全局变量中。这个 SseStream 对象将调用 respond 方法，向客户端发送 SSE 事件。
-- -------------------- ---- -------
----- - --------- - - ---------------------
----- --- - -----------------------
----- --- - ----------
-- ------ --- --------
----- --- - --- ------
-- ------ --- ------
----- ------ - --- ---------------
-----------------
-- --- --------- -- -------
-------------------- ----- ---- -- -
-----------------------------------------------
------------- -------------
---------------- -----------
---
---------------- - -------
---现在，我们需要一个方法来将实时数据写入 SseStream。我们创建一个定时器，每隔一秒钟将随机的位置数据写入 sse stream。这个位置数据包含经度和纬度信息。
-- -------------------- ---- -------
-- ---- -------- ---- ----- ------
----- ----- - -------------- -- -
----- ---- - -
---------- ------------------------- - --- - ----------------
--------- ------------------------- - --- - -----------------
--
-- ------------------ -
------------------------ ------ ----------- ---- ---
-
-- ------现在，我们只需要在客户端订阅 SSE 事件并处理它们，就能实时更新我们的位置数据。我们只需要简单地实例化 EventSource 对象并指向 /location 端点。然后，我们处理 name 为“ location”的事件并从事件中提取位置数据。
const source = new EventSource('/location');
source.onmessage = (event) => {
const msg = JSON.parse(event.data);
if (msg.event === 'location') {
const { longitude, latitude } = msg.data;
// update location on map
}
};现在，每当新的位置数据可用时，它将自动更新我们的应用程序中的位置信息。
结论
在这篇文章中，我们看到了 Server-Sent Events 如何简化实现实时应用的过程。通过 SSE，我们可以轻松地实现实时的数据推送和更新。与 WebSockets 和 Long Polling 不同，SSE 不需要额外的服务器配置，也不需要任何新协议。希望这篇文章能够帮助你了解 SSE 以及如何将它应用于你的应用中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6737fce8317fbffedf0d8ea6