为什么同时具有事件和数据的服务器发送事件不会在前端触发?

时间:2019-05-21 18:28:24

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

我想通过Express.js来演示服务器发送事件的用法,方法是使用node.js的内置事件包创建一个带有邮政表单的HTML文件和一个核心JS文件的应用,并获取MDN文章https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events中的基础知识。

操作系统是Win10,node.js版本是10.15.1,唯一直接依赖是express ^ 4.17.0,实际版本是4.17.0。

js

app.use(bodyParser.urlencoded({extended: false}));

app.get('/consoleEvent', function(req,res){
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
  });
  res.write('');
  myEmitter.on('postConsoleEvent', function(data, event){
    if(data && event) {
      res.write(`event: ${event}${'\n'}data: ${data}${'\n\n'}`);
    } else if(data){
      res.write(`data: ${data}${'\n\n'}`);
    } 
  })
});

app.post('/postConsoleEvent', function(req, res){
  if(!req.body || !req.body.data){
    res.status(204).end(); // on bad request sending 204 to ignore request, 400 will redirect user to error
  } else {
    myEmitter.emit('postConsoleEvent', req.body.data, req.body.event);
    res.status(204).end();
  }
})

app.get('/', function(req, res){
  res.sendFile(path.join(__dirname + '/index.html'));
});

index.html


    <script>
      // using old syntax for being more sure in browser compatibility
      var consoleEvent = new EventSource('/consoleEvent');
      consoleEvent.onmessage = function(e) {
        console.log('onmessage triggered'); // does not trigger on both event and data
        if (e.event){
          console.log('Event: "'+e.event+'"; Data: "'+e.data+'"');
        } else {
          console.log('Data: "'+e.data+'"');
        }
      }
    </script>



    <form action="/postConsoleEvent" method="POST">
      <label for="eventField">Event: </label><br>
      <input type="text" name="event" id="eventField" /><br>
      <label for="dataField">Data: (required, if omitted nothing will happen) </label><br>
      <input type="text" name="data" id="dataField" /><br><br>
      <input type="submit" value="submit">
    </form>

如果仅输入“数据”,一切都可以正常工作,但是如果您同时使用两个字段,则服务器会在不同的行上同时写入“事件”和“数据”,但是前端事件不会触发。

0 个答案:

没有答案