有時我們需要自己搭建一個即時的聊天，先就講服務端和客戶端的實現分享如下。服務端需要運行在unix上。客戶端則不限制.在搭建配置的過程中，如有疑問可留言諮詢。
服務端的實現.
<?php
ini_set("display_errors", "On");
class sws {
private $serv;
private $redis;
//報告所有錯誤
public function __construct(){
echo '初始化參數...';
$this->serv = new swoole_websocket_server("0.0.0.0", 9501);
$this->redis = new Redis();
$this->redis->connect('127.0.0.1', 6379);
//$redis->flushAll();exit;
$this->serv->set([
'daemonize' => 1, //是否開啓守護進程
'worker_num' => 8, //實際需要去設定
'log_file' => '/var/www/html/swoole.log'
]);
$this->serv->on('open', function($server, $req) {
$this->redis->sAdd('fd', $req->fd);
});
$this->serv->on('message', function($server, $frame) {
var_dump($frame);
foreach($server->connections as $fd){
echo "received message: {$frame->data}\n";
$server->push($fd, json_encode($frame->data." : ".date('Y-m-d h:i:s', time()).'\n'));
}
});
$this->serv->on('WorkerStart', array($this, 'onWorkerStart'));
$this->serv->on('Connect', array($this, 'onConnect'));
$this->serv->on('close', function($server, $fd) {
echo "connection close: {$fd}\n";
});
$this->serv->start();
}
public function onWorkerStart( $serv , $worker_id) {
swoole_set_process_name("apathyss");
echo '執行到這裏....1\n';
}
public function onConnect( $serv, $fd, $from_id ) {
echo '執行到這裏..2\n';
echo "Client {$fd} connect\n";
}
public function onReceive(swoole_websocket_server $serv, $fd, $from_id, $data ) {
echo '執行到這裏..3\n';
echo "Get Message From Client {$fd}:{$data}\n";
}
}
new sws();
客戶端的實現
<!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-width: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';
var wsServer = 'ws://192.168.1.188:9501';
var websocket = new WebSocket(wsServer);
websocket.onopen = function (evt) {
console.log("Connected to WebSocket server.");
};
websocket.onmessage = function (evt) {
console.log('Retrieved data from server: ' + evt.data);
$(".panel-body").append(evt.data+'<br>');
//$(".panel-body").append('<p><span style="color:#177bbb">'+evt.data.username+'</span> <span style="color:#aaaaaa">('+evt.data.time+')</span>: '+evt.data.msg+'</p>');
var body = document.getElementById("body");
body.scrollTop = body.scrollHeight;
$("#in").focus();
};
$("#basic-addon2").click(function(){
var msg = $("#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>