首页 > 开发 > HTML > 正文

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

2017-09-09 13:57:01  来源: 网友分享

今天看到这个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

<!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的标准化接口吧。