高性能AJAX模拟WebSocket实现实时通讯 2017-06-15 23:34:50

曾经在工作中，老板问到：“能不能做个二维码登录？”

我第一反应想到用websocket，可是用了这个，想兼容IE10-会非常麻烦，如果用ajax实时监听是否有扫描，又非常消耗服务器资源，考虑到项目比较赶，我捂着良心说了句“可以，不过不兼容IE10-”

每次想起这点，都会为自己能力有限而感到惭愧，既然最近有空了，那么把思路从新整理一下

通过度娘得到的，多半是通过flash创建socket连接，或者是旧版的socket.io；最后我还是决定观察可二维码登录的网站

首先打开网页版微信，接着打开审查元素的Network……

微信二维码登录

这……不是socket！！是AJAX，不过读取速度非常慢，大概25秒读取一次，看到这个结果脑里思路不禁整理了一番，说白了就是服务器增加了一个睡眠，不过这样的确能在某种程度上模拟socket的效果，而且兼容性也很好，对服务器压力也不会很大，也不用引入什么flash，就算PHP虚拟空间不允许你使用socket也不会有任何影响

先上前端代码

客户端

<!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://tool.oschina.net/js/jquery/jquery-1.7.2.js"></script> <style> #chat{min-height:80px;border:1px solid #ccc;margin-bottom:10px;} </style> </head> <body> <div id="chat"> </div> <input type="text" /><br /> <button>发送</button> <script> var chat = $("#chat"); //由于后端是用IO代替数据库，需要一个索引 var index = 0; //接收聊天信息 var receive = function(i){ $.ajax({ url: 'server.php', dataType: 'html', type: 'post', //最好做个超时，我们并不知道客户端有没有设置了超时 timeout:10000, data: { state: 'receive', index: i }, success: function(res){ //得到新消息，更新到聊天框 chat.append(res + "<br />"); index++; }, //关键，通过无限递归接收消息 complete: function(){ receive(index); } }); }; receive(index); //发送聊天信息 $("button").click((function(){ //发送时加锁，防止出现异步冲突问题 var lock = false; var content = $("input"); return function(){ if (lock) return; lock = true; $.ajax({ url: 'server.php', dataType: 'json', type: 'post', data: { state: 'send', content: content.val() }, complete: function(){ lock = false; } }); } })()); </script> </body> </html>

服务端(PHP)，命名为server.php：

if (isset($_POST['state'])) { //用户想接收消息 if ($_POST['state'] == 'receive') { while(true) { //防止无限循环炸了CPU sleep(1); //为了方便演示，使用IO的方式代替数据库 if (is_file("db.txt")) $db = file("db.txt"); if (isset($db[$_POST['index']])) { echo $db[$_POST['index']]; //已经读取到了数据，无需继续死循环 break; } } } //用户发送了消息过来 else if ($_POST['state'] == 'send') { file_put_contents('db.txt', $_POST['content']."\r\n", FILE_APPEND); } }

直接在php环境下创建这两个文件即可，为了方便演示，用IO代替DB，同时只为了把思路写出来，并不会像写项目那么严谨，如果直接拿来用需谨慎

那么，在最后，我们看下效果吧：

最终效果

原创文章,转载请注明出处

高性能AJAX模拟WebSocket实现实时通讯 2017-06-15 23:34:50

警告