SSE 在不同场景下应该如何使用？-JavaScript中文网-JavaScript教程资源分享门户

SSE（Server-Sent Events）是一种基于 HTTP 的实时通信技术，它允许服务器向客户端推送数据，而无需客户端主动发起请求。SSE 可以用于实现实时聊天、股票行情、天气预报等实时数据更新的应用。在本文中，我们将探讨 SSE 在不同场景下应该如何使用。

基本使用

SSE 的基本使用非常简单。客户端通过 EventSource 对象向服务器发送请求，服务器发送数据时，将数据包装成 SSE 格式的消息，发送给客户端。客户端通过监听 message 事件，接收服务器发送的消息。以下是一个简单的示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>SSE Demo</title>
</head>
<body>
  <ul id="messages"></ul>
  <script>
    const eventSource = new EventSource('/stream');
    const messages = document.getElementById('messages');
    eventSource.onmessage = function(event) {
      const li = document.createElement('li');
      li.textContent = event.data;
      messages.appendChild(li);
    };
  </script>
</body>
</html>

服务器端代码如下：

// www.javascriptcn.com code example
const http = require('http');

http.createServer(function(req, res) {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });
  res.write('data: Hello, world!\n\n');
}).listen(8080);

在这个示例中，服务器向客户端发送一条消息，客户端接收到消息后，在页面上显示出来。需要注意的是，每条消息必须以 data: 开头，以 \n\n 结尾。

实时聊天

SSE 可以用于实现实时聊天的应用。以下是一个简单的聊天室示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>Chat Room</title>
</head>
<body>
  <ul id="messages"></ul>
  <form>
    <input type="text" id="message" placeholder="Type your message here">
    <button type="submit">Send</button>
  </form>
  <script>
    const eventSource = new EventSource('/stream');
    const messages = document.getElementById('messages');
    const form = document.querySelector('form');
    const input = document.getElementById('message');
    form.addEventListener('submit', function(event) {
      event.preventDefault();
      const message = input.value;
      input.value = '';
      fetch('/message', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({message})
      });
    });
    eventSource.onmessage = function(event) {
      const li = document.createElement('li');
      li.textContent = event.data;
      messages.appendChild(li);
    };
  </script>
</body>
</html>

服务器端代码如下：

// www.javascriptcn.com code example
const http = require('http');
const fs = require('fs');
const url = require('url');
const querystring = require('querystring');

const messages = [];

http.createServer(function(req, res) {
  const {pathname} = url.parse(req.url);
  if (pathname === '/stream') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });
    setInterval(function() {
      messages.forEach(function(message) {
        res.write(`data: ${message}\n\n`);
      });
      messages.length = 0;
    }, 1000);
  } else if (pathname === '/message' && req.method === 'POST') {
    let body = '';
    req.on('data', function(chunk) {
      body += chunk;
    });
    req.on('end', function() {
      const {message} = JSON.parse(body);
      messages.push(message);
      res.writeHead(200, {'Content-Type': 'text/plain'});
      res.end('OK');
    });
  } else {
    res.writeHead(404, {'Content-Type': 'text/plain'});
    res.end('Not Found');
  }
}).listen(8080);

在这个示例中，客户端通过表单提交消息，服务器端将消息保存到数组中。客户端通过 SSE 接收服务器发送的消息，并在页面上显示出来。

股票行情

SSE 可以用于实时更新股票行情。以下是一个简单的股票行情示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>Stock Quote</title>
</head>
<body>
  <ul id="quotes"></ul>
  <script>
    const eventSource = new EventSource('/stream');
    const quotes = document.getElementById('quotes');
    eventSource.onmessage = function(event) {
      const data = JSON.parse(event.data);
      const li = document.createElement('li');
      li.textContent = `${data.symbol}: ${data.price}`;
      quotes.appendChild(li);
    };
  </script>
</body>
</html>

服务器端代码如下：

// www.javascriptcn.com code example
const http = require('http');

const stocks = [
  {symbol: 'AAPL', price: 148.48},
  {symbol: 'GOOG', price: 1063.63},
  {symbol: 'MSFT', price: 95.01},
  {symbol: 'AMZN', price: 1796.62},
  {symbol: 'FB', price: 170.89}
];

http.createServer(function(req, res) {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });
  setInterval(function() {
    const stock = stocks[Math.floor(Math.random() * stocks.length)];
    res.write(`data: ${JSON.stringify(stock)}\n\n`);
  }, 1000);
}).listen(8080);

在这个示例中，服务器端随机生成股票行情，并将行情以 JSON 格式发送给客户端。客户端通过 SSE 接收服务器发送的行情，并在页面上显示出来。

指导意义

SSE 是一种简单易用的实时通信技术，它可以用于实现实时聊天、股票行情、天气预报等实时数据更新的应用。在使用 SSE 时，需要注意以下几点：

SSE 只支持单向通信，即服务器向客户端发送数据。如果需要双向通信，可以考虑使用 WebSocket。
SSE 的数据格式必须符合规范，即以 data: 开头，以 \n\n 结尾。
SSE 的连接默认不断开，需要在服务器端设置合适的超时时间，以避免长时间占用服务器资源。
SSE 可以通过设置不同的事件类型，实现对不同类型的数据进行分类。
SSE 可以通过设置不同的重试时间，实现对不同类型的数据进行不同的推送频率。

总之，SSE 是一种非常有用的实时通信技术，可以大大提高应用的实时性和用户体验。在使用 SSE 时，需要根据具体场景进行合理的使用和设置，以达到最佳效果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d50c01a941bf713495bd18

SSE 在不同场景下应该如何使用？

基本使用

实时聊天

股票行情

指导意义

接着读