安裝好swoole後開始搭建
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聊天室</title>
</head>
<style>
#set_name{
margin: auto;
text-align: center;
}
</style>
<body>
<h3 style="text-align: center">亮亮的聊天室</h3>
<div id="set_name">
姓名:<input name="name" id="name"><input type="button" onclick="set_name();" value="進入羣聊">
</div>
<div id="chat" style="width: 600px; border: red 1px solid;margin: auto;display: none">
<div id="sayContent" style="height: 300px;border-bottom: silver 1px dashed;">
</div>
<div style="height: 75px;margin-top: 10px">
<textarea id="content" style="height: 50px;width: 480px;background-color: #00a0e9;float: left;"></textarea>
<button id="submit" style="float: right;height: 55px;width:50px;margin-right:45px;display: block;" onclick="send_msg();">發送</button>
</div>
</div>
<script>
var name = ws = '' ;
//執行websock
function chat() {
var wsserver = 'ws://47.94.11.195:443';
//調用WebSocket對象建立連接
//ws wss: // ip:port(字符串)
ws = new WebSocket(wsserver);
//獲取聊天內容展示窗口
var sayContent = document.getElementById('sayContent');
//onopen監聽連接打開
ws.onopen = function (v) {
var user = new Object();
user.name = name;
user.type = 1;//對用戶設置姓名
var json = JSON.stringify(user);
ws.send(json);//發送數據
}
//onmessage監聽服務器數據推送
ws.onmessage = function (v) {
var html = sayContent.innerHTML;
sayContent.innerHTML = html + "<br>"+v.data;
}
//監聽連接關閉
ws.onclose = function (v) {
var html = sayContent.innerHTML;
sayContent.innerHTML = html + "<br>聊天室已關閉!";
}
}
//設置用戶名
function set_name() {
name = document.getElementById('name').value;
if(name == ''){
alert('請輸入用戶名!');
return false;
}
document.getElementById('set_name').style.display='none';
document.getElementById('chat').style.display='block';
chat();
}
function send_msg() {
var content = document.getElementById('content');
if(content.value == ''){
alert('請輸入聊天內容!');
return false;
}
var msg = new Object();
msg.content = content.value;
msg.type = 2;
var str = JSON.stringify(msg);
ws.send(str);
}
</script>
</body>
</html>後臺
$server = new swoole_websocket_server("0.0.0.0", 443);
$server->users = [];
$server->on('open', function (swoole_websocket_server $server, $request) {
$server->users[$request->fd]['id'] = $request->fd;
});
$server->on('message', function (swoole_websocket_server $server, $frame) {
$data = json_decode($frame->data,true);
if($data['type'] == 1){
$server->users[$frame->fd]['name']=$data['name'];
$server->push($frame->fd,'歡迎您('.$data['name'].')進入聊天室!');
}else{
foreach($server->users as $v){
$server->push($v['id'], $server->users[$frame->fd]['name'].'說:'.$data['content']);
}
}
});
$server->on('close', function ($ser, $fd) {
file_put_contents('qq.txt',$server->users[$frame->fd],FILE_APPEND);
unset($server->users[$frame->fd]);
});
$server->start();<?php
# 定義 clientFds 數組 保存所有 websocket 連接
$clientFds = [];
# 創建 websocket 服務
$server = new swoole_websocket_server("0.0.0.0", 8080);
# 握手成功 觸發回調函數
$server->on('open', function (swoole_websocket_server $server, $request) use (&$clientFds) {
# echo "server: handshake success with fd{$request->fd}\n";
# 將所有客戶端連接標識，握手成功後保存到數組中
$clientFds[] = $request->fd;
});
# 收到消息 觸發回調函數
$server->on('message', function (swoole_websocket_server $server, $frame) use (&$clientFds) {
# echo "receive from {$frame->fd}:{$frame->data},opcode:{$frame->opcode},fin:{$frame->finish}\n";
# $server->push($frame->fd, "this is server");
# 當有用戶發送信息，發送廣播通知所有用戶
foreach ($clientFds as $fd) {
$server->push($fd, $frame->data);
}
});
# 關閉連接 觸發回調函數
$server->on('close', function ($ser, $fd) use (&$clientFds) {
# echo "client {$fd} closed\n";
# 關閉會話 銷燬標識 fd
# 根據 value 去數組中找對應的 key
$res = array_search($fd, $clientFds, true);
unset($clientFds[$res]);
});
# 啓動 websocket 服務
$server->start();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket 聊天室</title>
</head>
<body>
<div id="main" style="width:600px;height: 200px; overflow: auto;border: solid 2px black;">
</div>
<textarea id="textarea"></textarea>
<br/>
<input type="button" value="發送數據" onclick="send()">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var name =prompt("請輸入您的暱稱","匿名者"); //彈出 input 框
// 打開一個 web socket
var ws = new WebSocket("ws://ip:8080");
ws.onopen = function() {
console.log("連接成功");
};
//收到消息 觸發回調
ws.onmessage = function (evt) {
var data = evt.data;
console.log("收到 socket 服務消息，內容：" + data);
$('#main').append("<p>" + data + "</p>");
};
function send() {
var data = document.getElementById('textarea').value;
ws.send(name+ ":"+ data);
}
ws.onclose = function() {
// 關閉 websocket
console.log("連接已關閉...");
};
</script>
</body>
</html>