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\n"); echo "connection open:{$request->fd}\n"; //$ws->push($request->fd, json_encode(['hello','world'])); }); //監聽WebSocket消息事件 /** * $frame 客戶端發送的信息 * $frame->fd 客戶端的唯一編號 * $frame->data 客戶端發送的信息 * */ $ws->on('message', function ($ws, $frame) { //echo "接收到的信息: {$frame->data}\n"; //$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\n"; 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