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, 什么的都是对的。
腐化D世界
10 years, 1 month ago
Answers
不会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的标准化接口吧。
晴朗好天气
answered 10 years, 1 month ago