HTML 5 服务器推送事件server-sent event（一）

最新推荐文章于 2024-06-25 09:04:25 发布

Candyabc

最新推荐文章于 2024-06-25 09:04:25 发布

阅读量1.1k

点赞数

分类专栏： nodejs web 文章标签： nodejs web html5 sse

本文链接：https://blog.csdn.net/Candyabc/article/details/73937196

版权

web 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

nodejs

1 篇文章 0 订阅

订阅专栏

 
 HTML5 服务器推送事件（server-sent event）允许网页获得来自服务器的更新。 

 
 1.Server-Sent 事件 - 单向消息传递 

 
 2.传递 文本内容 

 
 与websocket对比 

 
 websocket双向传递，可传递二进制数据 

 
 可进入http://www.caniuse.com网站检查eventsource是否被浏览器所支持 

 
 sse优点： 

 
 1.不需添加任何新组件， 

 
 2.服务端简洁，不像websocket很复杂 

 
 3.可在现有http/https上运作，直接运行现有代理服务器和认证技术 

 
 sse缺点 

 
 1.sse连接会使用一个套接字，还会占用apache线程或进程，这样会使用大量内存，并限制服务器所能支持的并行数 

 
 因此，必须写自已的后端服务器 

 
 现在来看一个简单的例子 

 
 Server部分 

/**
 * Created by candy on 2017/6/29.
 */
const http=require("http")
const fs=require("fs")

http.createServer(function(request,response){
    if (request.url!='/sse'){
        fs.readFile("sse01.html",function(err,file){
            response.writeHead(200,{"Content-Type":"text/html"});
            let s = file.toString()
            response.end(s)
        })
    }else{//此部分为发送消息部分
        response.writeHead(200,{"Content-Type":"text/event-stream"}) //注意此处要为text/event-stream
        let timer =setInterval(function(){ //每一秒送一次时间
            let content="data:"+new Date().toISOString()+"\n\n";
            let b =response.write(content);
            if (!b) console.log("data quered("+content+")")//在这里log看消息是否已发送
            else console.log("flushed ("+content+")")

        },1000);
        request.connection.on("close",function(){//连接关闭时要消除
            response.end();
            clearInterval(timer);
            console.log("client close connection.")
        })
        request.connection.on("error",function(){
            response.end();
            clearInterval(timer);
            console.log("client error connection.")
        })
    }

}).listen(8444);
console.log("runinng server")

Client部份

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>hello world</title>
    </head>
    <body>
    <h1>hello world</h1>
        <pre id="x">initialize....</pre>

    </body>
<script>
    let es =new EventSource("sse");//在这创建一个eventsource
    es.addEventListener("message",function(e){ //接收message
        let data= e.data;
        document.getElementById("x").innerHTML= data;
    })
</script>
</html>

这样就是一个简单sse,执行后网页上每秒的时间会变化

Candyabc

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML 5 服务器推送事件server-sent event（一）

HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。1.Server-Sent 事件 - 单向消息传递2.传递文本内容可进入http://www.caniuse.com网站检查eventsource是否被浏览器所支持sse优点：1.不需添加任何新组件，2.服务端简洁，不像websocket很复杂3.可在现有ht
复制链接

扫一扫

专栏目录