server-sent-event使用流信息向客户端发送数据

Posted 心素如简,人淡如菊。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了server-sent-event使用流信息向客户端发送数据相关的知识,希望对你有一定的参考价值。

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>server-sent-event</title>
</head>
<body>
<div>
<p>server-sent-event 是一种服务器向客户端发送消息的单向通信方式,采用流信息传送数据,类似视频播放,一直保持和客户端的连接,不断地发送数据。</p>

<p>SSE 使用 HTTP 协议,现有的服务器软件都支持。WebSocket 是一个独立协议。</p>
<p>SSE 属于轻量级,使用简单;WebSocket 协议相对复杂。</p>
<p>SSE 默认支持断线重连,WebSocket 需要自己实现。</p>
<p>SSE 一般只用来传送文本,二进制数据需要编码后传送,WebSocket 默认支持传送二进制数据。</p>
<p>SSE 支持自定义发送的消息类型。</p>


<script>
    if(‘EventSource‘ in window){
        console.log("支持EventSource");
        var es = new EventSource("http://localhost:3009/stream");
        es.onopen = function(){
            console.log("连接成功");
        }
        es.onmessage = function(message){   //默认是message事件,
            console.log("接收到数据",message);
        }
        es.onerror = function(err){
            console.log("error",err);
        }

        es.addEventListener("connecttime",function(event){ //监听自定义事件
            console.log(‘监听自定义事件‘,event);
        },false);

    }

</script>
</div>
</body>
</html>

  

 

 

基于node 的服务端代码

 

var http = require("http");

http.createServer(function(req,res){
    console.log(req.url);
    var filename = ‘.‘+req.url;
    if(filename===‘./stream‘){
        res.writeHead(200,{
            "Content-Type":"text/event-stream",
            "Cache-Control":"no-cache",
            "Connection":"keep-alive",
            "Access-Control-Allow-Origin": ‘*‘,
        });

        res.write("retry: 10000\n");
        res.write("event: connecttime\n");
        res.write("data: "  + "来自自定义事件的数据\n\n");
        res.write("data: "  + "自定义事件\n\n");

        interval = setInterval(function () {  //event 字段未设置的,默认为message事件
          res.write("data: " + (new Date()) + "\n\n");
        }, 1000);

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

    }

}).listen(3009,"127.0.0.1");
console.log("server start at port 3009");

  

以上是关于server-sent-event使用流信息向客户端发送数据的主要内容,如果未能解决你的问题,请参考以下文章

Server-sent-events与 WebSocket的区别是什么?

如何从response里面取出向客户端输出的html流

使用 PHP 向客户端发送多个 HTTP 2.0 流

PHP+SSE服务器向客户端推送消息

PHP+SSE服务器向客户端推送消息

Java Socket编程之TCP