Server-Sent Events (SSE) Koa2 & Nginx & React 实践

得鹿梦鱼 前端+node全栈，骑马找马中，有兴趣可私聊 ​关注他  

在现代 Web 应用中，实时数据传输变得越来越重要。Server-Sent Events (SSE) 是一种轻量级的技术，允许服务器向客户端主动发送更新。本文将详细介绍如何在 Koa2 框架下实现 SSE，并配置 Nginx 以支持 HTTP 和 HTTPS 协议。同时，我们还将展示如何在 React 前端使用 axios 来接收这些事件。

什么是 Server-Sent Events?

Server-Sent Events (SSE) 是一种基于 HTTP 的实时数据传输技术。与 WebSocket 不同，SSE 仅支持单向通信，即服务器到客户端。这使得 SSE 在某些场景下更为简单和高效，特别是当只需要从服务器推送数据到客户端时。

在 Koa2 中实现 SSE

首先，我们需要创建一个 Koa2 应用，并设置一个路由来处理 SSE 连接。

1. 创建 Koa2 应用

安装必要的依赖：

npm init -y
npm install koa koa-router

创建 app.js 文件，并设置基本的 Koa2 应用结构：

const Koa = require('koa'); const Router = require('koa-router'); const app = new Koa(); const router = new Router(); // SSE 路由处理 router.get('/events', async (ctx, next) => { // SSE 相关逻辑将在这里实现 }); app.use(router.routes()).use(router.allowedMethods()); app.listen(3000, () => { console.log('Server is running on http://localhost:3000'); }); 

2. 实现 SSE 逻辑

在 /events 路由中，我们需要设置响应头以支持 SSE，并发送实时数据：

router.get('/events', async (ctx, next) => { // 设置响应头  ctx.set({ 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' }); // 发送数据  const sendEvent = (data) => { ctx.res.write(`data: ${JSON.stringify(data)}\n\n`); }; // 模拟实时数据发送  const interval = setInterval(() => { const message = { time: new Date().toLocaleTimeString() }; sendEvent(message); }, 1000); // 当客户端关闭连接时清除定时器  ctx.req.on('close', () => { clearInterval(interval); }); }); 

配置 Nginx 以支持 SSE

为了使 SSE 同时支持 HTTP 和 HTTPS，我们需要在 Nginx 中进行相应的配置。

假设你已经安装了 Nginx，并且有一个域名 example.com 指向你的服务器。

1. 修改 Nginx 配置文件

编辑你的 Nginx 配置文件（通常位于 /etc/nginx/sites-available/example.com），添加以下内容：

server { listen 80; listen [::]:80; server_name example.com; location / { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Connection ''; proxy_buffering off; } } server { listen 443 ssl; listen [::]:443 ssl; server_name example.com; # SSL 证书配置（省略）  location / { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Connection ''; proxy_buffering off; } } 

这里的关键是设置 proxy_http_version 为 1.1，并将 Connection 头设置为空字符串，以及关闭 proxy_buffering。

2. 重启 Nginx

sudo systemctl restart nginx

在 React 前端使用 axios 接收 SSE

现在我们来创建一个简单的 React 应用来接收服务器发送的事件。

1. 创建 React 应用

使用 create-react-app 创建一个新的 React 应用：

npx create-react-app sse-client
cd sse-client npm start 

2. 使用 axios 接收事件

安装 axios：

npm install axios

修改 src/App.js，使用 axios 接收 SSE：

import React, { useState, useEffect } from 'react'; import axios from 'axios'; function App() { const [events, setEvents] = useState([]); useEffect(() => { const eventSource = axios.get('http://example.com/events', { responseType: 'stream' }); eventSource.then(response => { response.data.on('data', (event) => { const parsedEvent = JSON.parse(event.data); setEvents((prevEvents) => [...prevEvents, parsedEvent]); }); }); return () => { eventSource.cancel(); }; }, []); return ( <div className="App"> <h1>Server-Sent Events</h1> <ul> {events.map((event, index) => ( <li key={index}>{event.time}</li> ))} </ul> </div> ); } export default App; 

总结

通过本文，我们学习了如何在 Koa2 应用中实现 Server-Sent Events，配置 Nginx 以支持 HTTP 和 HTTPS 协议，并在 React 前端使用 axios 接收这些事件。SSE 提供了一种轻量级的方法来实现服务器到客户端的实时数据传输，适用于许多实时应用场景。希望本文能帮助你更好地理解和使用 SSE。

编辑于 2024-02-20 11:04・IP 属地浙江