摘要：
phpswoole+websocket客户端代码˂!
php swoole+websocket
客户端代码
<!DOCTYPE html> <html> <head> <title></title> <meta name="viewport"content="width=device-width,initial-scale=1"> <meta charset="utf-8"/> <link rel="stylesheet"href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet"href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="http://cdn.bootcss.com/socket.io/1.3.5/socket.io.js"></script> </head> <body> <div id="box"style="max-700px;margin:0 auto;"> <div class="panel panel-default"> <div class="panel-heading"><h2>聊天室</h2><span style="color:green;display:none;">(当前在线:<span id="length">0</span>人)</span></div> <div class="panel-body"id="body"style="height:400px;overflow-y:auto;"> </div> </div> <div class="input-group"> <input type="text"class="form-control"id="in"placeholder="您想说什么?"aria-describedby="basic-addon2"> <span class="input-group-addon"id="basic-addon2"style="cursor:pointer;">发送</span> </div> </div> <div class="modal fade bs-example-modal-sm"data-backdrop="static"id="model"tabindex="-1"role="dialog"aria-labelledby="mySmallModalLabel"aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="input-group"> <input type="text"class="form-control"id="name"placeholder="请输入您的昵称"aria-describedby="basic-addon3"> <span class="input-group-addon"id="basic-addon3"style="cursor:pointer;">开始聊天</span> </div> </div> </div> </div> </body> <script> $(document).ready(function(){ window.username = 'others'; varwsServer = 'ws://192.168.151.125:9502'; varwebsocket = newWebSocket(wsServer); websocket.onopen = function(evt) { console.log("Connected to WebSocket server."); $("#model").modal('show'); }; websocket.onmessage = function(evt) { console.log('Retrieved data from server: ' +evt.data); $(".panel-body").append(evt.data); //$(".panel-body").append('<p><span style="color:#177bbb">'+evt.data.username+'</span> <span style="color:#aaaaaa">('+evt.data.time+')</span>: '+evt.data.msg+'</p>'); varbody =document.getElementById("body"); body.scrollTop =body.scrollHeight; $("#in").focus(); }; $("#basic-addon2").click(function(){ varmsg =$("#in").val(); websocket.send(msg); $("#in").val(''); }); $("#basic-addon3").click(function(){ window.username =$("#name").val(); websocket.send("login|@|"+window.username); $("#model").modal('hide'); }); }); </script> </html>
php代码
安装
swoole扩展（php官方已经支持）
可直接安装
linux执行
pecl install swoole
成功后查看phpinfo是否安装成功swoole
服务端代码
date_default_timezone_set('PRC');
$users = array();
//创建websocket服务器对象，监听0.0.0.0:9502端口
$ws = new swoole_websocket_server("0.0.0.0", 9502);
$ws->set(array(
'worker_num' => 1,
));
//监听WebSocket连接打开事件
$ws->on('open', function ($ws, $request) {
//var_dump($request->fd, $request->get, $request->server);
//global $users;
// var_dump($users);
// $users[] = $request->fd;
//var_dump($users);
//$ws->push($request->fd, "hello, welcome
");
});
//监听WebSocket消息事件
$ws->on('message', function ($ws, $frame) {
global $users;
//var_dump($frame);
$data = $frame->data;
$arr = explode('n|@|',$data);
if(count($arr)>1){
$users[$frame->fd] = $arr[1];
foreach($users as $fd=>$name){
$ws->push($fd,'<p><span style="color:#177bbb">系统通知</span><span style="color:#aaaaaa">('.date('H:i:s').')</span>:'.$arr[1].'加入聊天</p>');
}
}else{
//var_dump($users);
foreach($users as $fd=>$name){
//$msg = 'from'.$name.":{$frame->data}
";
$msg = '<p><span style="color:#177bbb">'.$users[$frame->fd].'</span> <span style="color:#aaaaaa">('.date('H:i:s').')</span>: '.$frame->data.'</p>';
$ws->push($fd,$msg);
}
}
});
//监听WebSocket连接关闭事件
$ws->on('close', function ($ws, $fd) {
echo "client-{$fd} is closed
";
});
$ws->start();简单的聊天室就ok了