socket.php
// 注释的部分是学习的笔记
<?php
//创建websocket服务器对象，监听0.0.0.0:9502端口
$ws = new swoole_websocket_server("0.0.0.0", ); //监听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