測試版本
虛擬機案例地址 http://192.168.13.121/swoole_file_frontend/demo/index.html
服務器要求
1.安裝并啟用swoole組件 https://segmentfault.com/a/1190000008285814 安裝方式大同小異
2.編輯一個啟動webSocket的server.php文件
~~~
<?php
//連接本地的 Redis 服務
$redis = new Redis();
$redis->connect('127.0.0.1', 6379);
$redis->set("fd", "[]"); //每次第一次執行都需要先清空reids里面的標識
$server = new swoole_websocket_server("0.0.0.0", 9502);
$server->on('open', function (swoole_websocket_server $server, $request) use($redis) {
echo "訪客{$request->fd}進來了\n";
$server->push($request->fd, "{$request->fd}客戶進來了");
$str = json_decode($redis->get("fd"), true);
if($str == "") $str = [];
if(!in_array($request->fd, $str)){
array_push($str, $request->fd);
$str = json_encode($str);
$redis->set("fd", $str);
echo "目前在線訪客：";
print_r($redis->get("fd"));
}
});
$server->on('message', function (swoole_websocket_server $server, $frame) use($redis) {
echo "系統消息說：{$frame->data}\n";
$str = json_decode($redis->get("fd"), true);
foreach ($str as $key => $value) {
if($frame->fd != $value){
$server->push($value, "系統消息說:".$frame->data);
}
}
});
$server->on('close', function ($ser, $fd) use($redis) {
echo "client {$fd} closed\n";
$str = json_decode($redis->get("fd"), true);
$point = array_keys($str, $fd, true); //search key
array_splice($str, $point['0'],1); //delete array
$str = json_encode($str);
$redis->set("fd", $str);
echo "刪除后在線訪客：";
print_r($redis->get("fd"));
});
$server->start();
~~~
3.服務器安全測試開放9502端口，服務器內部開發端口或者直接關閉防火墻
4.啟動server.php
~~~
php /data/wwwroot/default/swoole_file_frontend/demo/server.php
~~~
5.前端文件準備，因為是消息推送模擬，需要一個頁面admin.html做后端消息推送頁面，另外一個頁面client.html做用戶客戶端消息接收頁面，核心內容差不多，樣式可以替換
admin.html
~~~
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>AUI</title>
<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
</head>
<body>
<header class="aui-bar aui-bar-nav aui-title-fixed" id="aui-header">
<a class="aui-btn aui-pull-left" href="index.html" tapmode >
<span class="aui-iconfont aui-icon-left"></span>
</a>
<div class="aui-title" id="aui-title">swoole websocket</div>
</header>
<section class="aui-chat main-margin-top">
<div class="aui-content aui-margin-b-15">
<ul class="aui-list aui-form-list">
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-label">
消息
</div>
<div class="aui-list-item-input">
<input type="text" name="content" placeholder="請輸入需要推送的信息">
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner aui-list-item-center aui-list-item-btn">
<div class="aui-btn aui-btn-info aui-margin-r-5" id="fun_initWebSocket">連接</div>
<div class="aui-btn aui-btn-info aui-margin-r-5" id="push_button">推送</div>
<div class="aui-btn aui-btn-danger aui-margin-l-5" id="fun_close">斷開</div>
</div>
</li>
</ul>
</div>
</section>
<section class="aui-chat main-margin-top">
<div class="aui-content aui-margin-b-15">
<ul class="aui-list aui-form-list">
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-label">
打印
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner aui-list-item-center aui-list-item-btn" >
<p id="prints"></p>
</div>
</li>
</ul>
</div>
</section>
</body>
<script>
var socket = null;
var prints = null;
var push_content = null;
window.onload = function () {
//驗證瀏覽器是否支持WebSocket協議
if (!window.WebSocket) {
alert("WebSocket not supported by this browser!");
}
var push_button = document.getElementById("push_button");
var fun_close = document.getElementById("fun_close");
var fun_initWebSocket = document.getElementById("fun_initWebSocket");
var push_content = document.getElementsByName("content");
prints = document.getElementById("prints");
push_button.onclick = function () {
if(socket != null && socket.readyState==1){
prints.innerHTML = '發送信息：'+push_content['0'].value;
socket.send(push_content['0'].value);
}else{
prints.innerHTML ='握手失敗，無法推送信息 ';
// console.log("");
}
}
fun_close.onclick = function () {
if(socket != null && socket.readyState==1){
prints.innerHTML = '關閉當前連接';
//console.log("關閉當前連接");
socket.close();
}
}
fun_initWebSocket.onclick = function () {
if(socket == null || socket.readyState!=1){
socket = new WebSocket('ws://47.93.190.214:9502'); //監聽端口
prints.innerHTML = '握手成功';
reconnect ();
}
}
};
function reconnect (){
socket.onmessage = function (event) { // **接收到服務器數據**觸發
// alert('Received data: ' + event.data); //這里應該返回發送成功的額標識
//console.log('Received data: ' + event.data);
prints.innerHTML = event.data;
};
socket.onopen = function () { //監聽是否連接服務器成功觸發
// socket.send(push_content['0'].value); //重要!!客戶端返回服務器
// console.log("握手成功");
//prints.append('握手成功 \n ');
socket.send('hello world!!!');//向php服務器發送數據
};
socket.onclose = function () { //與服務器連接斷開觸發
//console.log('Lost connection!');
prints.innerHTML = '當前連接已關閉!';
};
socket.onerror = function () { //與服務器連接出現錯誤觸發
prints.innerHTML = 'Error';
// console.log('Error!');
};
}
</script>
</html>
~~~
client.html
~~~
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>AUI</title>
<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
</head>
<body>
<header class="aui-bar aui-bar-nav aui-title-fixed" id="aui-header">
<a class="aui-btn aui-pull-left" href="index.html" tapmode >
<span class="aui-iconfont aui-icon-left"></span>
</a>
<div class="aui-title" id="aui-title">swoole websocket</div>
</header>
<section class="aui-content">
<ul class="aui-list">
<li class="aui-list-header">
消息通知：
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<p id="push_content"></p>
</div>
</li>
</ul>
</section>
</body>
<script>
var socket = new WebSocket('ws://47.93.190.214:9502'); //監聽端口
socket.onopen = function () { //監聽是否連接服務器成功觸發
console.log('Connected!');
//socket.send("這條信息會返回給服務器看"); //重要!!客戶端返回服務器
};
socket.onmessage = function (event) { // **接收到服務器數據**觸發
console.log(event.data);
// alert('Received data: ' + event.data);
document.getElementById("push_content").innerHTML = event.data;
// socket.close();
};
socket.onclose = function () { //與服務器連接斷開觸發
console.log('Lost connection!');
};
socket.onerror = function () { //與服務器連接出現錯誤觸發
console.log('Error!');
};
// socket.send('hello, world!');
</script>
</html>
~~~
運行效果圖1.服務器控制臺
運行效果圖2.360急速瀏覽器+火狐瀏覽器
