使用Server-sent events,和浏览器单向通信

一个网页获取新的数据通常需要发送一个请求到服务器,也就是向服务器请求的页面。 使用Server-sent events, 服务器可以在任何时刻向我们的Web页面推送数据。webpack-hot-middleware就是使用Server-sent events来发送热替换消息。
import http from 'node:http';
import { PassThrough } from 'node:stream';
import Koa from 'koa';
import serve from 'koa-static';

const app = new Koa();

app.use(serve('lib', { maxage: 0 }));

let stream;

setInterval(() => {
  if (stream) {
    stream.write(`event: message
data: ${ JSON.stringify({ date: new Date().toString() }) }\n\n`);
  }
}, 1500);

app.use(async function(ctx, next) {
  if (ctx.url === '/ssg') {
    ctx.request.socket.setTimeout(0);
    ctx.req.socket.setNoDelay(true);
    ctx.req.socket.setKeepAlive(true);

    ctx.set({
      'Content-Type': 'text/event-stream; charset=utf-8',
      'Cache-Control': 'no-cache, no-transform',
      'X-Accel-Buffering': 'no',
      Connection: 'keep-alive'
    });

    stream = new PassThrough();
    ctx.status = 200;
    ctx.body = stream;
  }
});

http.createServer(app.callback()).listen(5050);
在浏览器中,通过 EventSource 来创建一个连接,并监听事件。
const evtSource = new EventSource('/ssg');

evtSource.addEventListener('open', function(event) {
  console.log('open');
});

evtSource.addEventListener('message', function(event) {
  console.log('message: ', event.data);
});