web-dev-qa-db-ja.com

Node.jsでサーバー送信イベントを実装する簡単な方法は？

私は周りを見回しましたが、Node.jsでSSEを実装するすべての方法がより複雑なコードを介しているかのようですが、SSEを送受信する簡単な方法があるはずです。これを簡単にするAPIまたはモジュールはありますか？

javascriptnode.jsserver-sent-events
11
Jasch1

以下は、1秒あたり1つのサーバー送信イベント（SSE）を送信する高速サーバーで、10から0にカウントダウンします。

const express = require('express')

const app = express()
app.use(express.static('public'))

app.get('/countdown', function(req, res) {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  })
  countdown(res, 10)
})

function countdown(res, count) {
  res.write("data: " + count + "\n\n")
  if (count)
    setTimeout(() => countdown(res, count-1), 1000)
  else
    res.end()
}

app.listen(3000, () => console.log('SSE app listening on port 3000!'))

上記のコードをファイル（index.js）に入れて実行します：node index

次に、次のHTMLをファイル（public/index.html）に入れます。

<html>
<head>
  <script>
  if (!!window.EventSource) {
    var source = new EventSource('/countdown')

    source.addEventListener('message', function(e) {
      document.getElementById('data').innerHTML = e.data
    }, false)

    source.addEventListener('open', function(e) {
      document.getElementById('state').innerHTML = "Connected"
    }, false)

    source.addEventListener('error', function(e) {
      const id_state = document.getElementById('state')
      if (e.eventPhase == EventSource.CLOSED)
        source.close()
      if (e.target.readyState == EventSource.CLOSED) {
        id_state.innerHTML = "Disconnected"
      }
      else if (e.target.readyState == EventSource.CONNECTING) {
        id_state.innerHTML = "Connecting..."
      }
    }, false)
  } else {
    console.log("Your browser doesn't support SSE")
  }
  </script>
</head>
<body>
  <h1>SSE: <span id="state"></span></h1>
  <h3>Data: <span id="data"></span></h3>
</body>
</html>

ブラウザーでlocalhost:3000を開き、SSEカウントダウンを確認します。

26
Brent Washburne

サーバー送信イベントは非常に単純です。それについての私の2つのパートのブログ投稿を見てください。

  1. http://bayn.es/real-time-web-applications-with-server-sent-events-pt-1/
  2. http://bayn.es/real-time-web-apps-with-server-sent-events-pt-2/
7
baynezy

私はSSE node.jsの実装を見つけました。

Githubリンク： https://github.com/einaros/sse.js

NPMモジュール： https://www.npmjs.com/package/sse

上記のリンクはあなたを助けますか？

3
Gurucharan M K

ここでは、SSEの単純な実装を追加しています。これは、1つのNode.jsファイルです。

あなたはここで結果を見ることができます： https://glossy-ox.glitch.me/

const http = require('http');
const port = process.env.PORT || 3000;

const server = http.createServer((req, res) => {
  // Server-sent events endpoint
  if (req.url === '/events') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
    });

    const refreshRate = 1000; // in milliseconds
    const id = Date.now();
    const data = `Hello World ${id}`;
    const message =
      `retry: ${refreshRate}\nid:${id}\ndata: ${data}\n\n`;
    res.end(message);
    return;
  }

  // Client side
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end(`
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>SSE</title>
      </head>
      <body>
        <pre id="log"></pre>
      </body>
      <script>
        var eventSource = new EventSource('/events');
        eventSource.onmessage = function(event) {
          document.getElementById('log').innerHTML += event.data + '<br>';
        };
      </script>
    </html>
  `);
});

server.listen(port);

server.on('error', (err) => {
  console.log(err);
  process.exit(1);
});

server.on('listening', () => {
  console.log(`Listening on port ${port}`);
});
2
codeKonami

エクスプレスを使用している場合、これが最も簡単な方法です https://www.npmjs.com/package/express-sse

bE：

const SSE = require('express-sse');

const sse = new SSE();

...

app.get('/sse', sse.init);

...

sse.send('message', 'event-name');

fE：

const EventSource = require('eventsource');

const es = new EventSource('http://localhost:3000/sse');

es.addEventListener('event-name', function (message) {
  console.log('message:', message)
});
2
Yurii Miniv
**client.js**

var eventSource = new EventSource("/route/events");
eventSource.addEventListner("ping", function(e){log(e.data)});

//if no events specified
eventSource.addEventListner("message", function(e){log(e.data)});

**server.js**

http.createServer((req, res)=>{

    if(req.url.indexOf("/route/events")>=){

      res.setHeader('Connection', 'keep-alive');

      res.setHeader("Cache-Control", "no-cache");

      res.setHeader("Content-Type", "text/event-stream");

      let event = "event: ping";

      let id = `id: ${Date.now()}`;

      let data = {
         message:`hello @${new Date().toString()}`
      }

      data = "data: "+JSON.stringify(data);

      res.end(`${event}\n${id}\n${data}\n\n`);
   }
}).listen(PORT)
0
Manish Kumar