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