h5-sse 协议初探-即时通信

Posted 2020-08-09

Sse 协议

 

最近在一个小项目里面用到了sse协议（服务器推送事件Server-sent Events），遂做了些小研究，记录下方便自己也方便他人，额，我知道上面是一段废话。。。

1、Web即时通讯用什么

先说下自己，自己以前怎么做的呢？用Ajax一直请求服务器，发送和获得数据。我知道这样开销很大，效率很低，可是自己太懒了，没有去做更深的研究。那么我们来看下sse的一个简单示例，这个跳跃性有点大哦。

列子：客户端

 

var source = new     EventSource(‘url‘);
      
source.onmessage=function(event)
  {
      console.log(event.data)
  document.getElementById("show").innerhtml+=event.data + "<br />";
  };

 

 

服务端：

 

<?php
header(‘Content-Type: text/event-stream‘);
header(‘Cache-Control: no-cache‘);
$time = date(‘r‘);
echo "data: The server time is: {$time}\n\n";
echo "data:dd\n\n";
flush();
?>

 

 

    这样在客户端就会默认每隔3秒(可以自己改)得到服务器的新数据，作为一个小白，看了下浏览器的请求，在浏览器端就是每隔3秒发送服务器端的请求，得到新数据，那特喵的跟我自己Ajax去有什么！！区别？容我再研究两分钟！