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

在Golang实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《HTML5的Server Sent Events前端无法收到数据。》，聊聊go、javascript、html5，希望可以帮助到正在努力赚钱的你。

问题内容

今天看到这个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, 什么的都是对的。

正确答案

不会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

  <meta charset="utf-8"><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>

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

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

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

好了，本文到此结束，带大家了解了《HTML5的Server Sent Events前端无法收到数据。》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多Golang知识！