eventSource-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42779344/article/details/145573846

例

在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>eventSource</title>
    <style>
      .answerBox {
        margin-top: 10px;
        background-color: antiquewhite;
        width: 200px;
        height: 100px;
        line-height: 1.2em;
        padding: 10px;
        overflow: auto;
      }
      .dot::after {
        display: inline-block;
        content: "...";
      }
    </style>
  </head>
  <body>
    测试AI：
    <input id="questionInput" type="text" placeholder="请输入你想问的问题" />
    <input type="button" value="搜索" onclick="searchQuestion()" />
    <div class="answerBox"></div>
    <script>
      const questionEl = document.getElementById("questionInput");
      const answerEl = document.querySelector(".answerBox");
      function searchQuestion() {
        const questionStr = questionEl.value;
        const eventSource = new EventSource(
          "http://127.0.0.1:3000/eventSource"
        );
        const dotEl = document.createElement("span");
        dotEl.className = "dot";
        dotEl.getElementById;
        answerEl.appendChild(dotEl);
        eventSource.onmessage = (e) => {
          const { code, message } = JSON.parse(e.data);
          if (code === -1) {
            answerEl.removeChild(dotEl);
            eventSource.close();
            return;
          }
          dotEl.style.display = "none";
          const textNode = document.createTextNode(message);
          answerEl.insertBefore(textNode, dotEl);
        };
        eventSource.onopen = () => {
          console.log("Connection opened.");
        };
        eventSource.onerror = (e) => {
          if (e.returnState === EventSource.CLOSED) {
            console.log("Connection closed.");
          } else {
            console.log("Error:", e);
          }
        };
      }
    </script>
  </body>
</html>

node

const http = require("http");
const url = require("url");

const mockAnswerData =
  "你好，我是智能助手小C，关于你问的这个问题，我推荐你去问百度。哈哈哈";

const answerFn = (exeFn, index = 0) => {
  const statusCode = index < mockAnswerData.length ? 0 : -1;
  setTimeout(() => {
    exeFn(mockAnswerData[index], statusCode);
    if (statusCode !== -1) {
      answerFn(exeFn, index + 1);
    }
  }, 100);
};

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader("Cache-Control", "no-cache");
  res.setHeader("Connection", "keep-alive");
  const params = url.parse(req.url, true);
  if (params.pathname === "/eventSource") {
    res.setHeader("Content-Type", "text/event-stream; charset=utf-8");
    res.setHeader("Access-Control-Allow-Origin", "*");
    answerFn((text, code) => {
      // 注意格式data: xxx\n\n
      res.write(`data: ${JSON.stringify({ code, message: text })}\n\n`);
    });
  } else {
    res.setHeader("Content-Type", "text/plain; charset=utf-8");
    res.end("你好,找我有什么事情");
  }
});

server.listen(3000);