Web实时通信技术-服务器发送事件(Server-Sent Events)

1.概念原理

Server-Sent 事件指的是网页自动获取来自服务器的更新。以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

特点：单向的，页面发送请求后，后台保持住请求，有新消息则返回信息到前端。当链接断开或失败时，浏览器端会自动重连。

应用场景：适合浏览器端只做数据接收，不做数据提交的信息展示端。比如监控看板，视频播放器等。

2.具体实现

2.1浏览器端依靠 EventSource 对象发起请求。

栗子：

<script type="text/javascript">

   const loadData = () => {

       // 初始化一个EventSource对象
       var source = new EventSource("@Url.Action("GetData")");

       // 接收信息回调函数
       source.onmessage = function (event) {
           document.getElementById("result").innerHTML += event.data + "<br>";
       };

       // 链接打开时回调函数
       source.onopen = function (event) {
           console.log("ready ...");
       }
       // 链接断开或异常回到函数
       source.onerror = function (event) {

           console.log("error ...");
       }
     
    }

    loadData();
</script>

2.2 服务器端规则

• 把报头 "Content-Type" 设置为 "text/event-stream"
• 规定不对页面进行缓存
• 输出发送日期（始终以 "data: " 开头, "\n\n"结尾）
• 向网页刷新输出数据
  栗子:

        
          public void GetData()
          {
             var response = HttpContext.Response;
              response.ContentType = "text/event-stream; charset=utf-8"; // 设置响应类型
              Response.Expires = -1;//设置不缓存
  
              int i = 0;
              while (i < 10  && response.IsClientConnected)
              {
                  i++;
  
                  Response.Write("data:" + DateTime.Now + "\n\n"); // 以data:开头 ,\n\n结尾
                  Response.Flush(); // 刷新输出数据
  
                  System.Threading.Thread.Sleep(1000);
              }
          }
  

  　　3.运行栗子结果

•