前言
最开始学习 ajax 的时候,为了实时获取最新信息(比如未读消息),通过定时器 setInterval 不断调用 API 。
这样做虽然可以实现效果,但是这种方法并不能判断后端是否有新的消息产生,只能通过客户端不断请求,浪费带宽和服务器资源。
最好的方法是在服务端生产新消息后,推送到客户端,也就是服务器主动推送。
实现
目前主流的服务端推送技术要算 web socket,它可以实现客户端和服务端的双向通信。
但是如果仅仅只是需要实现类似于“未读消息”这样的服务器单向推送需求,那 SSE 或许是个更好的解决方案。
服务器发送事件(Server-Sent Events,简称SSE),基于 HTTP 协议。它是通过发送流信息(streaming)来变通的实现服务器主动推送,类似于视频播放,目前在IE浏览器上还不适用。
sse.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
</head>
<body style="padding<