实例图：
Paste_Image.png
- 服务端 Websocket.php
$ws_server = new swoole_websocket_server('192.168.238.129',9502);
//设置server运行时的参数
$ws_server->set(array(
'daemonize' => true, //是否作为守护进程
'log_file' => __DIR__ .'/logs/web_socket.log'
));
//监听WebSocket连接打开事件
$ws_server->on('open', function ($ws, $request) {
// $ws->push($request->fd, $request->fd.' : '."Hello\n");
});
//监听WebSocket消息事件
$ws_server->on('message', function ($ws, $frame) {
pushMessage($ws,$frame->data,$frame->fd);
});
//监听WebSocket连接关闭事件
$ws_server->on('close', function ($ws, $fd) {
echo date('Y-m-d H:i:s').' 游客ID-'.$fd.' 退出了聊天室'."\r\n";
});
$ws_server->start();
//消息推送
function pushMessage($ws,$data,$fd){
echo date('Y-m-d H:i:s').' 游客ID-'.$fd.':'.$data."\r\n";
foreach($ws->connections as $dd){
$ws->push($dd, $fd.' : '.$data);
}
}
启动:
php websocket.php
重启机制：
先杀死进程，再重新启动
ps -eaf |grep "Websocket.php" | grep -v "grep"| awk '{print $2}'|xargs kill -9
2.客户端 websocket.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>基于php swoole扩展写的超简单聊天室</title>
<script type="text/javascript" charset="utf-8" >
if(window.WebSocket){
var webSocket = new WebSocket("ws://192.168.238.129:9502");
webSocket.onopen = function (event) {
};
webSocket.onmessage = function (event) {
var content = document.getElementById('content');
content.innerHTML = content.innerHTML.concat('<p >游客id-'+event.data+'</p>');
content.scrollTop = content.scrollHeight;
document.getElementById("message").value="";
}
var sendMessage = function(){
var data = document.getElementById('message').value;
webSocket.send(data);
}
}else{
console.log("浏览器不支持WebSocket");
}
</script>
<style >
p {
margin-left:20px;
height:8px;
line-height:20px;
}
#title {
text-align: center;
margin-bottom: 10px;
}
#room {
width: 600px;
border: 1px solid #ccc;
margin:0 auto;
}
#content {
overflow-y:auto;
height:300px;
border: 1px solid #ccc;
}
#talk {
height:40px;
margin-top:10px
}
#message {
margin-left:10px;
height:25px;
width:450px;
}
#sendButton {
margin-left:20px;
height:30;
width: 70px;
}
</style>
</head>
<body>
<div id="title" >基于php swoole扩展写的超简单聊天室</div>
<div id="room" >
<div id="content" ></div>
<div id="talk" >
<input type="text" id="message" placeholder="说点什么吧...">
<button id = "sendButton" onclick="sendMessage()" >发送</button>
</div>
</div>
</body>
</html>
开两个浏览器 访问
QQ图片20170117162053.png
网友评论