今天因我的同桌想做一个公司内部的管理后台,但是想实现一个效果:管理后台打开一个页面,页面上有一个二维码,二维码方便有一个绿色的按钮,当客户端扫描二维码之后,管理后台的按钮由绿色变为红色。
方案一、js
最简单的办法就是,APP请求服务器,服务器去改变对应数据里的状态字段,页面里套用一个js 的ajax方法实时请求这个字段的值,但是这样对于一个页面的这个做法感觉有点因小失大了,如果页面有好多数据量的话,页面会很慢,还会很卡。随意被pass了。
方案二、webSocket
按照 web实现推送消息的机制,服务器作为socket服务,客户端扫完二维码之后向服务器推送消息,服务器再向对应UID的页面推送消息
代码:
1、去网站下载对应的程序包,放到服务器开socket服务 http://www.workerman.net/web-sender,按照上面说的取搭建就好了
2、分为 接收接口、发送两个接口
接收接口:负责连接socket服务器,取消息
发送接口:负责连接socket服务器,发送消息
接收:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link href="main.css" rel="stylesheet" type="text/css" /> <script src='//cdn.bootcss.com/socket.io/1.3.7/socket.io.js'></script> <script src='//cdn.bootcss.com/jquery/1.11.3/jquery.js'></script> <script src='/notify.js'></script> </head> <body> <script> $(document).ready(function () { // 连接服务端 var socket = io('http://localhost:2120'); // 连接后登录 socket.on('connect', function(){ socket.emit('login', 596272866); }); // 后端推送来消息时 socket.on('new_msg', function(msg){ $('#content').html('收到消息:'+msg); $('.notification.sticky').notify(); alert(msg); }); // 后端推送来在线数据时 socket.on('update_online_count', function(online_stat){ $('#online_box').html(online_stat); }); }); </script> </body> </html>发送: <?php // 指明给谁推送,为空表示向所有在线用户推送 $to_uid = "596272866"; // 推送的url地址,上线时改成自己的服务器地址 $push_api_url = "http://localhost:2121"; $post_data = array( "type" => "publish", "content" => $_REQUEST['content'], "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);
