SSE eventSource簡(jiǎn)介

lixiang 發(fā)布于2019-08-20 16:16 / 737人閱讀

eventSource簡(jiǎn)單介紹

eventSource是用來(lái)解決web上服務(wù)器端向客戶端推送消息的問(wèn)題的。不同于ajax輪詢的復(fù)雜和websocket的資源占用過(guò)大，eventSource(sse)是一個(gè)輕量級(jí)的，易使用的消息推送api

如何使用 客戶端代碼




    
    Document

代碼很簡(jiǎn)單，實(shí)例化api，監(jiān)聽事件

服務(wù)端nodejs代碼

服務(wù)端這幾種實(shí)現(xiàn)使用其一就可以了

var http = require("http")
var fs = require("fs")

http.createServer(function (req, res) {

    var fileName = "." + req.url;

    if (fileName === "./stream") {
        res.writeHead(200, {
            "Content-Type":"text/event-stream", 
            "Cache-Control":"no-cache", 
            "Connection":"keep-alive"
        });

        res.write("retry: 10000
");
        res.write("event: connecttime
");
        res.write("data: " + (new Date()) + "

");
        res.write("data: " + (new Date()) + "

");

        interval = setInterval(function() {
            res.write("data: " + (new Date()) + "

");
        }, 1000);

        req.connection.addListener("close", function () {
            clearInterval(interval);
        }, false);
  } else {
      fs.readFile("./index.html", "utf8",function(err, html) {
          if (err) {
              console.log(err)
              return
          }
          res.end(html)
      })

  }
}).listen(9999);

服務(wù)端expressjs代碼

var express = require("express")
var fs = require("fs")
var app = express()

app.get("/stream", function(req, res) {
    console.log(111)

    res.writeHead(200, {
        "Content-Type":"text/event-stream", 
        "Cache-Control":"no-cache", 
        "Connection":"keep-alive"
    });

    res.write("retry: 10000
");
    res.write("event: connecttime
");
    res.write("data: " + (new Date()) + "

");
    res.write("data: " + (new Date()) + "

");

    interval = setInterval(function() {
        res.write("data: " + (new Date()) + "

");
    }, 1000);

    req.connection.addListener("close", function () {
        clearInterval(interval);
    }, false);
})

app.use(function(req, res) {
    fs.readFile("./index.html", "utf8",function(err, html) {
        if (err) {
            console.log(err)
            return
        }
        res.send(html)
    })
})

app.listen(9999, function(err) {
    if (err) {
        console.log(err)
        return
    }
    console.log("listening on port 9999")
})

服務(wù)端koajs 1.x 代碼

var koa = require("koa")
var fs = require("fs")
var PassThrough = require("stream").PassThrough

var app = koa()

app.use(function *() {
    var url = this.req.url
    if (url === "/stream") {
        var stream = new PassThrough()

        setInterval(function() {
            stream.write("data: " + (new Date()) + "

")
        }, 1000);

        this.type = "text/event-stream"
        this.body = stream
    } else {
        var html = yield koaFs
        this.body = html
    }
})

app.listen(9999, function(err) {
    if (err) {
        console.log(err)
        return 
    }
    console.log("listening on port 9999")
})

function koaFs(fn) {
    fs.readFile("./index.html", "utf8", function(err, html) {
        fn(err, html)
    })
}

使用起來(lái)沒(méi)什么問(wèn)題，都可以正常運(yùn)行，不過(guò)在多個(gè)客戶端訪問(wèn)的時(shí)候，一個(gè)客戶端連上之后，其他客戶端就沒(méi)有推送了，不知道為甚么？