Web前后端数据交互技术 课件 7.4.3 WebSocket操作（三）

——江西应用技术职业学院web前后端数据交互技术Socket通信案例分析案例思路：1.使用PHP实现Socket服务端//创建Socket。AF_INET：代表通信时使用IPv4协议；SOCK_STREAM：代表传输的数据是二进制流数据；SOL_TCP：代表底层使用的协议是TCP$socket=socket_create(AF_INET,SOCK_STREAM,SOL_TCP);//指定Socket相应的属性。SOL_SOCKET：设定协议的等级；SO_REUSEADDR：设置端口释放之后可以立即被使用案例分析案例思路：socket_set_option($socket,SOL_SOCKET,SO_REUSEADDR,1);//绑定端口socket_bind($socket,0,$port);//监听端口socket_listen($socket);//声明一个数组，用于存放所有的客户端连接$clients=array($socket);案例分析案例思路：while(true){$changed_socket=$clients;//在当前数组中获取活跃的Socket连接，即当前正在发送请求的连接或正在传输数据的连接等socket_select($changed_socket,$null,$null,0,10);案例分析案例思路：//判断当前的Socket是否为活跃的Socket，如果是，说明客户端在请求连接if(in_array($socket,$changed_socket)){echo"clientconnecting";//显示正在连接中$socket_new=socket_accept($socket);//接受连接$clients[]=$socket_new;案例分析案例思路：//发送握手信息$header=socket_read($socket_new,1024);perform_handshaking($header,$socket_new,$host,$port);//在连接成功后，当前Socket要从活跃Socket列表中删除，否则会陷入死循环$key=array_search($socket,$changed_socket);unset($changed_socket[$key]);案例分析案例思路：如果不是新连接，是客户端在发送数据,服务器开始读取客户端发送的数据并进行格式处理（解包、转换、编码）//解包数据$received_text=unmask($buf);//将数据解包后转成JSON对象$msgJson=json_decode($received_text);案例分析案例思路：

$namer=$msgJson->namer;//读取数据$content=$msgJson->content;$message=mask(json_encode([//将数据进行编码'namer'=>$namer,'content'=>$content,'type'=>'usermsg']));案例分析2.使用Jquery实现Socket客户端$(function(){//连接Socket的URL地址varwsurl="ws://:8085/ajax/server.php";varwebsocket;//用于存放客户端创建的Socket对象案例分析if(window.WebSocket){websocket=newWebSocket(wsurl);websocket.onopen=function(event){//onopen事件，连接成功$('#showMessage').append("<p>connetedsuccess!</p>");}案例分析websocket.onmessage=function(event){//onmessage事件，接收消息，显示在页面上varmsg=JSON.parse(event.data);vartype=msg.type;varnamer=r;varcontent=msg.content;案例分析if(type=='usermsg'){$('#showMessage').append("<p>"+namer+":"+content+"</p>");}else{$('#showMessage').append("<p>system:"+content+"</p>");}}案例分析//数据发送

functionsend(){varnamer=$("[name='namer']").val();varcontent=$("[name='content']").val();if(namer==''){alert('请输入名称');returnfalse;}案例分析varmsg={namer:namer,content:content};