如何在express.js中使用server-sent-events

时间：2016-01-07 14:09:07

标签： javascript node.js express server-sent-events

我使用express.js设置我的REST服务器。现在我想将sse添加到此服务器。在我实现了this sse包后，我收到了一个错误。我知道我得到这个错误，什么时候尝试使用res.send两次，但我不是。

ERROR: Error: Can't set headers after they are sent.                                            
    at ServerResponse.OutgoingMessage.setHeader (http.js:690:11)                            
    at ServerResponse.header (/home/root/node_modules/express/lib/response.js:718:10)         
    at ServerResponse.send (/home/root/node_modules/express/lib/response.js:163:12)            
    at app.get.str (/home/root/.node_app_slot/main.js:1330:25)                                 
    at Layer.handle [as handle_request] (/home/root/node_modules/express/lib/router/layer.js:95:5)    
    at next (/home/root/node_modules/express/lib/router/route.js:131:13)                       
    at sse (/home/root/node_modules/server-sent-events/index.js:35:2)                          
    at Layer.handle [as handle_request] (/home/root/node_modules/express/lib/router/layer.js:95:5)  
    at next (/home/root/node_modules/express/lib/router/route.js:131:13)                          
    at Route.dispatch (/home/root/node_modules/express/lib/router/route.js:112:3)

我是否有可能在sse函数中不再使用express方法？例如：

app.get('/events', sse, function(req, res) {
    res.send('...');
});

此外，我找到了this解决方案和this。是否可以使用res.write函数或以其他方式使用其他包而无法使用？

7 个答案:

答案 0 :(得分：4)

我不同意使用Socket.IO实现基本的服务器发送事件。浏览器API非常简单，在Express中的实现只需要对正常响应路径进行几处更改即可：

app.get('/streaming', (req, res) => {

    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.flushHeaders(); // flush the headers to establish SSE with client

    let counter = 0;
    let interValID = setInterval(() => {
        counter++;
        if (counter >= 10) {
            clearInterval(interValID);
            res.end(); // terminates SSE session
            return;
        }
        res.write(`data: ${JSON.stringify({num: counter})}\n\n`); // res.write() instead of res.send()
    }, 1000);

    // If client closes connection, stop sending events
    res.on('close', () => {
        console.log('client dropped me');
        clearInterval(interValID);
        res.end();
    });
});
  • 根据规范设置适当的标题
  • 使用res.flushHeaders（）建立SSE连接
  • 使用res.write（）而不是res.send（）发送数据
  • 要从服务器结束流，请使用res.end（）

上面的代码段使用setInterval（）模拟向客户端发送数据10秒钟，然后结束连接。客户端将收到有关丢失的连接的错误，并自动尝试重新建立连接。为避免这种情况，您可以在出错时关闭客户端，或者让浏览器发送特定的事件消息，客户端认为该消息可以正常关闭。如果客户端关闭连接，我们可以捕获“ close”事件以在服务器上正常终止连接并停止发送事件。

表达：4.17.1 节点：10.16.3

答案 1 :(得分：3)

如果没有其他套餐，你绝对可以做到这一点。

我写了一篇关于此的博文，part 1列出了基础知识。

答案 2 :(得分：3)

新答案：

只需使用socket.io，它就更容易也更好！ https://www.npmjs.com/package/socket.io#in-conjunction-with-express

基本设置：

const express = require('express');
const PORT = process.env.PORT || 5000;
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
// listen to socket connections
io.on('connection', function(socket){
  // get that socket and listen to events
  socket.on('chat message', function(msg){
    // emit data from the server
    io.emit('chat message', msg);
  });
});
// Tip: add the `io` reference to the request object through a middleware like so:
app.use(function(request, response, next){
  request.io = io;
  next();
});
server.listen(PORT);
console.log(`Listening on port ${PORT}...`);

并且在任何路由处理程序中，您都可以使用socket.io：

app.post('/post/:post_id/like/:user_id', function likePost(request, response) {
  //...
  request.io.emit('action', 'user liked your post');
})

客户方：

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  $(function () {
    var socket = io();
    $('form').submit(function(e){
      e.preventDefault(); // prevents page reloading
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
    socket.on('chat message', function(msg){
      $('#messages').append($('<li>').text(msg));
    });
  });
</script>

完整示例：https://socket.io/get-started/chat/

原始答案：

某人（用户：https://stackoverflow.com/users/451634/benny-neugebauer |来自本文：addEventListener on custom object）字面上给了我一个关于如何实现这一点的提示，除了快递之外没有任何其他包！我有它的工作！

首先，导入Node的EventEmitter：

const EventEmitter = require('events');

然后创建一个实例：

const Stream = new EventEmitter();

然后为事件流创建一个GET路由：

app.get('/stream', function(request, response){
  response.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  Stream.on("push", function(event, data) {
    response.write("event: " + String(event) + "\n" + "data: " + JSON.stringify(data) + "\n\n");
  });
});

在这个GET路由中，你写的是请求是200 OK，content-type是text / event-stream，没有缓存，还有keep-alive。

您还将调用EventEmitter实例的.on方法，该方法需要2个参数：要侦听的事件的字符串和处理该事件的函数（该函数可以使用尽可能多的参数）

现在....发送服务器事件所需要做的就是调用EventEmitter实例的.emit方法：

Stream.emit("push", "test", { msg: "admit one" });

第一个参数是您要触发的事件的字符串（确保它与GET路由中的事件相同）。 .emit方法的每个后续参数都将传递给侦听器的回调！

就是这样！

由于您的实例是在路由定义上方的范围内定义的，因此您可以从任何其他路径调用.emit方法：

app.get('/', function(request, response){
  Stream.emit("push", "test", { msg: "admit one" });
  response.render("welcome.html", {});
});

感谢JavaScript作用域的工作原理，您甚至可以将EventEmitter实例传递给其他函数，甚至可以从其他模块传递：

const someModule = require('./someModule');

app.get('/', function(request, response){
  someModule.someMethod(request, Stream)
  .then(obj => { return response.json({}) });
});

在someModule中：

function someMethod(request, Stream) { 
  return new Promise((resolve, reject) => { 
    Stream.emit("push", "test", { data: 'some data' });
    return resolve();
  }) 
}

那很简单！不需要其他包裹！

以下是Node的EventEmitter类的链接：https://nodejs.org/api/events.html#events_class_eventemitter

我的例子：

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

const Stream = new EventEmitter(); // my event emitter instance

app.get('/stream', function(request, response){
  response.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  Stream.on("push", function(event, data) {
    response.write("event: " + String(event) + "\n" + "data: " + JSON.stringify(data) + "\n\n");
  });
});

setInterval(function(){
  Stream.emit("push", "test", { msg: "admit one" });
}, 10000)

答案 3 :(得分：1)

从您正在使用的库中的文档中可以看出，当您将其用作函数的中间件时，应使用res.sse。看到： https://www.npmjs.com/package/server-sent-events

但是，正如你所提到的，所有这一切实际上都来自他们的代码正在包装res.write。看到： https://github.com/zacbarton/node-server-sent-events/blob/master/index.js#L11

答案 4 :(得分：1)

自我推销：我编写的ExpreSSE软件包提供了在快递中使用SSE的中间件，你可以在npm找到它： @toverux/expresse 。

一个简单的例子：

router.get('/events', sse(/* options */), (req, res) => {
    let messageId = parseInt(req.header('Last-Event-ID'), 10) || 0;

    someModule.on('someEvent', (event) => {
        //=> Data messages (no event name, but defaults to 'message' in the browser).
        res.sse.data(event);
        //=> Named event + data (data is mandatory)
        res.sse.event('someEvent', event);
        //=> Comment, not interpreted by EventSource on the browser - useful for debugging/self-documenting purposes.
        res.sse.comment('debug: someModule emitted someEvent!');
        //=> In data() and event() you can also pass an ID - useful for replay with Last-Event-ID header.
        res.sse.data(event, (messageId++).toString());
    });
});

还有另一个中间件可以将相同的事件推送到多个客户端。

答案 5 :(得分：-1)

我说使用socket.io：https://www.npmjs.com/package/socket.io

它可以满足您的所有需求以及更多功能。服务器发送的事件，双向事件，通道等等！

答案 6 :(得分：-1)

这向 read the stream 添加了一个完整的、可运行的示例（客户端到 John's excellent answer）并进行了调整，添加了 Connection: keep-alive 标头。

server.js：

const express = require("express");
const fs = require("fs").promises;
const path = require("path");

const app = express();
app
  .set("port", process.env.PORT || 5000)
  .get("/", (req, res) => {
    fs.readFile(path.join(__dirname, "client.html"))
      .then(file => res.send(file.toString()))
      .catch(err => res.status(404).send(err.message))
    ;
  })
  .get("/stream", (req, res) => {
    res.set({
      "Access-Control-Allow-Origin": "*",
      "Cache-Control": "no-cache",
      "Connection": "keep-alive",
      "Content-Type": "text/event-stream",
    });
    res.flushHeaders();
  
    let counter = 0;
    const interval = setInterval(() => {
      res.write("" + counter++);
    }, 1000);
  
    res.on("close", () => {
      clearInterval(interval);
      res.end();
    });
  })
  .listen(app.get("port"), () =>
    console.log(`server listening on port ${app.get("port")}`)
  )
;

client.html：

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<script>

(async () => {
  const response = await fetch("/stream");

  if (!response.ok) {
    throw Error(response.status());
  }

  for (const reader = response.body.getReader();;) {
    const {value, done} = await reader.read();

    if (done) {
      break;
    }

    document.body.innerText = new TextDecoder().decode(value);
  }
})();

</script>
</body>
</html>

在 node server.js 之后，将浏览器导航至 localhost:5000。您也可以直接使用 curl localhost:5000/stream 测试流。

我不会重复约翰回答中的注释，但简而言之，我们设置必要的标头并刷新它们以开始连接，然后使用 res.write 发送一大块数据。调用 res.end() 终止服务器上的连接或侦听 res.on("close", ...) 以让客户端关闭连接。

客户端使用 fetch 和 response.body.getReader()，它们可以用 const {value, done} = await reader.read() 读取，decoded 用 TextDecoder().decode(value) 读取。

另见https://masteringjs.io/tutorials/express/server-sent-events

Express 4.17.1、Node 15.2.0、Chrome 89.0.4389.128（官方版本）（64 位）

相关问题
最新问题