服務端：
<?php
/**
* 基於Swoole的聊天室系統
*/
$server = new Swoole\Websocket\Server("0.0.0.0", 9502);
$server->on('open', function (swoole_websocket_server $server, $frame) {
//每一次客戶端連接 最大連接數將增加
$message = "歡迎 連接號{$frame->fd}：進入了聊天室";
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 = "[連接號{$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) {
//關閉連接 連接減少
$message = "連接號{$fd}：退出了聊天室";
echo "client {$fd} closed\n";
foreach ($server->connections as $key => $value) {
if($fd != $value){
$server->push($value, $message);
}
}
});
$server->start();
客戶端：
<!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>聊天室</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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）指標 -->
<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）項目 -->
<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）導航 -->
<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()">發送數據</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(), //小時
"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://你的地址';
//調用websocket對象建立連接：
//參數：ws/wss(加密)：//ip:port （字符串）
var websocket = new WebSocket(wsServer);
//onopen監聽連接打開
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>';
//向服務器發送數據
websocket.send(text);
}
//監聽連接關閉
// websocket.onclose = function (evt) {
// console.log("Disconnected");
// };
//onmessage 監聽服務器數據推送
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>';
};
//監聽連接錯誤信息
// 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>