1.现实情况
我们在做商城系统的过程当中,会要求做一个订单提醒的功能,即来新的订单会提醒。我实现的方法是有订单后就会提醒“您有新的订单,请注意查收!”
2.解决方案
2.1ajax轮询
轮询的方法比较简单,就是每过多少秒发起一次请求。如果项目中的订单不多,每隔多少秒发一次请求会对服务器有挺大的压力。我将轮询关键的代码贴出来,仅供参考。
<script>
setInterval("order()",59000000);//每59秒刷新查询一次
var last_count = {$count};
function order() {
var data = {
'last_count':last_count
};
$.ajax({
type: "POST",
data: data,
url: "{:url('Order/sendOrderNotice')}",//后台方法
timeout: 60000,
cache: false,
async: false,
dataType: "json",
success: function(data) {
if(data.status == 1){
var audio = document.getElementById( "play" ); //浏览器支持 audio
audio.play(); //播放提示音
last_count = data.last_count;
setTimeout(function(){
window.location.reload();
}, 3000);
}
}
});
}
</script>
上面就是这个解决方案的核心。后端的代码请根据自己的业务逻辑编写。
2.2 结合workerman实现
这个方法是我比较推荐的。利用了workerman编写一段推送框架。具体参考:
https://www.workerman.net/web-sender
3.准备工作
下载workerman。
上图是下载好的包。点击start_for_win.bat。
出现这个表示服务启动了。
4.解决过程
订单监控页面端的代码:
<script src='http://cdn.bootcss.com/socket.io/1.3.7/socket.io.js'></script>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
// 连接服务端,workerman.net:2120换成实际部署web-msg-sender服务的域名或者ip
var socket = io('http://www.tp5_test.com:2120'); //http://www.tp5_test.com换成自己的域名或者ip
// uid可以是自己网站的用户id,以便针对uid推送以及统计在线人数,这个ID可以随便写
uid = 1557062581000;
// socket连接后以uid登录
socket.on('connect', function(){
socket.emit('login', uid);
});
<!--// 后端推送来消息时-->
socket.on('new_msg', function(msg){
//两种处理方式
// 1 追加到页面元素中,可以做成页面的弹窗
$("#msg").append(msg);
//2 播放提示应 :
if(msg == 1){
var audio = document.getElementById( "play" ); //浏览器支持 audio
audio.play(); //播放提示音
}
});
// 后端推送来在线数据时
socket.on('update_online_count', function(online_stat){
console.log(online_stat);
});
</script>
后端代码:
//这个方法我随便写了写,具体的处理就是在支付完成回调以后,用用send_workerman方法就可以了。我是用sends来模型支付完成以后的回调
public function sends($id)
{
// var_dump($id);die;
if($id == 1){
$this->send_workman($id);
}else{
echo '没有发送消息';
}
}
/**
* @route('send_workman')
*/
public function send_workman($id)
{
$to_uid = '1557062581000'; //和页面的uid一致,不填写也可以
// 推送的url地址,使用自己的服务器地址
$push_api_url = "http://www.tp5_test.com:2121/";
$post_data = array(
"type" => "publish",
"content" => $id,
"to" => $to_uid,
);
$ch = curl_init ();
curl_setopt ( $ch, CURLOPT_URL, $push_api_url );
curl_setopt ( $ch, CURLOPT_POST, 1 );
curl_setopt ( $ch, CURLOPT_HEADER, 0 );
curl_setopt ( $ch, CURLOPT_RETURNTRANSFER, 1 );
curl_setopt ( $ch, CURLOPT_POSTFIELDS, $post_data );
curl_setopt ( $ch, CURLOPT_HTTPHEADER, array("Expect:"));
$return = curl_exec ( $ch );
curl_close ( $ch );
var_export($return);
}
5.总结
两种方式都可以使用,推荐使用第二种,代码已经经过测试无问题。如果帮助到你的话,那就很棒了。如果有什么疑问的话,可以给我发邮件:m13188999295@163.com。我尽量答复。