seo网站推广收费,广告优化师前景怎样,电商创业,手机网站 微信链接本文旨在帮助初学者掌握在PHP中使用WebSocket的关键概念和技术。我们将深入讨论从建立连接、绑定到监听等各方面的操作#xff0c;并提供易于理解和实践的指导。
一、socket协议的简介
WebSocket是什么#xff0c;有什么优点
WebSocket是一个持久化的协议#xff0c;这是…本文旨在帮助初学者掌握在PHP中使用WebSocket的关键概念和技术。我们将深入讨论从建立连接、绑定到监听等各方面的操作并提供易于理解和实践的指导。
一、socket协议的简介
WebSocket是什么有什么优点
WebSocket是一个持久化的协议这是相对于http非持久化来说的。 举个简单的例子
HTTP/1.0和HTTP/1.1协议在每次请求-响应周期中都需要建立和关闭连接这在实时通信场景下效率较低。虽然HTTP/1.1引入了持久连接keep-alive但仍然存在着单向通信的限制服务器无法主动向客户端推送数据这对于实时通信是不利的。
相比之下WebSocket协议通过建立一次握手连接后可以实现持久化连接并且支持全双工通信。这意味着服务器和客户端之间可以在同一个连接上双向发送数据服务器可以主动向客户端推送消息从而实现了实时通信的要求。
通过使用WebSocket开发者可以建立一个稳定的、低延迟的双向通信通道适用于需要实时交互和推送消息的应用场景比如在线聊天、实时数据更新等。 二、介绍client与server之间的socket连接原理
client与server之间的Socket连接原理是建立在TCP/IP协议栈之上的。在介绍Socket连接原理之前我们先来理解一下Socket的概念
Socket是应用层与传输层之间的接口它允许应用程序通过网络进行通信。在TCP/IP协议中Socket是通过IP地址和端口号来唯一标识的。
下面是client与server之间Socket连接的简要原理
1. 建立连接Connection Establishment 客户端client向服务器server发起连接请求。客户端需要知道服务器的IP地址和端口号。 服务器在指定端口上监听listen传入的连接请求。 服务器接受连接请求创建一个新的套接字socket用于与客户端通信。 一旦连接建立成功客户端和服务器之间就可以通过各自的套接字进行数据交换。
2. 数据传输Data Transfer 一旦连接建立客户端和服务器可以通过各自的套接字发送和接收数据。 数据通过套接字的读取和写入操作进行传输使用TCP协议确保可靠的数据传输。
3. 关闭连接Connection Termination 当通信结束或者需要关闭连接时客户端或服务器可以发起关闭连接的请求。 发起关闭连接的一方发送一个终止连接的请求另一方确认并且双方的套接字被关闭。
Socket连接的建立和维护是通过TCP协议来实现的它提供了可靠的、全双工的数据传输通道使得客户端和服务器能够进行双向通信。在实际应用中开发者需要使用编程语言提供的Socket API来实现Socket连接这样就可以在应用程序中创建、管理和控制Socket连接实现数据的发送和接收。 socket建立连接原理图 三、PHP中建立socket的过程讲解
1、在PHP中client与server之间建立socket通信首先在PHP中创建socket并监听端口信息代码如下
//传相应的IP与端口进行创建socket操作
function WebSocket($address,$port){$server socket_create(AF_INET, SOCK_STREAM, SOL_TCP);socket_set_option($server, SOL_SOCKET, SO_REUSEADDR, 1);//1表示接受所有的数据包socket_bind($server, $address, $port);socket_listen($server);return $server;
}
2、设计一个循环挂起WebSocket通道进行数据的接收、处理和发送
//对创建的socket循环进行监听处理数据
function run(){//死循环直到socket断开while(true){$changes$this-sockets;$writeNULL;$exceptNULL;/*//这个函数是同时接受多个连接的关键我的理解它是为了阻塞程序继续往下执行。socket_select ($sockets, $write NULL, $except NULL, NULL);$sockets可以理解为一个数组这个数组中存放的是文件描述符。当它有变化就是有新消息到或者有客户端连接/断开时socket_select函数才会返回继续往下执行。$write是监听是否有客户端写数据传入NULL是不关心是否有写变化。$except是$sockets里面要被排除的元素传入NULL是”监听”全部。最后一个参数是超时时间如果为0则立即结束如果为n1: 则最多在n秒后结束如遇某一个连接有新动态则提前返回如果为null如遇某一个连接有新动态则返回*/socket_select($changes,$write,$except,NULL);foreach($changes as $sock){//如果有新的client连接进来则if($sock$this-master){//接受一个socket连接$clientsocket_accept($this-master);//给新连接进来的socket一个唯一的ID$keyuniqid();$this-sockets[]$client; //将新连接进来的socket存进连接池$this-users[$key]array(socket$client, //记录新连接进来client的socket信息shoufalse //标志该socket资源没有完成握手);//否则1.为client断开socket连接2.client发送信息}else{$len0;$buffer;//读取该socket的信息注意第二个参数是引用传参即接收数据第三个参数是接收数据的长度do{$lsocket_recv($sock,$buf,1000,0);$len$l;$buffer.$buf;}while($l1000);//根据socket在user池里面查找相应的$k,即健ID$k$this-search($sock);//如果接收的信息长度小于7则该client的socket为断开连接if($len7){//给该client的socket进行断开操作并在$this-sockets和$this-users里面进行删除$this-send2($k);continue;}//判断该socket是否已经握手if(!$this-users[$k][shou]){//如果没有握手则进行握手处理$this-woshou($k,$buffer);}else{//走到这里就是该client发送信息了对接受到的信息进行uncode处理$buffer $this-uncode($buffer,$k);if($bufferfalse){continue;}//如果不为空则进行消息推送操作$this-send($k,$buffer);}}}}}
3、以上服务器端完成的WebSocket的前期工作后就等着client连接进行client创建WebSocket很简单代码如下
var ws new WebSocket(ws://IP:端口);
//握手监听函数
ws.onopenfunction(){//状态为1证明握手成功然后把client自定义的名字发送过去if(so.readyState1){//握手成功后对服务器发送信息so.send(typeaddmingn);}
}
//错误返回信息函数
ws.onerror function(){console.log(error);
};
//监听服务器端推送的消息
ws.onmessage function (msg){console.log(msg);
}//断开WebSocket连接
ws.onclose function(){ws false;
}
四、聊天室实例代码
1、PHP部分
?php
error_reporting(E_ALL ^ E_NOTICE);
ob_implicit_flush();//地址与接口即创建socket时需要服务器的IP和端口
$sknew Sock(127.0.0.1,8000);//对创建的socket循环进行监听处理数据
$sk-run();//下面是sock类
class Sock{public $sockets; //socket的连接池即client连接进来的socket标志public $users; //所有client连接进来的信息包括socket、client名字等public $master; //socket的resource即前期初始化socket时返回的socket资源private $sdaarray(); //已接收的数据private $slenarray(); //数据总长度private $sjenarray(); //接收数据的长度private $ararray(); //加密keyprivate $narray();public function __construct($address, $port){//创建socket并把保存socket资源在$this-master$this-master$this-WebSocket($address, $port);//创建socket连接池$this-socketsarray($this-master);}//对创建的socket循环进行监听处理数据function run(){//死循环直到socket断开while(true){$changes$this-sockets;$writeNULL;$exceptNULL;/*//这个函数是同时接受多个连接的关键我的理解它是为了阻塞程序继续往下执行。socket_select ($sockets, $write NULL, $except NULL, NULL);$sockets可以理解为一个数组这个数组中存放的是文件描述符。当它有变化就是有新消息到或者有客户端连接/断开时socket_select函数才会返回继续往下执行。$write是监听是否有客户端写数据传入NULL是不关心是否有写变化。$except是$sockets里面要被排除的元素传入NULL是”监听”全部。最后一个参数是超时时间如果为0则立即结束如果为n1: 则最多在n秒后结束如遇某一个连接有新动态则提前返回如果为null如遇某一个连接有新动态则返回*/socket_select($changes,$write,$except,NULL);foreach($changes as $sock){//如果有新的client连接进来则if($sock$this-master){//接受一个socket连接$clientsocket_accept($this-master);//给新连接进来的socket一个唯一的ID$keyuniqid();$this-sockets[]$client; //将新连接进来的socket存进连接池$this-users[$key]array(socket$client, //记录新连接进来client的socket信息shoufalse //标志该socket资源没有完成握手);//否则1.为client断开socket连接2.client发送信息}else{$len0;$buffer;//读取该socket的信息注意第二个参数是引用传参即接收数据第三个参数是接收数据的长度do{$lsocket_recv($sock,$buf,1000,0);$len$l;$buffer.$buf;}while($l1000);//根据socket在user池里面查找相应的$k,即健ID$k$this-search($sock);//如果接收的信息长度小于7则该client的socket为断开连接if($len7){//给该client的socket进行断开操作并在$this-sockets和$this-users里面进行删除$this-send2($k);continue;}//判断该socket是否已经握手if(!$this-users[$k][shou]){//如果没有握手则进行握手处理$this-woshou($k,$buffer);}else{//走到这里就是该client发送信息了对接受到的信息进行uncode处理$buffer $this-uncode($buffer,$k);if($bufferfalse){continue;}//如果不为空则进行消息推送操作$this-send($k,$buffer);}}}}}//指定关闭$k对应的socketfunction close($k){//断开相应socketsocket_close($this-users[$k][socket]);//删除相应的user信息unset($this-users[$k]);//重新定义sockets连接池$this-socketsarray($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){$server socket_create(AF_INET, SOCK_STREAM, SOL_TCP);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;}/** 函数说明对client的请求进行回应即握手操作* $k clien的socket对应的健即每个用户有唯一$k并对应socket* $buffer 接收client请求的所有信息*/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;}//解码函数function uncode($str,$key){$mask array(); $data ; $msg unpack(H*,$str);$head substr($msg[1],0,2); if ($head 81 !isset($this-slen[$key])) { $lensubstr($msg[1],2,2);$lenhexdec($len);//把十六进制的转换为十进制if(substr($msg[1],2,2)fe){$lensubstr($msg[1],4,4);$lenhexdec($len);$msg[1]substr($msg[1],4);}else if(substr($msg[1],2,2)ff){$lensubstr($msg[1],4,16);$lenhexdec($len);$msg[1]substr($msg[1],16);}$mask[] hexdec(substr($msg[1],4,2)); $mask[] hexdec(substr($msg[1],6,2)); $mask[] hexdec(substr($msg[1],8,2)); $mask[] hexdec(substr($msg[1],10,2));$s 12;$n0;}else if($this-slen[$key] 0){$len$this-slen[$key];$mask$this-ar[$key];$n$this-n[$key];$s 0;}$e strlen($msg[1])-2;for ($i$s; $i $e; $i 2) { $data . chr($mask[$n%4]^hexdec(substr($msg[1],$i,2))); $n; } $dlenstrlen($data);if($len 255 $len $dlenintval($this-sjen[$key])){$this-ar[$key]$mask;$this-slen[$key]$len;$this-sjen[$key]$dlenintval($this-sjen[$key]);$this-sda[$key]$this-sda[$key].$data;$this-n[$key]$n;return false;}else{unset($this-ar[$key],$this-slen[$key],$this-sjen[$key],$this-n[$key]);$data$this-sda[$key].$data;unset($this-sda[$key]);return $data;}}//与uncode相对function code($msg){$frame array(); $frame[0] 81; $len strlen($msg);if($len 126){$frame[1] $len16?0.dechex($len):dechex($len);}else if($len 65025){$sdechex($len);$frame[1]7e.str_repeat(0,4-strlen($s)).$s;}else{$sdechex($len);$frame[1]7f.str_repeat(0,16-strlen($s)).$s;}$frame[2] $this-ord_hex($msg);$data implode(,$frame); return pack(H*, $data); }function ord_hex($data) { $msg ; $l strlen($data); for ($i 0; $i$l; $i) { $msg . dechex(ord($data{$i})); } return $msg; }//用户加入或client发送信息function send($k,$msg){//将查询字符串解析到第二个参数变量中以数组的形式保存如parse_str(nameBillage60,$arr)parse_str($msg,$g);$ararray();if($g[type]add){//第一次进入添加聊天名字把姓名保存在相应的users里面$this-users[$k][name]$g[ming];$ar[type]add;$ar[name]$g[ming];$keyall;}else{//发送信息行为其中$g[key]表示面对大家还是个人是前段传过来的信息$ar[nrong]$g[nr];$key$g[key];}//推送信息$this-send1($k,$ar,$key);}//对新加入的client推送已经在线的clientfunction getusers(){$ararray();foreach($this-users as $k$v){$ar[]array(code$k,name$v[name]);}return $ar;}//$k 发信息人的socketID $key接受人的 socketID 根据这个socketID可以查找相应的client进行消息推送即指定client进行发送function send1($k,$ar,$keyall){$ar[code1]$key;$ar[code]$k;$ar[time]date(m-d H:i:s);//对发送信息进行编码处理$str $this-code(json_encode($ar));//面对大家即所有在线者发送信息if($keyall){$users$this-users;//如果是add表示新加的clientif($ar[type]add){$ar[type]madd;$ar[users]$this-getusers(); //取出所有在线者用于显示在在线用户列表中$str1 $this-code(json_encode($ar)); //单独对新client进行编码处理数据不一样//对新client自己单独发送因为有些数据是不一样的socket_write($users[$k][socket],$str1,strlen($str1));//上面已经对client自己单独发送的后面就无需再次发送故unsetunset($users[$k]);}//除了新client外对其他client进行发送信息。数据量大时就要考虑延时等问题了foreach($users as $v){socket_write($v[socket],$str,strlen($str));}}else{//单独对个人发送信息即双方聊天socket_write($this-users[$k][socket],$str,strlen($str));socket_write($this-users[$key][socket],$str,strlen($str));}}//用户退出向所用client推送信息function send2($k){$this-close($k);$ar[type]rmove;$ar[nrong]$k;$this-send1(false,$ar,all);}//记录日志function e($str){//$pathdirname(__FILE__)./log.txt;$str$str.\n;//error_log($str,3,$path);//编码处理echo iconv(utf-8,gbk//IGNORE,$str);}
}
?
2、client部分
!doctype html
html
head
meta charsetutf-8
meta nameviewport contentwidthdevice-width, initial-scale1, user-scalableno/
titleHTML5 websocket 网页聊天室 javascript php/title
style typetext/css
body,p{margin:0px; padding:0px; font-size:14px; color:#333; font-family:Arial, Helvetica, sans-serif;}
#ltian,.rin{width:98%; margin:5px auto;}
#ltian{border:1px #ccc solid;overflow-y:auto; overflow-x:hidden; position:relative;}
#ct{margin-right:111px; height:100%;overflow-y:auto;overflow-x: hidden;}
#us{width:110px; overflow-y:auto; overflow-x:hidden; float:right; border-left:1px #ccc solid; height:100%; background-color:#F1F1F1;}
#us p{padding:3px 5px; color:#08C; line-height:20px; height:20px; cursor:pointer; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#us p:hover,#us p:active,#us p.ck{background-color:#069; color:#FFF;}
#us p.my:hover,#us p.my:active,#us p.my{color:#333;background-color:transparent;}
button{float:right; width:80px; height:35px; font-size:18px;}
input{width:100%; height:30px; padding:2px; line-height:20px; outline:none; border:solid 1px #CCC;}
.rin p{margin-right:160px;}
.rin span{float:right; padding:6px 5px 0px 5px; position:relative;}
.rin span img{margin:0px 3px; cursor:pointer;}
.rin span form{position:absolute; width:25px; height:25px; overflow:hidden; opacity:0; top:5px; right:5px;}
.rin span input{width:180px; height:25px; margin-left:-160px; cursor:pointer}#ct p{padding:5px; line-height:20px;}
#ct a{color:#069; cursor:pointer;}
#ct span{color:#999; margin-right:10px;}
.c2{color:#999;}
.c3{background-color:#DBE9EC; padding:5px;}
.qp{position:absolute; font-size:12px; color:#666; top:5px; right:130px; text-decoration:none; color:#069;}
#ems{position:absolute; z-index:5; display:none; top:0px; left:0px; max-width:230px; background-color:#F1F1F1; border:solid 1px #CCC; padding:5px;}
#ems img{width:44px; height:44px; border:solid 1px #FFF; cursor:pointer;}
#ems img:hover,#ems img:active{border-color:#A4B7E3;}
#ems a{color:#069; border-radius:2px; display:inline-block; margin:2px 5px; padding:1px 8px; text-decoration:none; background-color:#D5DFFD;}
#ems a:hover,#ems a:active,#ems a.ck{color:#FFF; background-color:#069;}
.tc{text-align:center; margin-top:5px;}
/style
/headbody
div idltiandiv idus classjb/divdiv idct/diva hrefjavascript:; classqp onClickthis.parentNode.children[1].innerHTML清屏/a
/div
div classrinbutton idsd发送/buttonspanimg srchttp://www.yxsss.com/ui/sk/t.png title表情 idimgbqimg srchttp://www.yxsss.com/ui/sk/e.png title上传图片forminput typefile title上传图片 idupimg/form/spanpinput idnrong/p
/div
div idemsp/pp classtc/p/div
script
if(typeof(WebSocket)undefined){alert(你的浏览器不支持 WebSocket 推荐使用Google Chrome 或者 Mozilla Firefox);
}
/script
script srchttp://www.yxsss.com/ui/p/a.js typetext/javascript/script
script
(function(){var keyall,mkey;var users{};var urlws://127.0.0.1:8000;var sofalse,nfalse;var lusA.$(us),lctA.$(ct);function st(){nprompt(请给自己取一个响亮的名字);nn.substr(0,16);if(!n){return ; }//创建socket注意URL的格式ws://ip:端口sonew WebSocket(url);//握手监听函数so.onopenfunction(){//状态为1证明握手成功然后把client自定义的名字发送过去if(so.readyState1){so.send(typeaddmingn);}}//握手失败或者其他原因连接socket失败则清除so对象并做相应提示操作so.onclosefunction(){sofalse;lct.appendChild(A.$$(p classc2退出聊天室/p));}//数据接收监听接收服务器推送过来的信息返回的数据给msg然后进行显示so.onmessagefunction(msg){eval(var damsg.data);var objfalse,cfalse;if(da.typeadd){var objA.$$(pda.name/p);lus.appendChild(obj);cuser(obj,da.code);objA.$$(pspan[da.time]/span欢迎ada.name/a加入/p);cda.code;}else if(da.typemadd){mkeyda.code;da.users.unshift({code:all,name:大家});for(var i0;ida.users.length;i){var objA.$$(pda.users[i].name/p);lus.appendChild(obj);if(mkey!da.users[i].code){cuser(obj,da.users[i].code);}else{obj.classNamemy;document.titleda.users[i].name;}}objA.$$(pspan[da.time]/span欢迎da.name加入/p);users.all.classNameck;}if(objfalse){if(da.typermove){var objA.$$(p classc2span[da.time]/spanusers[da.nrong].innerHTML退出聊天室/p);lct.appendChild(obj);users[da.nrong].del();delete users[da.nrong];}else{da.nrongda.nrong.replace(/{\\(\d)}/g,function(a,b){return img srcsk/b.gif;}).replace(/^data\:image\/png;base64\,.{50,}$/i,function(a){return img srca;});//da.code 发信息人的codeif(da.code1mkey){objA.$$(p classc3span[da.time]/spanausers[da.code].innerHTML/a对我说da.nrong/p);cda.code;}else if(da.codemkey){if(da.code1!all)objA.$$(p classc3span[da.time]/span我对ausers[da.code1].innerHTML/a说da.nrong/p);elseobjA.$$(pspan[da.time]/span我对ausers[da.code1].innerHTML/a说da.nrong/p);cda.code1;}else if(da.codefalse){objA.$$(pspan[da.time]/spanda.nrong/p);}else if(da.code1){objA.$$(pspan[da.time]/spanausers[da.code].innerHTML/a对users[da.code1].innerHTML说da.nrong/p);cda.code;}}}if(c){obj.children[1].onclickfunction(){users[c].onclick();}}lct.appendChild(obj);lct.scrollTopMath.max(0,lct.scrollHeight-lct.offsetHeight);}}A.$(sd).onclickfunction(){if(!so){return st();}var daA.$(nrong).value.trim();if(da){alert(内容不能为空);return false; }A.$(nrong).value;so.send(nresc(da)keykey);}A.$(nrong).onkeydownfunction(e){var ee||event;if(e.keyCode13){A.$(sd).onclick();}}function esc(da){dada.replace(//g,).replace(//g,).replace(/\/g,);return encodeURIComponent(da);}function cuser(t,code){users[code]t;t.onclickfunction(){t.parentNode.children.rcss(ck,);t.rcss(,ck);keycode;}}A.$(ltian).style.height(document.documentElement.clientHeight - 70)px;st();var bqA.$(imgbq),emsA.$(ems);var l80,r4,c5,s0,pMath.ceil(l/(r*c));var ptsk/;bq.onclickfunction(e){var ee||event;if(!so){return st();}ems.style.displayblock;document.onclickfunction(){gb(); }ct();try{e.stopPropagation();}catch(o){}}for(var i0;ip;i){var aA.$$(a hrefjavascript:;(i1)/a);ems.children[1].appendChild(a);ef(a,i);}ems.children[1].children[0].classNameck;function ct(){var wzbq.weiz();with(ems.style){topwz.y-242px;leftwz.xbq.offsetWidth-235px;}}function ef(t,i){t.onclickfunction(e){var ee||event;si*r*c;ems.children[0].innerHTML;hh();this.parentNode.children.rcss(ck,);this.rcss(,ck);try{e.stopPropagation();}catch(o){}}}function hh(){var zMath.min(l,sr*c);for(var is;iz;i){var aA.$$(img srcpti.gif);hh1(a,i);ems.children[0].appendChild(a);}ct();}function hh1(t,i){t.onclickfunction(e){var ee||event;A.$(nrong).value{\\i};if(!e.ctrlKey){gb();}try{e.stopPropagation();}catch(o){}}}function gb(){ems.style.display;A.$(nrong).focus();document.onclick;}hh();A.on(window,resize,function(){A.$(ltian).style.height(document.documentElement.clientHeight - 70)px;ct();}) var fimgA.$(upimg);var imgnew Image();var dw400,dh300;A.on(fimg,change,function(ev){if(!so){st();return false;}if(keyall){alert(由于资源限制 发图只能私聊);return false; }var fev.target.files[0];if(f.type.match(image.*)){var r new FileReader();r.onload function(e){img.setAttribute(src,e.target.result);};r.readAsDataURL(f);}});img.onloadfunction(){ihimg.height,iwimg.width;if(iw/ih dw/dh iw dw){ihih/iw*dw;iwdw;}else if(ih dh){iwiw/ih*dh;ihdh;}var rc A.$$(canvas);var ct rc.getContext(2d);rc.widthiw;rc.heightih;ct.drawImage(img,0,0,iw,ih);var darc.toDataURL();so.send(nresc(da)keykey);}})();
/script
/body
/html
