EventSource JS實時通信

前臺 html

  <script type="text/javascript">
        if (typeof (EventSource) != "undefined") {
            var es = new EventSource("http://localhost:8080/Home/GetNotices?user=lxw");
            es.onmessage = function (event) {
                //var data = JSON.parse(event.data);
                //$('#msgCount').text(data + "</br>")
                document.body.innerHTML += event.data + '<br>';
            };
            es.onopen = function (event) {
                console.log("open:" + JSON.stringify(event));
            };
            es.onerror = function (event) {
                console.log("error:" + JSON.stringify(event) + JSON.stringify(es));
            };
        }
        else {
            console.log("該瀏覽器不支持");
        }
    </script>

後臺 asp.net  mvc

        public void GetNotices(string user)
        {
            var sb = new System.Text.StringBuilder();
            sb.AppendFormat("retry:{0}\n\n", 2000);      //推送間隔
            sb.AppendFormat("event:{0}\n\n", "message"); //綁定onmessage
            sb.AppendFormat("id:{0}\n\n", System.Threading.Thread.CurrentThread.ManagedThreadId);
            string info = "當前線程:" + System.Threading.Thread.CurrentThread.ManagedThreadId + "  時間:" + DateTime.Now.ToString()+" 用戶:"+ user;
            sb.AppendFormat("data:\"{0}\"\n\n", info);

            Response.ContentType = "text/event-stream";
            Response.Expires = -1;
            Response.Write(sb.ToString());
            Response.Flush();
        }

允許跨域配置

<system.webServer> 節點中添加

   <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
      </customHeaders>
    </httpProtocol>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章