HTML5的Server Sent Events前端无法收到数据。

今天看到这个HTML5里面的功能，然后想自己实现一下。。但是按照教程把Header改了。前段没有内容输出。。但是收得到.

    env.SetHeader(env.ResponseWriter, "Content-Type", "text/event-stream")
    env.SetHeader(env.ResponseWriter, "Cache-Control", "no-cache")
    flusher, ok := env.ResponseWriter.(http.Flusher)
    if !ok {
        http.Error(env.ResponseWriter, "Streaming unsupported!", http.StatusInternalServerError)
        return
    }
    fmt.Fprintf(env.ResponseWriter, "data: updated data")
    flusher.Flush()

env是自己封装的里面包含了每次请求的Request,和ResponseWriter.求解～

    if(typeof(EventSource)!=="undefined") {
        //create an object, passing it the name and location of the server side script
        var eSource = new EventSource("/partner/dashboard/update");
        //detect message receipt
        eSource.onmessage = function(event) {
            //write the received data to the page
            document.getElementById("update").innerHTML = event.data;
        };
    }
    else {
        document.getElementById("serverData").innerHTML="Whoops! Your browser doesn't receive server-sent events.";
    }

以上是前端的代码。服务器三秒一更新，状态码是200,但是就是没有数据。Content-Type, 什么的都是对的。

@Saviio 读了半天。。。才发现是一条空行为分隔符。。所以是\n\n。。谢啦～还支持JSON.那数据就好写了

不会golang.

用node写了下

var 
    http = require('http'),
    fs = require('fs');

var server = http.createServer(function(req, res) {
    if(req.url==='/data') {
        res.writeHead(200, { 
                'content-type'  : 'text/event-stream',
                'Cache-Control' : 'no-cache',
                'Connection'    : 'keep-alive'
            }
        );
        setInterval( function(){
            res.write("data: 'hello,event'" +'\n\n');
        },1000)
    } else {
        res.writeHead(200, {
                'content-type'  : 'text/html',
                'Cache-Control' : 'no-cache'
            }
        );
        res.write(fs.readFileSync(__dirname + '/index.html'));
    }
});

server.listen(3000);

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
    <div id='data'></div>
  <script>
    var 
        node   = document.getElementById('data'),
        source = new EventSource('/data');

    source.onmessage=function(evt) {
        var ele=document.createElement("li")
        ele.innerHTML=evt.data
        node.appendChild(ele)
    };
  </script>
</body>
</html>

MDN的规范在此，而且规范里约束了如下两点：

客户端会用换行符把它们连接成一个字符串来作为字段值。
其中每两条消息之间是以一个空行为分割符的。

所以我猜，你flush的时候没输出换行符，所以EventSource辨别不出这是一次会话还是多次。
之前还没玩过EventSource，这东西大概算是一个官方实现的Streaming的标准化接口吧。

【热门文章】