Beego实现html5的SSE(Server-Send Event)推送功能

    xiaoxiao2021-03-25  102

    SSE,字面意思,服务发送事件,即通过服务器单项推送消息给浏览器,来实现消息更新。

    SSE的本质:即浏览器向服务器发送一个HTTP请求,然后服务器不断单向地向浏览器推送“信息”(message),所以SSE是单向通信。默认浏览器每隔3秒会检测并断线重连。

    SSE要求消息格式:

    Content-Type:text/event-stream数据以"data:"开始,以"\n\n"结束,不然不能成功接收 下面应用EventSource对象来接收服务器消息: 服务器端: package controllers import ( "bytes" "github.com/astaxie/beego" "time" ) func (c *MainController) Weather() { for true { var rw = c.Ctx.ResponseWriter //允许访问所有域 rw.Header().Set("Access-Control-Allow-Origin", "*") // 设置Content-Type rw.Header().Set(`Content-Type`, `text/event-stream;charset=utf-8`) rw.Header().Set("Cache-Control", "no-cache") var bs = bytes.NewBufferString("data:ceshi\n\n") rw.Write(bs.Bytes()) rw.Flush() // 间隔5秒钟,轮询给浏览器发送测试消息 time.Sleep(5 * time.Second) } }浏览器js代码: <script type="text/javascript"> if (typeof(EventSource) != "undefined") { var source = new EventSource("http://localhost:8080/Weather"); source.onopen = function() { document.getElementById("lbl").innerHTML += "连接已经建立"; }; source.onmessage = function(event) { document.getElementById("lbl").innerHTML += event.data + "<br />"; }; source.onerror = function() {}; } else { document.getElementById("lbl").innerHTML += "抱歉,浏览器不支持..."; } </script>测试效果:

    转载请注明原文地址: https://ju.6miu.com/read-21953.html

    最新回复(0)