javascript - HTML5的Server Sent Events前端无法收到数据。
天蓬老师
天蓬老师 2017-04-10 14:45:01
[JavaScript讨论组]

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

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(2)
天蓬老师

不会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>
    <p id='data'></p>
  <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的标准化接口吧。

天蓬老师

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号