SSE 扩展实例-JavaScript中文网-JavaScript教程资源分享门户

SSE（Server-Sent Events）即服务器推送事件，是一种 HTML5 技术，允许服务器向客户端发送事件流，客户端通过 EventSource API 监听事件流并处理事件。与传统的轮询和长连接方式相比，SSE 更加高效、快速，能够提供实时的数据通信。

本文将介绍 SSE 的应用场景、使用方法以及一些实例。如果你正在学习 SSE，本文对你会有所帮助。

应用场景

SSE 的应用场景非常广泛，例如在线聊天、股票行情、实时数据展示等等。SSE 可以实时地将数据推送到客户端，通过 EventSource API 收到事件并进行相应的处理，实现了即时通信的功能。

假设我们正在开发一个在线聊天室的应用，传统的实现方式是通过 Ajax 轮询或者 WebSockets 进行消息传输，但是这两种方式都有一些缺点。Ajax 轮询会占用大量的资源，而 WebSockets 只能在服务器端和客户端之间建立一次连接，因此不适用于大量短链接的场景。而 SSE 则可以有效地解决这些问题，通过 EventSource API 监听事件流，接收到新的消息后及时地将其展示在页面上。

使用方法

使用 SSE 需要在服务端设置事件流，客户端通过 EventSource API 监听事件流并进行相应的处理。下面是一个使用 SSE 的示例代码：

服务端 Node.js 代码：

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

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });
  
  setInterval(() => {
    const message = `data: ${new Date()}\n\n`;
    res.write(message);
  }, 1000);
}).listen(3000);

客户端 HTML5 代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>SSE 示例</title>
  </head>
  <body>
    <div id="message"></div>
    <script>
      const source = new EventSource('/sse');
      source.onmessage = event => {
        document.getElementById('message').innerHTML = `服务器时间：${event.data}`;
      };
    </script>
  </body>
</html>

服务端代码通过 setInterval 函数每秒钟向客户端推送一条数据，客户端通过 EventSource API 监听事件流，接收到新的消息后将其展示在页面上。其中，设置了一些响应头，Content-Type 为 text/event-stream，Cache-Control 为 no-cache，Connection 为 keep-alive，这些都是 SSE 必须的。

实例

在线聊天室

我们可以使用 SSE 实现一个简单的在线聊天室，这个聊天室只有一个房间，所有的用户都可以在这个房间中聊天。

服务端 Node.js 代码：

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

http.createServer((req, res) => {
  if (req.url === '/') {
    fs.readFile('sse-example-chatroom.html', (err, data) => {
      if (err) {
        res.writeHead(500, { 'Content-Type': 'text/plain' });
        res.end('500 Internal Server Error');
      } else {
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(data);
      }
    });
  } else if (req.url === '/sse') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });
    clients.push(res);
    res.on('close', () => {
      clients = clients.filter(client => client !== res);
    });
  } else if (req.url === '/message' && req.method.toUpperCase() === 'POST') {
    let body = '';
    req.on('data', chunk => {
      body += chunk;
    });
    req.on('end', () => {
      clients.forEach(client => {
        client.write(`data: ${body}\n\n`);
      });
      res.writeHead(200, { 'Content-Type': 'text/plain' });
      res.end('OK');
    });
  } else {
    res.writeHead(404, { 'Content-Type': 'text/plain' });
    res.end('404 Not Found');
  }
}).listen(3000);

客户端 HTML5 代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>SSE 聊天室</title>
  </head>
  <body>
    <div id="chatbox"></div>
    <form>
      <input type="text" id="message" autocomplete="off"><input type="submit" value="发送">
    </form>
    <script>
      const source = new EventSource('/sse');
      const chatbox = document.getElementById('chatbox');
      const form = document.querySelector('form');
      const message = document.getElementById('message');

      source.onmessage = event => {
        const div = document.createElement('div');
        div.innerText = event.data;
        chatbox.appendChild(div);
      };
      
      form.addEventListener('submit', event => {
        event.preventDefault();
        fetch('/message', {
          method: 'POST',
          headers: {
            'Content-Type': 'text/plain'
          },
          body: message.value
        });
        message.value = '';
      });
    </script>
  </body>
</html>

上面的代码实现了一个简单的聊天室。当用户在表单中输入文本并提交表单时，服务端将文本发送给所有客户端，客户端通过 EventSource API 监听事件流，接收到新的消息后将其展示在页面上。在客户端页面中，我们使用了 fetch API 将文本发送给服务端。

股票行情

我们可以使用 SSE 实现一个简单的股票行情应用，实时展示股票价格的变化。

服务端 Node.js 代码：

// javascriptcn.com 代码示例
const http = require('http');
let stocks = {
  'AAPL': 240.9,
  'GOOG': 1212.1,
  'NFLX': 275.3,
  'FB': 186.3,
  'AMZN': 1843.9,
};

http.createServer((req, res) => {
  if (req.url === '/') {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    let content = '';
    Object.keys(stocks).forEach(stock => {
      content += `<div id="${stock}">${stock}: ${stocks[stock]}</div>`;
    });
    res.end(content);
  } else if (req.url === '/sse') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });
    setInterval(() => {
      Object.keys(stocks).forEach(stock => {
        const change = Math.random();
        const direction = Math.random() >= 0.5 ? 1 : -1;
        stocks[stock] += direction * change;
        const message = `data: ${stock}: ${stocks[stock]}\n\n`;
        res.write(message);
      });
    }, 1000);
  } else {
    res.writeHead(404, { 'Content-Type': 'text/plain' });
    res.end('404 Not Found');
  }
}).listen(3000);

客户端 HTML5 代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>SSE 股票行情</title>
  </head>
  <body>
    <script>
      const source = new EventSource('/sse');
      const stocks = {};
      Object.keys(stocks).forEach(stock => {
        stocks[stock] = document.getElementById(stock);
      });

      source.onmessage = event => {
        const [ stock, price ] = event.data.split(': ');
        const change = price - stocks[stock].innerText.split(': ')[1];
        const color = change > 0 ? 'green' : 'red';
        stocks[stock].innerHTML = `${stock}: <span style="color: ${color}">${price}</span>`;
      };
    </script>
  </body>
</html>

上面的代码实现了一个简单的股票行情应用，服务端每秒钟随机改变股票的价格并向客户端推送，客户端通过 EventSource API 监听事件流，接收到新的消息后将其展示在页面上。在客户端页面中，我们将股票价格的变化使用不同颜色标识出来，以便用户更加直观地了解股票价格的变化情况。

总结

SSE 是一种非常有用的技术，可以实现双向实时通信。SSE 相对于传统的轮询和长连接方式更加高效、快速，应用场景非常广泛。如果你正在考虑使用 SSE 作为数据通信的方案，这篇文章应该对你有所帮助。

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