×

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

96
忠叔
2017.11.22 22:46* 字数 332

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

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

推送服务

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

在 server 文件夹新建 push.php

<?php
/**
 * PHP默认执行时间为30秒
 * 超过30秒就会停止运行
 * 所以将执行时间设为0,也就是不限制
 * 才能长时间地进行推送服务
 */
set_time_limit(0);
/**
 * 允许所有域监听本服务发出的消息
 * 上传到公网后应将其改成内部服务器的域名
 */
header('Access-Control-Allow-Origin: *');

//将文件类型定义为 event-stream
header('Content-Type: text/event-stream');

//关闭缓存
header('Cache-Control: no-cache');

//创建数据库实例
require('../util/database.class.php');
$db=Db::getInstance();

/**
 * 时间节点
 * 记录每一次推送的时间点
 * 加载时初始化为当前时间
 */
$time=time();

while(true){
    /**
     * 只查询比时间结点更晚的消息,即还没有推送过的消息
     * 顺带把留言者的消息一起查询出来
     */
    $messages=$db->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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>微信墙</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <style>
    /* 使用css 对消息进行简单布局 */
    #main{
        width:100%;
    }
    .message{
        display:flex;
        padding:20px 0;
        width:100%;
        font-size:40px;
        border-bottom:dashed 1px #666;
    }
    .message>.avatar{
        width:140px;
    }
    .message>.avatar>img{
        width:120px;
        height:120px;
        border-radius:50%;
    }
    .message>.content{
        flex-grow:1;
    }
    </style>
</head>
<body>
    <div id="main">
    </div>
</body>
<script>
    $(document).ready(function(){
        //建立监听
        var source=new EventSource('../server/push.php');

        //服务器消息发来时,将消息整理好添加到 #main 中
        source.onmessage=function(msg){
            var data=JSON.parse(msg.data);
            //判断解析后数据是不是数组
            if(data.constructor.toString().indexOf('Array')>0)
                data.forEach(function(message){
                    addMsg(message);
                });
        }
    });

    function addMsg(message){
        var newElement=$('<div></div>')
        .addClass('message')
        .html(`
                <div class="avatar"><img src="${message.avatarUrl}"></div>
                <div class="content"><p>${message.nickname}: ${message.content}</p></div>
        `);
        $('#main').append(newElement);

        //让滚动条是始终在最下方
        $(document).scrollTop(document.body.scrollHeight);
    }
</script>
</html>

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


图4-2 在用户端发送消息
图4-3 “墙端”成功收到消息

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


图4-4 已经完成的部分

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

一面微信墙的诞生
Web note ad 1