#### 前提： 1. linux環境下PHP有可用的Swoole擴展。 2. 9501埠可訪問。 #### 後端 ```php $value) { if (null $value) { $arr[$key] = ''; } if (is_array($value)) { $arr[$key] = ...
前提：
- linux環境下PHP有可用的Swoole擴展。
- 9501埠可訪問。
後端
<?php
class Helper {
/**
* @function 將數組中的null值轉化為空字元串
* @param $arr array 要轉化的數組
* @return array
* @other void
*/
public static function nullToEmptyString($arr) {
if (! $arr) {
return $arr;
}
foreach ($arr as $key => $value) {
if (null === $value) {
$arr[$key] = '';
}
if (is_array($value)) {
$arr[$key] = static::nullToEmptyString($value);
}
}
return $arr;
}
/**
* @function 統一的RestFul風格的Api格式
* @param $code int 狀態碼
* @param $msg string 顯示的信息
* @param $data mixed 返回的數據
* @return string
* @other void
*/
public static function jsonReturn($code = 0, $msg = '', $data = []) {
header('Content-type:text/json;Charset=UTF-8');
return json_encode([
'code' => $code,
'msg' => $msg,
'data' => $data === null ? [] : static::nullToEmptyString($data),
], JSON_UNESCAPED_UNICODE);
}
/**@function 配置人數
* @param $num
* @return bool
*/
public static function setPersonNumber($num) {
return file_put_contents(__DIR__ . '/personNum.txt', $num);
}
/**
* @function 獲取人數
* @return int
*/
public static function getPersonNumber() {
$file = __DIR__ . '/personNum.txt';
if(! file_exists($file)) {
return 0;
}
return file_get_contents($file);
}
/**
* @function 發消息對外廣播
* @param $ws object \Swoole\WebSocket\Server
* @param $msg string 廣播數據
* @return null
*/
public static function broadcast(Swoole\WebSocket\Server $ws, $msg) {
$fd = static::getPersonNumber();
if($fd > 0) {
for($i = 1; $i <= $fd; $i++) {
$ws->push($i, $msg);
}
}
return null;
}
}
//創建WebSocket Server對象，監聽0.0.0.0:9501埠。
$ws = new Swoole\WebSocket\Server('0.0.0.0', 9501);
//監聽WebSocket連接打開事件。
$ws->on('Open', function ($ws, $request) {
$ws->nickname = '游客'. $request->fd;
Helper::setPersonNumber($request->fd);
Helper::broadcast($ws, Helper::jsonReturn(0, '', ['type' => 'enter', 'user' => $ws->nickname, 'content' => '']));
return null;
});
//監聽WebSocket消息事件。
$ws->on('Message', function ($ws, $frame) {
Helper::broadcast($ws, Helper::jsonReturn(0, '', ['type' => 'say', 'user' => $ws->nickname, 'content' => htmlspecialchars($frame->data)]));
return null;
});
//監聽WebSocket連接關閉事件。
$ws->on('Close', function ($ws, $fd) {
Helper::setPersonNumber(-- $fd);
Helper::broadcast($ws, Helper::jsonReturn(0, '', ['type' => 'leave', 'user' => $ws->nickname, 'content' => '']));
return null;
});
$ws->start();
前端
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>簡易聊天室</title>
<style>
body * {font-size: 20px;width: 400px;height: 40px;}
</style>
</head>
<body>
<input type="text" id="text">
<input type="button" id="send" value="發送">
<div id="box"></div>
</body>
<script>
//初始化
var websocket = new WebSocket('ws://192.168.3.180:9501/swoole.php');
//打開事件
websocket.onopen = function (evt) {
document.getElementById('send').onclick = function() {
var msg = document.getElementById('text').value;
if(msg) {
websocket.send(msg);
}
}
};
//消息事件
websocket.onmessage = function (evt) {
var data = JSON.parse(evt.data);
var data = data.data;
if(data.type == 'enter') {
var e = '<p style="color:green">' + data.user + '進入聊天室</p>';
} else if(data.type == 'leave') {
var e = '<p style="color:red">' + data.user + '離開聊天室</p>';
} else if (data.type == 'say') {
var e = '<p style="color:black">' + data.user + '說：' + data.content + '</p>';
}
var element = document.getElementById('box').innerHTML += e;
};
//關閉事件
websocket.onclose = function (evt) {
console.log("WebSocket 已斷開連接");
};
//錯誤事件
websocket.onerror = function (evt, e) {
console.log("WebSocket 錯誤：" + evt.data);
};
</script>
</html>
