SSE eventSource简介

lixiang 发布于2019-08-20 16:16 / 719人阅读

eventSource简单介绍

eventSource是用来解决web上服务器端向客户端推送消息的问题的。不同于ajax轮询的复杂和websocket的资源占用过大，eventSource(sse)是一个轻量级的，易使用的消息推送api

如何使用 客户端代码




    
    Document

代码很简单，实例化api，监听事件

服务端nodejs代码

服务端这几种实现使用其一就可以了

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);

服务端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")
})

服务端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)
    })
}

使用起来没什么问题，都可以正常运行，不过在多个客户端访问的时候，一个客户端连上之后，其他客户端就没有推送了，不知道为甚么？

GPU云服务器云服务器 EventSource webRTC eventsource SSE html sse实例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82832.html

在nginx下利用php配置SSE的正确方法

摘要：简介是的缩写。通常情况下，是我们的浏览器向服务器发起请求后，服务器响应，然后关闭连接。为了能够保持通信，以便在服务器有事件发生时主动通知浏览器，后来人们又发明了很多技术，包括等。 SSE简介 SSE是Server-Sent Events的缩写。通常情况下，是我们的浏览器向服务器发起请求后，服务器响应，然后关闭连接。为了能够保持通信，以便在服务器有事件发生时主动通知浏览器，后来人们又发明...

he_xd 2019-07-25 13:43 评论0 收藏0
在nginx下利用php配置SSE的正确方法

摘要：简介是的缩写。通常情况下，是我们的浏览器向服务器发起请求后，服务器响应，然后关闭连接。为了能够保持通信，以便在服务器有事件发生时主动通知浏览器，后来人们又发明了很多技术，包括等。 SSE简介 SSE是Server-Sent Events的缩写。通常情况下，是我们的浏览器向服务器发起请求后，服务器响应，然后关闭连接。为了能够保持通信，以便在服务器有事件发生时主动通知浏览器，后来人们又发明...

hzx 2019-06-27 14:02 评论0 收藏0
服务端事件EventSource揭秘

摘要：不过永久帧的技术会导致主页面的加载条始终处于状态，体验很差。同时，规范允许服务端指定自定义事件，客户端侦听该事件即可。服务端推服务端推，指的是由服务器主动的向客户端发送消息（响应）。在应用层的HTTP协议实现中，请求-响应是一个round trip，它的起点来自客户端，因此在应用层之上无法实现简易的服务端推功能。当前解决服务端推送的方案有这几个：客户端长轮训 websocket...

sf190404 2019-08-21 17:22 评论0 收藏0
H5数据推送

摘要：本文则试着和读者一起对这个数据推送的需求进行技术方案的探究。数据推送有两种替代方案无更新方案和数据拉取方案。数据拉取和数据推送的功能目标是一致的让用户看到最新的数据。但数据推送有一些优势，即更低的延迟。前言众所周知，AJAX的出现是前端快速发展的一个标志，同时也是前后端得以分离的重要基础。作为一个C/S网络的web系统，网络通信在发挥着举足轻重的作用。大部分的场景下，我们是主动触发...

刘德刚 2019-06-27 14:58 评论0 收藏0