socket.php
// 注释的部分是学习的笔记
<?php //创建websocket服务器对象，监听0.0.0.0:9502端口 $ws = new swoole_websocket_server("0.0.0.0", 9501); //监听WebSocket连接打开事件 /** * 客户端想服务器发送信息是调用函数 * $ws websocket 服务器 * $request 客户端信息 * $request->fd 客户端唯一编号 * * */ $ws->on('open', function ($ws, $request) { //var_dump($request->fd, $request->get, $request->server); //$ws->push($request->fd, "hello, welcome "); echo "connection open:{$request->fd} "; //$ws->push($request->fd, json_encode(['hello','world'])); }); //监听WebSocket消息事件 /** * $frame 客户端发送的信息 * $frame->fd 客户端的唯一编号 * $frame->data 客户端发送的信息 * */ $ws->on('message', function ($ws, $frame) { //echo "接收到的信息: {$frame->data} "; //$ws->push($frame->fd, "server: {$frame->data}"); //echo "服务器已接收:【".$frame->fd."】"; //$ws->push($frame->fd, json_encode(['hello','world'.$frame->data])); // 1.客户端发送过来的信息 $content = $frame->data; echo "服务器接收到信息：".$content; // 2.讲消息发送个所有客户端 foreach ($ws->connections as $fd){ $ws->push($fd,$content); } }); //监听WebSocket连接关闭事件 $ws->on('close', function ($ws, $fd) { echo "client-{$fd} is closed "; echo "已断开链接:{$fd}"; }); $ws->start();
客户端显示数据：socket.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>客户端显示数据</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" ></script> </head> <body> <ul id="show"> </ul> </body> <script> $(function(){ //1.创建websocket客户端 var wsServer = 'ws://192.168.70.167:9501'; var websocket = new WebSocket(wsServer); //2.注册事件 //2.1 当客户端和服务器简历连接时执行该函数 websocket.onopen = function(){ //console.log("连接上了服务器"); addStr("连接上了服务器") } //2.2 当服务器想客户端发送消息时 执行该函数 // event.data 就是服务器发送过来的信息 websocket.onmessage = function(event){ console.log("接收到服务器发送的信息："+event.data); addStr(event.data); } // 2.3 当客户端和服务器断开连接时执行函数 websocket.onclose = function(event){ console.log("断开了链接"); } }); /*websocket.onopen = function(){ //console.log("连接上了服务器"); websocket.send("连接上了服务器") }*/ function addStr(str){ $str = "<li>"+str+"</li>"; $("#show").append($str); } </script> </html>
客户端发送数据：socket_add.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>客户端显示数据</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" ></script> </head> <body> <ul id="show"> </ul> </body> <script> $(function(){ //1.创建websocket客户端 var wsServer = 'ws://192.168.70.167:9501'; var websocket = new WebSocket(wsServer); //2.注册事件 //2.1 当客户端和服务器简历连接时执行该函数 websocket.onopen = function(){ //console.log("连接上了服务器"); addStr("连接上了服务器") } //2.2 当服务器想客户端发送消息时 执行该函数 // event.data 就是服务器发送过来的信息 websocket.onmessage = function(event){ console.log("接收到服务器发送的信息："+event.data); addStr(event.data); } // 2.3 当客户端和服务器断开连接时执行函数 websocket.onclose = function(event){ console.log("断开了链接"); } }); /*websocket.onopen = function(){ //console.log("连接上了服务器"); websocket.send("连接上了服务器") }*/ function addStr(str){ $str = "<li>"+str+"</li>"; $("#show").append($str); } </script> </html>
运行服务端
php socket.php
运行客户端
客户端显示数据：192.168.70.168:9501/socket.html （可以打开多个窗口，查看数据）
客户端发送数据：192.168.70.168:9501/socket_add.html