利用 SSE 实现多人在线问答系统-JavaScript中文网-JavaScript教程资源分享门户

什么是 SSE

SSE（Server-Sent Events）是一种基于 HTTP 的服务器推送技术，可以实现服务器向客户端主动推送数据。相对于传统的轮询技术，SSE 可以大幅减少网络流量和服务器压力，同时也能够实时推送数据，提高了用户体验。

多人在线问答系统的需求

在多人在线问答系统中，需要实现以下功能：

实时展示其他用户的问题和回答；
用户可以提交问题和回答；
问题和回答需要实时推送给其他用户。

服务器端实现

服务器端需要实现以下功能：

接收用户提交的问题和回答；
把问题和回答推送给其他用户。

以下是服务器端的示例代码：

// javascriptcn.com 代码示例
const http = require('http');
const fs = require('fs');

const server = http.createServer((req, res) => {
  if (req.url === '/') {
    const html = fs.readFileSync('index.html', 'utf-8');
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(html);
  } else if (req.url === '/sse') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });

    // 推送数据
    setInterval(() => {
      const data = `data: ${new Date().toLocaleTimeString()}\n\n`;
      res.write(data);
    }, 1000);
  }
});

server.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

上面的代码中，当用户访问根路径时，服务器会返回一个 HTML 文件。当用户访问 /sse 路径时，服务器会返回一个 SSE 流，并且每隔一秒钟发送一条数据。

客户端实现

客户端需要实现以下功能：

连接服务器的 SSE 流；
接收服务器推送的数据；
把数据展示在页面上；
提交问题和回答给服务器。

以下是客户端的示例代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>多人在线问答系统</title>
</head>
<body>
  <h1>多人在线问答系统</h1>
  <div id="questions"></div>
  <form>
    <input type="text" name="question" placeholder="请输入问题">
    <button type="submit">提交问题</button>
  </form>
  <div id="answers"></div>
  <form>
    <input type="text" name="answer" placeholder="请输入回答">
    <button type="submit">提交回答</button>
  </form>
  <script>
    const questions = document.getElementById('questions');
    const answers = document.getElementById('answers');

    // 连接 SSE 流
    const sse = new EventSource('/sse');
    sse.addEventListener('message', (event) => {
      const data = event.data;
      const div = document.createElement('div');
      div.innerText = data;
      questions.appendChild(div);
    });

    // 提交问题
    const questionForm = document.forms[0];
    questionForm.addEventListener('submit', (event) => {
      event.preventDefault();
      const question = questionForm.elements.question.value;
      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/question');
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.send(JSON.stringify({question}));
      questionForm.reset();
    });

    // 提交回答
    const answerForm = document.forms[1];
    answerForm.addEventListener('submit', (event) => {
      event.preventDefault();
      const answer = answerForm.elements.answer.value;
      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/answer');
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.send(JSON.stringify({answer}));
      answerForm.reset();
    });
  </script>
</body>
</html>

上面的代码中，客户端会连接服务器的 /sse 路径，并且监听 message 事件，把接收到的数据展示在页面上。客户端还提供了两个表单，用于提交问题和回答。当用户提交问题和回答时，客户端会向服务器发送 POST 请求。

总结

在本文中，我们介绍了 SSE 技术，并利用 SSE 实现了一个多人在线问答系统。通过阅读本文，读者可以学习到 SSE 的原理和应用，并且可以根据示例代码实现一个实时推送数据的应用程序。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655cbf43d2f5e1655d7002f5