JavaScript EventSource|极客笔记

JavaScript EventSource

1. 概述

JavaScript的EventSource（事件源）对象提供了一种在客户端与服务器之间实现服务器推送的机制。它允许服务器通过HTTP协议发送事件流（Event stream）到客户端，而无需通过客户端的Ajax轮询。

EventSource对象是HTML5的一部分，由W3C规范定义。它的用途主要是实现实时通信（Real-time Communication, RTC）和服务器推送技术。

本文将详细介绍EventSource对象的使用方法、属性和事件，并通过示例代码演示其在实际开发中的应用。

2. EventSource的创建

要使用EventSource对象，首先需要创建一个EventSource实例。创建EventSource实例时，需要传入一个URL参数，用于指定服务器端的事件源。例如：

const eventSource = new EventSource('/event-stream');

上述代码创建了一个EventSource对象，并指定了服务器端的事件源为/event-stream。

3. EventSource事件

EventSource对象提供了多个事件，用于监听与服务器端的通信状态。

3.1 open事件

当与服务器端建立连接时，open事件被触发。可以通过监听open事件来判断与服务器的连接状态，并执行相应的操作。例如：

eventSource.addEventListener('open', () => {
  console.log('连接已建立');
});

3.2 message事件

当服务器发送事件流（Event stream）时，message事件被触发。可以通过监听message事件来获取服务器发送的数据，并执行相应的操作。例如：

eventSource.addEventListener('message', (event) => {
  console.log('接收到数据：', event.data);
});

3.3 error事件

当与服务器的连接发生错误时，error事件被触发。可以通过监听error事件来处理连接错误，并执行相应的操作。例如：

eventSource.addEventListener('error', (error) => {
  console.error('连接错误：', error);
});

3.4 示例

下面是一个完整的示例，演示了如何监听EventSource的open、message和error事件：

const eventSource = new EventSource('/event-stream');

eventSource.addEventListener('open', () => {
  console.log('连接已建立');
});

eventSource.addEventListener('message', (event) => {
  console.log('接收到数据：', event.data);
});

eventSource.addEventListener('error', (error) => {
  console.error('连接错误：', error);
});

4. EventSource属性

EventSource对象还提供了一些属性，用于获取与服务器端的连接状态和事件信息。

4.1 readyState属性

readyState属性用于获取与服务器的连接状态。它的值有以下几种：

CONNECTING：正在与服务器建立连接。
OPEN：与服务器已建立连接。
CLOSED：与服务器的连接已关闭。

可以通过监听readyState属性的变化，来获取当前连接的状态。例如：

console.log('连接状态：', eventSource.readyState);

4.2 url属性

url属性用于获取EventSource对象所连接的服务器端URL。例如：

console.log('连接到的服务器URL：', eventSource.url);

4.3 withCredentials属性

withCredentials属性用于设置是否发送跨域请求时发送凭证（如Cookie、HTTP认证等）。默认值为false，表示不发送凭证。例如：

eventSource.withCredentials = true;

4.4 示例

下面是一个示例，演示了如何使用EventSource的属性：

const eventSource = new EventSource('/event-stream');

console.log('连接状态：', eventSource.readyState);
console.log('连接到的服务器URL：', eventSource.url);

eventSource.withCredentials = true;

5. 服务器端配置

要使用EventSource，服务器端需要配置支持服务器推送（Server-Sent Events）的功能。服务器需要设置特定的HTTP头，并按照规范发送事件流。

以下是一个使用Node.js和Express框架搭建的简单示例，展示了如何配置服务器端以支持EventSource：

const express = require('express');
const app = express();

app.get('/event-stream', (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', '*');

  // 模拟发送事件流
  setInterval(() => {
    const data = new Date().toString();
    res.write(`data: ${data}\n\n`);
  }, 1000);
});

app.listen(3000, () => {
  console.log('服务器已启动');
});

上述代码创建了一个Express应用，并定义了一个/event-stream的路由。在该路由上，设置了必要的HTTP头，并使用setInterval定时发送事件流。