问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
JustSt
    11621216

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

    gohtml5javascript
    阅读 5.4k
    2 个回答
    得票最新
    头像
    Saviio
      25012
      ✓ 已被采纳

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

      头像
      JustSt
        11621216

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

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题