寫在前面:本博文內容取自 http://www.php.cn/course/658.html 課程內容,課程講的不深,但作爲swoole入門教程是肯定夠了,感興趣的同學可以去學習一下
博主最近開始學習swoole，閒來沒事就想與大家分享一下這個用swoole+websocket實現的簡單聊天室demo
開發環境:
Centos 7,PHP 版本7.0.32
前端index.html頁面:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title id="myTitle">IM</title>
</head>
<style>
body {
background-color:green;
}
#myname {
width:120px;
height:30px;
}
.setUserName {
width:80px;
height:30px;
}
#msg{
margin:80px 300px;
width:450px;
height:200px;
background-color:white;
}
.show_send{
margin:0px 300px;
}
#text{
width:200px;
height:50px;
}
.send_button{
width:80px;
height:30px;
}
</style>
<body>
<h1>swoole-websocket 及時通訊demo</h1>
<!--發送信息-->
<div id="send_msg" class="main box-shadow" style="display:none;">
<div id="msg"></div>
<div class="show_send">
<input type="text" id="text"><input class="send_button" value="發送數據" type="submit" onclick="send_message()">
</div>
</div>
<!--設置暱稱-->
<div id="setName" class="box-shadow" style="display:block;margin:200px 150px 200px 550px;">
<input type="text" id="myname"/>
<input type="submit" class="setUserName" value="設置暱稱" onclick="send_name()">
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
var msg = document.getElementById("msg");
var wsServer = 'ws://192.168.8.131:9502';
var websocket = new WebSocket(wsServer);
websocket.onopen = function(evt){
// msg.innerHTML = websocket.readyState;
/*
connecting 0
open 1
closing 2
closed 3
*/
}
websocket.onmessage = function(evt){
msg.innerHTML += evt.data+'<br />';
console.log('從服務器獲取到的數據:'+ evt.data);
}
websocket.onclose = function(evt){
console.log("服務器拒絕");
}
websocket.onerror = function(evt,e){
console.log('錯誤:'+evt.data);
}
function send_message(){
var text = document.getElementById('text').value;
document.getElementById('text').value = '';
websocket.send(text);
}
function send_name(){
var text = document.getElementById('myname').value;
websocket.send("#name#"+text);
var myTitle = document.getElementById("myTitle");
myTitle.innerHTML = "IM" +text;
alert("設置成功");
var setName = document.getElementById("setName");
setName.style.display = "none";
var send_msg = document.getElementById("send_msg");
send_msg.style.display = "block";
}
</script>
</html>
服務端index.php代碼:
<?php
//服務器代碼
//創建websocket 服務器
$ws = new swoole_websocket_server("0.0.0.0",9502);
// open
$ws->on('open',function($ws,$request){
echo "新用戶 $request->fd 加入。\n";
$GLOBALS['fd'][$request->fd]['id'] = $request->fd;//設置用戶id
$GLOBALS['fd'][$request->fd]['name'] = '匿名用戶';//設置用戶名
});
//message
$ws->on('message',function($ws,$request){
$msg = $GLOBALS['fd'][$request->fd]['name'].":".$request->data."\n";
if(strstr($request->data,"#name#")){//用戶設置暱稱
$GLOBALS['fd'][$request->fd]['name'] = str_replace("#name#",'',$request->data);
}else{//進行用戶信息發送
//發送每一個客戶端
foreach($GLOBALS['fd'] as $i){
$ws->push($i['id'],$msg);
}
}
});
//close
$ws->on('close',function($ws,$request){
echo "客戶端-{$request} 斷開連接\n";
unset($GLOBALS['fd'][$request]);//清楚連接倉庫
});
$ws->start();
運行程序:
瀏覽器輸入頁面所在地址即可進行測試:
