H5 Server-Sent 事件 - 单向消息传递

虽然之前知道这个技术，可是一直没去了解过，今天在这里记录一下，先看W3school说的

这意味着能够作一些简单的消息推送
下面是个人代码：
html页面

<div class="layui-wz" style="width: 100%;text-align: center;">
    <input type="hidden" class="paging">
    <div id="test">倒计时</div>
    <button id="open" type = "button" class="layui-btn layui-btn-radius">开启签到</button>
    <button id="close" type = "button" class="layui-btn layui-btn-radius">结束签到</button>
</div>
<div class="result">
    <table class="handle_message">
        <tr></tr>
    </table>
</div>

js代码：

var source,message,timer;
/**
 * 开启签到 - 开始检查服务端是否有更新
 */
$("#open").click(function () {
    countdown();
    if(typeof(EventSource)!=="undefined") {
        source = new EventSource("http://10.3.140.139:8082/index/test/getuser");
        source.onmessage=function(event)//接收到消息
        {
            message = event.data;
            var len = message.length;
            if (len > 0) {
                message = JSON.parse(message);
                $(".handle_message tr").append(code(message['head_pic'],message['username']));
            }
        };
    } else {
        layer.msg('抱歉，你的浏览器不支持 server-sent 事件...');
    }
});

/**
 * 关闭监听
 */
$("#close").click(function () {
    cz_close();
});
/**
 * 关闭监听操做
 */
function cz_close() {
    timer = $(".paging").val();
    clearTimeout(timer);
    $('#test').html('签到结束');
    source.close();
    $.post("http://10.3.140.139:8082/index/test/clearcache");
    layer.msg('中止监听服务器更新');
}

/**
 * 追加代码
 * @returns {string}
 */
function code(pic,name) {
    var code = '<td>' +
        '<img src="'+ pic +'" alt="http://tva2.sinaimg.cn/large/005ucgoIly1g3iiq7a591j30jg0jgwl0.jpg" class="layui-nav-img">' +
        '<p style="margin-left: 38px;margin-top: 8px;"><span>'+ name +'</span></p>' +
        '</td>';
    return code;
}

/**
 * 倒计时
 */
function countdown() {
    layui.use('util', function(){
        var util = layui.util,
        serverTime = new Date().getTime(),
        endTime = serverTime + (2 * (60 * 1000));
        util.countdown(endTime, serverTime, function(date, serverTime, timer){
            $(".paging").val(timer);
            var str = date[2] + '分' + date[3] + '秒';
            if (date[0] == 0 && date[1] == 0 && date[2] == 0 && date[3] == 0) {
                clearTimeout(timer);//清除定时器
                cz_close();
            }else {
                $('#test').html('剩余时间：'+ str);
            }
        });
    });
}

php代码：

/**
     * @return mixed
     * 学生端签到页面
     */
    public function index()
    {
        return $this->fetch();
    }

    /**
     * @return mixed
     * 教师端开启签到页面
     */
    public function demo()
    {
        return $this->fetch();
    }

    /**
     * 将签到的学生加入缓存
     */
    public function post()
    {
        if ($_POST) {
            $img = self::curlInfo();
            $_POST['head_pic'] = $img;
            $info = json_encode($_POST);
            Cache::set('user_info',$info);
        }
    }

    /**
     * 缓存取出用户
     */
    public function getUser ()
    {
        //取出并清除当前缓存
        $info = Cache::pull('user_info');
        ////服务端事件标准规定（将MIME类型设为text/event-stream）
        header('Content-Type: text/event-stream');
        ////告诉Web服务器关闭Web缓存
        header('Cache-Control: no-cache');
        echo "data:{$info}\n\n";
        //当即发送数据（而不是先缓冲起来，等到PHP代码执行完毕再发送）
        flush();
    }

    /**
     * 清除缓存
     */
    public function clearCache ()
    {
        Cache::clear();
    }

    /**
     * @return mixed
     * 获取用户随机头像
     */
    protected function curlInfo ()
    {
        $url = 'https://api.66mz8.com/api/rand.pic.php?type=%E4%B8%AA%E6%80%A7&return=json';
        $curl = curl_init();//初始化CURL句柄
        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST,FALSE);
        curl_setopt($curl,CURLOPT_HTTPGET,true);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        $output = curl_exec($curl);
        curl_close($curl);
        $info = json_decode($output,true);
        $img = $info['imgurl'];
        return $img;
    }

参考连接：http://www.w3school.com.cn/ht...
http://www.hangge.com/blog/ca...