简介
Server-sent Events (SSE) 是一种基于 HTTP 协议的服务器推送技术，允许服务器向客户端发送事件流。SSE 与 WebSocket 类似，但是相比 WebSocket 更加轻量级，适合用于实现简单的实时通信功能。
本文将介绍如何使用 SSE 技术实现一个简单的对话机器人，旨在帮助前端开发者深入了解 SSE 技术的应用。
实现思路
对话机器人是一个常见的应用场景，我们可以使用 SSE 技术实现一个简单的对话机器人，如下图所示：
实现思路如下：
- 前端页面通过 SSE 技术向服务器发送请求，请求一个用于获取机器人回复的事件流。
- 服务器接收到请求后，开始向客户端发送事件流。
- 前端页面监听事件流，当有新的事件到达时，将事件中的数据显示在页面上。
- 用户输入问题后，前端页面将问题发送给服务器，服务器根据问题生成回复，并将回复作为一个事件发送给客户端。
实现步骤
1. 前端页面
首先，我们需要在前端页面中创建一个 EventSource 对象，用于向服务器发送请求，并监听服务器发送的事件流。代码如下：
const eventSource = new EventSource('/api/chatbot');
eventSource.onmessage = (event) => {
const data = JSON.parse(event.data);
// 处理事件数据
};当服务器向客户端发送事件流时，会触发 EventSource 对象的 onmessage 回调函数，我们可以在该回调函数中获取事件数据，并进行相应的处理。
接下来，我们需要在页面中添加一个输入框和一个发送按钮，用于用户输入问题并将问题发送给服务器。代码如下：
<div> <input type="text" id="question" placeholder="请输入您的问题"> <button id="send">发送</button> </div>
当用户点击发送按钮时，我们可以获取输入框中的文本，并将其发送给服务器。代码如下：
const questionInput = document.getElementById('question');
const sendButton = document.getElementById('send');
sendButton.onclick = () => {
const question = questionInput.value;
// 发送问题给服务器
};2. 服务器端
在服务器端，我们需要创建一个路由，用于接收前端页面发送的 SSE 请求，并返回一个事件流。代码如下：
-- -------------------- ---- -------
----------------------- ----- ---- -- -
-- -----
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-- -----
-------------- -- -
----- ----- - -
--- -----------
----- ----------------
-------- -----------------------
---
------ ---------
--
-------------- ----------------
----------------- -------------------
---------------- --------------------
-- ------
---在上述代码中，我们通过设置响应头的方式告诉浏览器返回的是一个事件流。然后，我们使用 setInterval 函数模拟一个对话机器人，每隔三秒钟向客户端发送一个事件，事件中包含机器人的回复内容。
当客户端发送问题给服务器时，服务器接收到问题后，根据问题生成回复，并将回复作为一个事件发送给客户端。代码如下：
-- -------------------- ---- -------
------------------------ ----- ---- -- -
----- -------- - ------------------
----- ----- - ------------------------
----- ----- - -
--- -----------
----- ----------------
-------- -----
---
------ ---------
--
-------------- ----------------
----------------- -------------------
---------------- --------------------
---在上述代码中，我们通过 req.body 获取前端页面发送的问题，然后根据问题生成回复，并将回复作为一个事件发送给客户端。
至此，我们已经完成了对话机器人的实现。
示例代码
完整的示例代码如下：
前端页面：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------
-------
------
---- ----------------
-----
------ ----------- ------------- ----------------------
------- ---------------------
------
--------
----- ------- - --------------------------------
----- ------------- - ------------------------------------
----- ---------- - --------------------------------
----- ----------- - --- ----------------------------
--------------------- - ------- -- -
----- ---- - -----------------------
----- ------- - -------------
----- - - ----------------------------
----------- - ------- ------------
-----------------------
--
------------------ - -- -- -
----- -------- - --------------------
----- --- - --- -----------------
---------------- ----------------
------------------------------------ --------------------
------------------------- -------- ----
--
---------
-------
-------服务器端：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---------- - -----------------------
----- --- - ----------
---------------------------
----------------------- ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-------------- -- -
----- ----- - -
--- -----------
----- ----------------
-------- -----------------------
---
------ ---------
--
-------------- ----------------
----------------- -------------------
---------------- --------------------
-- ------
---
------------------------ ----- ---- -- -
----- -------- - ------------------
----- ----- - ------------------------
----- ----- - -
--- -----------
----- ----------------
-------- -----
---
------ ---------
--
-------------- ----------------
----------------- -------------------
---------------- --------------------
---
---------------- -- -- -
------------------- ------- -- ------------------------
---
-------- ----------------------- -
-- --------
------ --------------------------------------
-总结
本文介绍了如何使用 SSE 技术实现一个简单的对话机器人，通过实现一个简单的应用场景，帮助前端开发者深入了解 SSE 技术的应用。在实际开发中，我们可以根据需要，结合其他技术，实现更加复杂的实时通信功能，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660d54d2d10417a222dac3be