一面微信墙的诞生(4) 消息推送的实现
2017-11-22 本文已影响204人
忠叔
在本系统中，消息的推送使用了 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 已经完成的部分
