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

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

推送服务

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

在 server 文件夹新建 push.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

微信墙

/* 使用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;

}

$(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=$('

.addClass('message')

.html(`

${message.nickname}: ${message.content}

`);

$('#main').append(newElement);

//让滚动条是始终在最下方

$(document).scrollTop(document.body.scrollHeight);

}

同时打开 localhost/wall/display 和 localhost/wall/client

在用户端界面下发送一条留言

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

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

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

图4-4 已经完成的部分