blocks|key|4425667|text|您应该能够使用Socket.io来做这样的事情。首先，您需要使用npm+install+socket.io安装它。在那里，在您的代码中，您将希望拥有var+io+=+require(socket.io);|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4425668|你可以看到more+in-depth+examples+given+by+Socket.IO|4425669|您可以在服务器上使用类似以下内容：|4425670|var+express+=+require('express');
var+app+=+express();
var+server+=+require('http').createServer(app);
var+io+=+require('../..')(server);
var+port+=+process.env.PORT+%7C%7C+3000;

server.listen(port,+function+()+{
++console.log('Server+listening+at+port+'+%2B+port);
});

app.use(express.static(__dirname+%2B+'/public'));

io.on('connection',+function+(socket)+{
++++socket.emit('EVENT_NAME',+{data});
});|code-block|syntax|javascript|4425671|在客户机上是这样的：|4425672|<script+src="socket_src_file_path_here"></script>
<script>
++var+socket+=+io('http://localhost');
++socket.on('EVENT_NAME',+function+(data)+{
++++console.log(data);
++++//Do+whatever+you+want+with+the+data+on+the+client
++});
</script>|4425673|entityMap|0|LINK|mutability|MUTABLE|url|http://socket.io/|1|https://github.com/socketio/socket.io/blob/master/examples/chat/index.js^0|W|L|22|S|7|9|0|0|5|15|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@$9|17|A|18|1|19]]|E|$]]|$1|F|3|G|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|H|3|I|5|6|7|1E|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1F|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1G|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1H|8|@]|D|@]|E|$M|N]]|$1|S|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]|10|$5|V|W|X|E|$Y|11]]]]

<p>You should be able to do such a thing using <a href="http://socket.io/" rel="nofollow">Socket.io</a>. First, you will need to install it with <code>npm install socket.io</code>. From there, in your code you will want to have <code>var io = require(socket.io);</code></p>

<p>You can see <a href="https://github.com/socketio/socket.io/blob/master/examples/chat/index.js" rel="nofollow">more in-depth examples given by Socket.IO</a></p>

<p>You could use something like this on the server:</p>

<pre><code>var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('../..')(server);
var port = process.env.PORT || 3000;

server.listen(port, function () {
  console.log('Server listening at port ' + port);
});

app.use(express.static(__dirname + '/public'));

io.on('connection', function (socket) {
    socket.emit('EVENT_NAME', {data});
});
</code></pre>

<p>And something like this on the client:</p>

<pre><code>&lt;script src="socket_src_file_path_here"&gt;&lt;/script&gt;
&lt;script&gt;
  var socket = io('http://localhost');
  socket.on('EVENT_NAME', function (data) {
    console.log(data);
    //Do whatever you want with the data on the client
  });
&lt;/script&gt;
</code></pre>


blocks|key|4425744|text|我在node.js中找到了SSE实现。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4425745|Github链接：https://github.com/einaros/sse.js|offset|length|4425746|NPM模块：https://www.npmjs.com/package/sse|4425747|上面的链接对你有帮助吗？|4425748|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/einaros/sse.js|1|https://www.npmjs.com/package/sse^0|0|9|X|0|0|6|X|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]|R|$5|M|N|O|A|$P|S]]]]

<p>I found SSE implementation in node.js.</p>

<p>Github link: <a href="https://github.com/einaros/sse.js" rel="nofollow">https://github.com/einaros/sse.js</a></p>

<p>NPM module:<a href="https://www.npmjs.com/package/sse" rel="nofollow">https://www.npmjs.com/package/sse</a></p>

<p>Will above link helps you ?</p>


blocks|key|4425694|text|**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:+"%2BJSON.stringify(data);

++++++res.end(`${event}\n${id}\n${data}\n\n`);
+++}
}).listen(PORT)|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4425695|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>**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)=&gt;{

    if(req.url.indexOf("/route/events")&gt;=){

      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)
</code></pre>


blocks|key|4425781|text|我在这里添加了一个简单的SSE实现。这只是一个Node.js文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4425782|您可以在此处查看结果：https://glossy-ox.glitch.me/|offset|length|4425783|const+http+=+require('http');
const+port+=+process.env.PORT+%7C%7C+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
++++return+setInterval(()+=>+{
++++++const+id+=+Date.now();
++++++const+data+=+`Hello+World+${id}`;
++++++const+message+=
++++++++`retry:+${refreshRate}\nid:${id}\ndata:+${data}\n\n`;
++++++res.write(message);
++++},+refreshRate);
++}

++//+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+%2B=+event.data+%2B+'<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}`);
});|code-block|syntax|javascript|4425784|entityMap|0|LINK|mutability|MUTABLE|url|https://glossy-ox.glitch.me/^0|0|B|S|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>I'm adding a simple implementation of SSE here. It's just one Node.js file.</p>

<p>You can have a look at the result here: <a href="https://glossy-ox.glitch.me/" rel="noreferrer">https://glossy-ox.glitch.me/</a></p>

<pre class="lang-js prettyprint-override"><code>const http = require('http');
const port = process.env.PORT || 3000;

const server = http.createServer((req, res) =&gt; {
  // 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
    return setInterval(() =&gt; {
      const id = Date.now();
      const data = `Hello World ${id}`;
      const message =
        `retry: ${refreshRate}\nid:${id}\ndata: ${data}\n\n`;
      res.write(message);
    }, refreshRate);
  }

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

server.listen(port);

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

server.on('listening', () =&gt; {
  console.log(`Listening on port ${port}`);
});
</code></pre>




blocks|key|4425757|text|下面是一个express服务器，它每秒发送一个Server-Sent+Event+(SSE)，从10倒数到0：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4425758|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:+"+%2B+count+%2B+"\n\n")
++if+(count)
++++setTimeout(()+=>+countdown(res,+count-1),+1000)
++else
++++res.end()
}

app.listen(3000,+()+=>+console.log('SSE+app+listening+on+port+3000!'))|code-block|syntax|javascript|4425759|将上面的代码放入一个文件(index.js)并运行它：node+index|offset|length|style|CODE|4425760|接下来，将以下HTML放入一个文件(public/index.html)：|4425761|<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>|4425762|在浏览器中，打开localhost:3000并观察上交所的倒计时。|4425763|entityMap^0|0|0|R|A|0|0|0|8|E|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|11|8|@$I|12|J|13|K|L]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

<p>Here is an express server that sends one Server-Sent Event (SSE) per second, counting down from 10 to 0:</p>

<pre><code>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(() =&gt; countdown(res, count-1), 1000)
  else
    res.end()
}

app.listen(3000, () =&gt; console.log('SSE app listening on port 3000!'))
</code></pre>

<p>Put the above code into a file (index.js) and run it: <code>node index</code></p>

<p>Next, put the following HTML into a file (public/index.html):</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
  &lt;script&gt;
  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")
  }
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;SSE: &lt;span id="state"&gt;&lt;/span&gt;&lt;/h1&gt;
  &lt;h3&gt;Data: &lt;span id="data"&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>In your browser, open <code>localhost:3000</code> and watch the SSE countdown.</p>


blocks|key|4425842|text|如果您使用的是express，这是最简单的https://www.npmjs.com/package/express-sse方法|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4425843|在BE上：|4425844|const+SSE+=+require('express-sse');

const+sse+=+new+SSE();

...

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

...

sse.send('message',+'event-name');|code-block|syntax|javascript|4425845|在FE上：|4425846|const+EventSource+=+require('eventsource');

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

es.addEventListener('event-name',+function+(message)+{
++console.log('message:',+message)
});|4425847|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/express-sse^0|L|15|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>If you're using express this is the easiest way <a href="https://www.npmjs.com/package/express-sse" rel="noreferrer">https://www.npmjs.com/package/express-sse</a></p>

<p>on BE:</p>

<pre><code>const SSE = require('express-sse');

const sse = new SSE();

...

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

...

sse.send('message', 'event-name');
</code></pre>

<p>on FE:</p>

<pre><code>const EventSource = require('eventsource');

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

es.addEventListener('event-name', function (message) {
  console.log('message:', message)
});
</code></pre>


<p>I've looked around and it seems as if all the ways to implement SSEs in Node.js are through more complex code, but it seems like there should be an easier way to send and receive SSEs. Are there any APIs or modules that make this simpler?</p>


Simple Way to Implement Server Sent Events in Node.js?

服务器

JSON

我环顾四周，似乎所有在Node.js中实现SSE的方法都是通过更复杂的代码实现的，但似乎应该有一种更简单的发送和接收SSE的方法。有没有什么API或模块可以让这一切变得更简单？

问在Node.js中实现服务器发送事件的简单方法？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Node.js中实现服务器发送事件的简单方法？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Node.js中实现服务器发送事件的简单方法？
EN