浅谈html5之sse服务器发送事件EventSource介绍

浅谈html5之sse服务器发送事件EventSource介绍是一篇关于HTML5中EventSource的使用的介绍性文章。文章的主要内容包括：

简介

介绍什么是EventSource，EventSource的作用是什么，它与WebSocket的区别是什么。

使用方法

1. 如何创建EventSource对象
2. 如何监听EventSource的消息事件
3. 如何关闭EventSource连接

示例说明

示例1

以Node.js为例，展示如何通过EventSource发送消息给客户端。

// 服务器端
const http = require("http");
const fs = require("fs");

http.createServer((req, res)=>{
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.setHeader('Access-Control-Allow-Origin', '*');

  const stream = fs.createReadStream(path, {encoding: 'utf-8'});
  stream.on('data', data => res.write(`data: ${data}\n\n`));
  stream.on('end', () => res.end());
}).listen(3000);

<!-- 客户端 -->
<script>
  const eventSource = new EventSource("http://localhost:3000");
  eventSource.onmessage = (e) => {
    console.log(e.data);
  };
</script>

通过以上代码，我们可以在控制台输出服务器端发送的消息。

示例2

以github api为例，展示如何通过EventSource监听特定资源的变化。

<!-- 客户端 -->
<script>
  const eventSource = new EventSource(
    "https://api.github.com/users/xxxxx/events"
  );
  eventSource.onmessage = (e) => {
    console.log(e.data);
  };
</script>

通过以上代码，我们可以监听 https://api.github.com/users/xxxxx/events 的变化。

结束

总结EventSource的优缺点，并提出对于该技术的一些建议和注意事项。

以上是浅谈html5之sse服务器发送事件EventSource介绍的攻略，希望对您有所帮助。