websocket+php实现前后端实时通信

使用websocket+php实现前后端实时通信，由于发送的文件可能是大文件，

所以本代码对大文件进行了分片发送处理；

由于websocket是应用层协议，即websocket对需要发送的内容进行了封装，

所以，当服务端接收完每一片的内容时需要对接收完的内容进行解码（解封装）；

websocket的封装协议可以去百度一下。

server端代码：<?phperror_reporting(E_ALL ^ E_NOTICE);set_time_limit(0);ob_implicit_flush();//地址与接口，即创建socket时需要服务器的IP和端口$sk=new Sock('0.0.0.0',4000);//这里表示允许所有ip连接该websocket服务器//对创建的socket循环进行监听，处理数据$sk->run();//下面是sock类class Sock{public $sockets; //socket的连接池，即client连接进来的socket标志public $users; //所有client连接进来的信息，包括socket、client名字等public $master; //socket的resource，即前期初始化socket时返回的socket资源public $real_path;//上传文件时获取的文件路径private $sda=array(); //已接收的数据private $slen=array(); //数据总长度private $sjen=array(); //接收数据的长度private $ar=array(); //加密keyprivate $n=array();public function __construct($address, $port){//创建socket并把保存socket资源在$this->master$this->master=$this->WebSocket($address, $port);//创建socket连接池$this->sockets=array($this->master);}//对创建的socket循环进行监听，处理数据function run(){$len_content = 0;//死循环，直到socket断开while(true){$changes=$this->sockets;$write=NULL;$except=NULL;socket_select ($changes, $write , $except , NULL);foreach($changes as $sock){//如果有新的client连接进来，则if($sock==$this->master){//接受一个socket连接$client=socket_accept($this->master);//给新连接进来的socket一个唯一的ID$key=uniqid();$this->sockets[]=$client; //将新连接进来的socket存进连接池$this->users[$key]=array('socket'=>$client, //记录新连接进来client的socket信息'shou'=>false //标志该socket资源没有完成握手);//否则1.为client断开socket连接，2.client发送信息}else{$len=0;$buffer='';//读取该socket的信息，注意：第二个参数是引用传参即接收数据，第三个参数是接收数据的长度while(($leng = socket_recv($sock,$buf,1024,MSG_DONTWAIT)) > 0){//此处需要注意MSG_DONTWAIT在部分windows版本的php中可能没有定义所以在接收数据时需要重新处理$len+=$leng;// $buf1 = $buf;$buffer.=$buf;$buf = null;//var_dump($leng);}//根据socket在user池里面查找相应的$k,即健ID$k=$this->search($sock);//如果接收的信息长度小于7，则该client的socket为断开连接if($len<7){//给该client的socket进行断开操作，并在$this->sockets和$this->users里面进行删除$this->send2($k);continue;}//判断该socket是否已经握手if(!$this->users[$k]['shou']){//如果没有握手，则进行握手处理$this->woshou($k,$buffer);$buf = null;}else{//走到这里就是该client发送信息了，对接受到的信息进行decode解码处理//$buffer = $this->decode($buffer);if($buffer==false){continue;}if ('send_type' == substr($buffer,0,9)){//表示发送的内容是字符串$this->send($k,$buffer);continue;}if (false !== strpos($buffer, 'filename=')) {$len_content = 0;parse_str($buffer,$msg);//$filename = $this->saveFile(substr($buffer, 9));$filename = $msg['filename'];$fileNewPath = $this->saveFile($msg['filename']);$fileNewName = basename($fileNewPath);$filesize = $msg['filesize'];$this->response($k,array('data' => 'ok', 'filename' =>$filename, 'fileNewName' => "$fileNewName"));} else if(!empty($fileNewName)){$this->saveFileContent($fileNewPath, $buffer);$len_content += strlen($buffer);if($len_content >= $filesize){$fileNewName = "";}$this->response($k, array('data' => 'ok', 'percent' =>floor($len_content/$filesize*100), 'recv'=> $len_content,'fileName' => $filename));}}}}}}//指定关闭$k对应的socketfunction close($k){//断开相应socketsocket_close($this->users[$k]['socket']);//删除相应的user信息unset($this->users[$k]);//重新定义sockets连接池$this->sockets=array($this->master);foreach($this->users as $v){$this->sockets[]=$v['socket'];}//输出日志$this->e("key:$k close");}//根据sock在users里面查找相应的$kfunction search($sock){foreach ($this->users as $k=>$v){if($sock==$v['socket'])return $k;}return false;}//传相应的IP与端口进行创建socket操作function WebSocket($address,$port){$commonProtocol = getprotobyname("tcp");//$server = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);$server = socket_create(AF_INET, SOCK_STREAM,$commonProtocol);socket_set_option($server, SOL_SOCKET, SO_REUSEADDR,1);//1表示接受所有的数据包socket_bind($server, $address, $port);socket_listen($server);$this->e('Server Started : '.date('Y-m-d H:i:s'));$this->e('Listening on : '.$address.' port '.$port);return $server;}function woshou($k,$buffer){//截取Sec-WebSocket-Key的值并加密，其中$key后面的一部分258EAFA5-E914-47DA-95CA-C5AB0DC85B11字符串应该是固定的$buf = substr($buffer,strpos($buffer,'Sec-WebSocket-Key:')+18);$key = trim(substr($buf,0,strpos($buf,"\r\n")));$new_key = base64_encode(sha1($key."258EAFA5-E914-47DA-95CA-C5AB0DC85B11",true));//按照协议组合信息进行返回$new_message = "HTTP/1.1 101 Switching Protocols\r\n";$new_message .= "Upgrade: websocket\r\n";$new_message .= "Sec-WebSocket-Version: 13\r\n";$new_message .= "Connection: Upgrade\r\n";$new_message .= "Sec-WebSocket-Accept: " . $new_key ."\r\n\r\n";socket_write($this->users[$k]['socket'],$new_message,strlen($new_message));//对已经握手的client做标志$this->users[$k]['shou']=true;return true;}//对websocket的封装帧解封装function decode($buffer) {$len = $masks = $data = $decoded = null;$len = ord($buffer[1]) & 127;if ($len === 126) {$masks = substr($buffer, 4, 4);$data = substr($buffer, 8);}else if ($len === 127) {$masks = substr($buffer, 10, 4);$data = substr($buffer, 14);}else {$masks = substr($buffer, 2, 4);$data = substr($buffer, 6);}//for ($index = 0; $index < strlen($data); $index++) {$decoded .= $data[$index] ^ $masks[$index % 4];}return $decoded;}function frame($s){$a = str_split($s, 125);//添加头文件信息，不然前台无法接受if (count($a) == 1){return "\x81" . chr(strlen($a[0])) . $a[0];}$ns = "";foreach ($a as $o){$ns .= "\x81" . chr(strlen($o)) . $o;}return $ns;}//用户加入或client发送信息function send($k,$msg){//将查询字符串解析到第二个参数变量中，以数组的形式保存如：parse_str("name=Bill&age=60",$arr)parse_str($msg,$g);$ar=array();if(isset($g['status'])&&isset($g['command'])){//第一次进入添加聊天名字，把姓名保存在相应的users里面//$this->users[$k]['status']=$g['status'];$ar['command']=$g['command'];$ar['status']=$g['status'];$ar['swdid']=$g['swdid'];//$key=$g['key'];}else if(isset($g['command'])){$ar['command']=$g['command'];$ar['swdid']=$g['swdid'];//$key=$g['key'];}//推送信息$this->send1($k,$ar);}//对新加入的client推送已经在线的clientfunction getusers(){$ar=array();foreach($this->users as $k=>$v){$ar[]=array('code'=>$k,'name'=>$v['name']);}return $ar;}//发送文件消息时function response($k,$ar){//if($ar['real_path']){$str = $this->frame(json_encode($ar));$users=$this->users;//给自己发消息foreach($users as $k1 => $v){if($k1 == $k){socket_write($v['socket'],$str,strlen($str));}}}//$k 发信息人的socketID $key接受人的 socketID ，根据这个socketID可以查找相应的client进行消息推送，即指定client进行发送function send1($k,$ar){$ar['time']=date('m-d H:i:s');//对发送信息进行编码处理$str = $this->frame(json_encode($ar));$users=$this->users;//给除了自己以外的用户发消息foreach($users as $k1 => $v){if($k1 != $k){socket_write($v['socket'],$str,strlen($str));}}}//用户退出function send2($k){$this->close($k);}//记录日志function e($str){//$path=dirname(__FILE__).'/log.txt';$str=$str."\n";//error_log($str,3,$path);//编码处理echo iconv('utf-8','gbk//IGNORE',$str);}//生成唯一uuid文件名称function uuid($prefix = ''){$chars = md5(uniqid(mt_rand(), true));$uuid = substr($chars,0,8) . '-';$uuid .= substr($chars,8,4) . '-';$uuid .= substr($chars,12,4) . '-';$uuid .= substr($chars,16,4) . '-';$uuid .= substr($chars,20,12);return $prefix . $uuid;}//保存文件名到指定路径function saveFile($filename){if(!is_dir("../admin/app/storage/uploads/")){mkdir("../admin/app/storage/uploads/");}$update_path = '../admin/app/storage/uploads/';$exe = substr($filename, strrpos($filename, '.'));$exe = $exe == '.jpeg' ? '.jpg' : $exe;$fileNewName = $this->uuid() . $exe;$path = $update_path . $fileNewName;// echo "file path : {$path}\n";return $path ;}//保存文件内容function saveFileContent($path,$content){//$content =file_put_contents($path, $content,FILE_APPEND);}}?>

client端代码：<!DOCTYPE html><html><head>    <title>WebSocket Chat Client</title>    <meta charset="utf-8" />    <script type="text/javascript" src="jquery-1.6.4.min.js"></script>    <script type="text/javascript" src="jquery.json-2.3.min.js"></script>    <script type="text/javascript">        $(document).ready(            function() {                // Check for the various File API support.                if (window.File && window.FileReader && window.FileList                    && window.Blob) {                    // Great success! All the File APIs are supported.                } else {                    alert('The File APIs are not fully supported in this browser.');                }        });        //在消息框中打印内容        function log(text) {            $("#log").append(text+"\n");        }        //全局的websocket变量        var ws;        //var paragraph = 1024;        var paragraph = 1024;//这里每一片段尽量小于MTU（1500），防止发送过程再分片，以至于服务端接收每一片完成后解码错误        var fileList ;        var file;        var startSize,endSize = 0;        var i = 0; j = 0;        //连接服务器        $(function() {            $("#connect").click(function() {                //ws = new WebSocket($("#uri").val());                ws = new WebSocket("ws://127.0.0.1:4000");                //连接成功建立后响应                ws.onopen = function() {                    console.log("成功连接到" + $("#uri").val());                }                ws.onerror = function(err) {                    var txt = "";                    for (var x in err)                    {                        txt=txt + err[x];                    }                    alert("Error: " + txt);                };                //收到服务器消息后响应                ws.onmessage = function(e) {                    var msg = e.data;                   e = JSON.parse(e.data)                    log("服务器说" + msg + (e.data=="ok"));                    if(e.data == "ok") {                        if (endSize < file.size) {                            startSize = endSize;                            if (file.size - startSize < paragraph) {                                //防止文件或者分片剩余部分小于分片大小                                endSize += file.size - startSize ;                            } else {                                endSize += paragraph;                            }                            var blob;                            if (file.webkitSlice) {                                blob = file.webkitSlice(startSize, endSize);                            } else if (file.mozSlice) {                                blob = file.mozSlice(startSize, endSize);                            } else if (file.slice) {                                blob = file.slice(startSize, endSize);                            }                            var reader = new FileReader();                            reader.readAsArrayBuffer(blob);                            reader.onload = function loaded(evt) {                                var ArrayBuffer = evt.target.result;                                log("发送文件第" + (i++) + "部分");                                ws.send(ArrayBuffer+"\r\n");                                //ws.send("\r\n");                            }                        } else {                                startSize = endSize = 0;                                i = 0;                                log("发送" + file.name + "完毕");                                file = fileList[j++];                                /*if (file.name) {                                    ws.send(file.name);                                }*/                                log("发送文件完毕");                        }                    }                };                        //连接关闭后响应                ws.onclose = function () {                    console.log("关闭连接");                    ws = null;                };                return false;                   // }            });        });        $(function() {            $("#sendFileForm").click(function() {                fileList = document.getElementById("file").files;                file = fileList[0];                //var FileExt=file.name.replace(/.+\./,"");   //正则表达式获取后缀               // alert(FileExt);                //alert(file.size);                ws.send("filename="+file.name+"&filesize="+file.size);                /*while(endSize < file.size) {                    startSize = endSize;                    if (file.size - startSize < paragraph) {                        //防止文件或者分片剩余部分小于分片大小                        endSize += file.size - startSize;                    } else {                        endSize += paragraph;                    }                    var blob;                    if (file.webkitSlice) {                        blob = file.webkitSlice(startSize, endSize);                    } else if (file.mozSlice) {                        blob = file.mozSlice(startSize, endSize);                    } else if (file.slice) {                        blob = file.slice(startSize, endSize);                    }                   // alert(file);                    var reader = new FileReader();                    //reader.readAsBinaryString(blob);                    //reader.readAsText(blob,'gbk');                    //ws.binaryType="arrayBuffer"                    reader.readAsArrayBuffer(blob);                    reader.onload = function loaded(evt) {                        //alert("111111111111");arrbff.byteLength                        var arrbff = (evt.target.result);                        //var arrbff =[1,2,3,45];                        //alert(arrbff);                       // var aBinary = new Uint8Array(arrbff);                        //alert("aBinary:" + arrbff);                        ws.send(arrbff);                        console.log("发送文件第" + (i++) + "部分");                    }                }                //alert(endSize);                startSize = endSize = 0;                i = 0;                console.log("发送" + file.name +"完毕");                file = fileList[j++];*/                console.log("发送文件名完毕");            });        });        $(function() {            $("#reset").click(function() {                $("#log").empty();                return false;            });        });    </script></head><body><span>Html5功能测试</span><span id="progress">0</span><br><input type="text" id="uri" value="ws://localhost:4000"       style="width: 200px;"> <input type="button" id="connect"                                     value="Connect"><input type="button" id="disconnect"                                                            value="Disconnect" disabled="disabled"><form >    <input id="file" type="file" multiple />    <input type="button" id="sendFileForm" value="测试" />    <input type="button" id="reset" value="清空消息框" /></form><form>        <textarea id="log" rows="30" cols="100"                  style="font-family: monospace; color: red;"></textarea></form></body></html>