既然這樣，那我就把我寫(xiě)的無(wú)與倫比的websocket聊天室拿出來(lái)吧。
雖然只是一個(gè)渣的一比的DEMO，但是能聊...
基于 swoole 做的。 先貼圖片再貼代碼：
websocket聊天室
當(dāng)然你得先裝了 Swoole 擴(kuò)展才可以，并且該P(yáng)HP文件是在 CLI 模式下執(zhí)行的。不要在瀏覽器執(zhí)行。please
PHP代碼：
<?php
/**
* 基于Swoole的聊天室系統(tǒng)
*/
$server = new Swoole\Websocket\Server("0.0.0.0", 9502);
$server->on('open', function (swoole_websocket_server $server, $frame) {
//每一次客戶端連接 最大連接數(shù)將增加
$message = "歡迎 連接號(hào){$frame->fd}：進(jìn)入了聊天室";
echo $message."\n";
foreach ($server->connections as $key => $value) {
if($frame->fd != $value){
$server->push($value, $message);
}
}
});
$server->on('message', function (swoole_websocket_server $server, $frame) {
$fd = $frame->fd;
$data = $frame->data;
$message = "[連接號(hào){$fd}]:{$data}";
//向所有人廣播
foreach ($server->connections as $key => $value) {
if($frame->fd != $value){
$server->push($value, $message);
}
}
});
$server->on('close', function (swoole_websocket_server $server, $fd) {
//關(guān)閉連接 連接減少
$message = "連接號(hào){$fd}：退出了聊天室";
echo "client {$fd} closed\n";
foreach ($server->connections as $key => $value) {
if($fd != $value){
$server->push($value, $message);
}
}
});
$server->start();
在處理消息的時(shí)候一定要注意安全防護(hù)，假如你要存庫(kù)或者干什么，不然很容易被注入之類(lèi)的...
html代碼：（javascript的websocket，bootstrap）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>聊天室-opqnext.com</title>
<script src="js/libs/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" >
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.toastmessage.css">
<script src="js/jquery.toastmessage.js"></script>
<style>
body {
width: 600px;
margin: 40px auto;
font-family: 'trebuchet MS', 'Lucida sans', Arial;
font-size: 14px;
color: #444;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide">
<!-- 輪播（Carousel）指標(biāo) -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 輪播（Carousel）項(xiàng)目 -->
<div class="carousel-inner">
<div class="item active">
<img src="../img/1.jpg" alt="First slide">
</div>
<div class="item">
<img src="../img/2.jpg" alt="Second slide">
</div>
<div class="item">
<img src="../img/3.jpg" alt="Third slide">
</div>
</div>
<!-- 輪播（Carousel）導(dǎo)航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
</div>
<h2>聊天室（CHAT ROOM）</h2>
<br><br>
<br><br>
<div id="msg"></div>
<div class="form-group">
<input class="form-control" style="width: 50%;float: left" type="text" id="text">
<button type="button" class="btn btn-primary" data-loading-text="Loading..." value="" style="float: left;margin-left: 10px;" onclick="song()">發(fā)送數(shù)據(jù)</button>
</div>
<audio id="audio1" width="420" >
<source src="img/6571.wav" type="audio/wav" />
<source src="img/17.ogg" type="audio/ogg" />
</audio>
</body>
<script>
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小時(shí)
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
var msg = document.getElementById("msg");
var wsServer = 'ws://192.168.221.110:9502';
//調(diào)用websocket對(duì)象建立連接：
//參數(shù)：ws/wss(加密)：//ip:port （字符串）
var websocket = new WebSocket(wsServer);
//onopen監(jiān)聽(tīng)連接打開(kāi)
websocket.onopen = function (evt) {
msg.innerHTML = websocket.readyState;
};
function song(){
var text = document.getElementById('text').value;
document.getElementById('text').value = '';
var date = new Date().Format("MM-dd hh:mm:ss");
msg.innerHTML += '<p class="text-center"><span class="badge" style="background-color:#E0E0E0">'+date+'</span></p>';
msg.innerHTML += '<p class="text-right">[我]: '+ text+'</p>';
//向服務(wù)器發(fā)送數(shù)據(jù)
websocket.send(text);
}
//監(jiān)聽(tīng)連接關(guān)閉
// websocket.onclose = function (evt) {
// console.log("Disconnected");
// };
//onmessage 監(jiān)聽(tīng)服務(wù)器數(shù)據(jù)推送
websocket.onmessage = function (evt) {
$().toastmessage('showSuccessToast', "您有新消息啦！");
var audio = document.getElementById("audio1");
audio.play();
var date = new Date().Format("MM-dd hh:mm:ss");
msg.innerHTML += '<p class="text-center"><span class="badge" style="background-color:#E0E0E0">'+date+'</span></p>';
msg.innerHTML += '<p class="text-left">'+evt.data +'</p>';
};
//監(jiān)聽(tīng)連接錯(cuò)誤信息
// websocket.onerror = function (evt, e) {
// console.log('Error occured: ' + evt.data);
// };
$(function() {
$("#myCarousel").carousel('cycle');
// $().toastmessage('showSuccessToast', "您有新消息啦！");
// var audio = document.getElementById("audio1");
// audio.play();
});
</script>
</html>
你看我這個(gè)聊天室就神奇的很吶，幾乎沒(méi)做什么安全過(guò)濾，你輸入什么html，javascript的代碼之類(lèi)的呢，都能執(zhí)行，真是開(kāi)心吶。
我也就是寫(xiě)個(gè)例子，來(lái)大概跑一下，swoole的websocket的聊天室是怎么聊天的。
有了這個(gè)聊天室，真是又能寫(xiě)篇博客了呀。
