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