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

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部份

    
        
        
    
    
    
hello world
        
initialize....

    


    

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