http://www.jianshu.com/p/0927b6072001
现在有一个需求,就是当服务器数据发送变化时,希望服务器能够主动给浏览器页面一个提醒(以某种方式提醒,如弹窗等)。大致流程图如图所示
首先想到最简单的方法就是利用ajax定时去请求后台是否有新数据,但是这种方式从请求到页面开始就不停的请求后台,请求设定的时间过长就失去实时性,时间过短又会过于浪费资源。然后想到的就是socket通信,但是web端能做实现socket通信吗?我大胆的搜了一下还真发现websocket可以实现浏览器与服务器全双工通信(full-duplex)。本文章将介绍一个高性能的PHP socket服务器框架来实现websocket通信。
环境:
1.windows
2.火狐浏览器
3.wampserver 64位服务器
资源:
https://github.com/walkor/web-msg-sender-for-win
步骤:
1.先下载WEB消息推送框架 并解压
2.环境变量设置下,要把php的执行文件,也就是php.exe设置到环境变量里面,我的电脑右键,属性,里面找到环境变量设置,在后面添加一个到php.exe的路径就可以了。
3.双击启动解压完的文件里面的start_for_win.bat。
4.在www目录下建立两个文件,一个是test.php,另一个是test.html
test.php:
<php
// 指明给谁推送,为空表示向所有在线用户推送
$to_uid='';
// 推送的url地址,上线时改成自己的服务器地址
$push_api_url="http://127.0.0.1:2121/";
// $push_api_url = "http://workerman.net:2121/";
$post_data=array(
'type'=>'publish',
'content'=>'hello world',
'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);
$return= curl_exec ($ch);
curl_close ($ch);
var_export($return);
test.html:
<script src='//cdn.bootcss.com/jquery/1.11.3/jquery.js'></script>
<script src='http://cdn.bootcss.com/socket.io/1.3.7/socket.io.js'></script>
<script >
$(document).ready(function() {
// 连接服务端
varuid="123";
// var socket = io('http://workerman.net:2120');
varsocket =io('http://'+document.domain+':2120');
// 连接后登录
socket.on('connect',function(){
socket.emit('login',uid);
});
// 后端推送来消息时
socket.on('new_msg',function(msg){
alert(msg);
});
// 后端推送来在线数据时
socket.on('update_online_count',function(online_stat){
$('#online_box').html(online_stat);
});
});
</script>
5.打开浏览器输入:localhost/socketTest/test.html
6.新建浏览器页面输入:localhost/socketTest/test.php
如图表示成功推送消息,我们回到test.html的页面看看
7.另外还可以调用api来实现推送,只需要改两个地方,分别是代码部分的①和②改为③和④