一面微信墙的诞生(4) 消息推送的实现

上一节：一面微信墙的诞生(3) 用户端界面的创建

在本系统中，消息的推送使用了 Server-Send Event 技术，这是一种 HTTP 长轮询协议，可视作连接建立后，服务器将数据主动推送给客户端，HTML5已经有了支持这一技术的API。

推送服务

我设计的推送服务是这样的，服务器每3秒从数据库拉取新的留言信息，并推送给服务器。如果没有新的留言，则进入下一个3秒的等待。

在 server 文件夹新建 push.php

select("SELECT * FROM message m  JOIN user u ON m.openid=u.openid WHERE m.posttime>=$time");

    //如果有消息，推送给客户端
    if(!empty($messages)){
        //更新时间结点
        $time=time();
        /**
         * 打包为json
     * PHP_EOL表示换行符，在linux服务器中等价于 /n
     */
        echo "data: ". json_encode($messages) . PHP_EOL;
        //输出空行表示推送数据结束
        echo PHP_EOL;
        //释放数据缓冲区
        ob_flush();
        //推送到浏览器
        flush();
    }
    //暂停3秒
    sleep(3);
}

为方便观察，先将查询语句中的 where 条件去掉，在浏览器中打开 push.php，观察到服务器每3秒会把所有的数据输出来一次。关闭 push.php ，将查询条件恢复。

图4-1 push.php在浏览器的表现

制作“墙面”

在 display 文件夹建立 index.html

同时打开 localhost/wall/display 和 localhost/wall/client
在用户端界面下发送一条留言

图4-2 在用户端发送消息

图4-3 “墙端”成功收到消息

至此，我们已经完成了一个微信墙的功能部分，最后我们要做的就是把它接入到微信开放平台中：

图4-4 已经完成的部分

下一节：一面微信墙的诞生(5) 接入微信开放平台