Beego實現html5的SSE(Server-Send Event)推送功能

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>

測試效果：