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);
    }
}