简介
Server-sent Events(SSE)是一种服务器推送数据到客户端的技术。它与WebSocket相似，但是它是基于HTTP/1.1协议的，因此它不需要像WebSocket那样建立一个全双工的连接。SSE主要用于单向通信，通常用于向客户端发送实时更新的数据，比如股票价格、新闻头条等。
在本文中，我们将介绍如何使用SSE发送JSON数据，并提供详细的代码示例和解释。
实现步骤
第一步：创建服务器端代码
首先，我们需要创建一个服务器端代码，用于向客户端发送JSON数据。在这个例子中，我们将使用Node.js来创建服务器端代码。
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - -
-------- ------- --------
---------- --- ----------------
--
---------------- ------------------------------
-- ------
---
------------------- -- -- -
------------------- ------- -- ---- -------
---在这个例子中，我们创建了一个HTTP服务器，并在每秒钟向客户端发送一条包含JSON数据的消息。我们使用res.write()方法将JSON数据发送到客户端。
注意，我们在响应头中设置了Content-Type为text/event-stream，这是SSE所要求的。我们还设置了Cache-Control为no-cache，这是为了确保客户端不会缓存响应。最后，我们设置了Connection为keep-alive，这是为了保持与客户端的长连接，以便实现实时更新。
第二步：创建客户端代码
接下来，我们需要创建一个客户端代码，用于接收服务器端发送的JSON数据。在这个例子中，我们将使用JavaScript来创建客户端代码。
----- ------ - --- -------------------- ---------------- - ----- -- - ----- ---- - ----------------------- ------------------ --
在这个例子中，我们创建了一个EventSource对象，并将服务器端的URL作为参数传递给它。然后，我们使用onmessage方法来监听服务器端发送的消息，并在控制台上输出JSON数据。
注意，我们使用JSON.parse()方法将服务器端发送的字符串转换为JSON对象。
第三步：测试代码
最后，我们需要测试我们的代码。首先，我们需要启动服务器端代码。在命令行中输入以下命令：
---- ---------
然后，我们需要打开浏览器并访问http://localhost:3000。我们应该能够在控制台上看到服务器端发送的JSON数据。
总结
在本文中，我们介绍了如何使用SSE发送JSON数据。我们提供了详细的代码示例和解释，以便读者能够理解和使用这项技术。SSE是一个非常有用的技术，它可以帮助我们实现实时更新的功能，比如股票价格、新闻头条等。如果你在开发前端应用程序时需要向客户端发送实时更新的数据，那么SSE是一个值得考虑的选项。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660ef585d10417a222f6668d