服务端:server.php
<?php
$server = new swoole_websocket_server("0.0.0.0", 9502);
$server->set(array(
'reactor_num' => 2,
'worker_num' => 4,
'backlog' => 128,
'max_request' => 100,
'max_conn ' => 10000,
'daemonize ' => 1,//守护进程话
'open_cpu_affinity ' => 1,
'heartbeat_check_interval ' => 30
));
$server->on('open', function (swoole_websocket_server $server, $request) {
$server->push($request->fd, '欢迎来到聊天室');
});
$server->on('message', function (swoole_websocket_server $server, $frame) {
var_dump($frame->data);
//拆分数据
$data = explode('|',$frame->data);
foreach ($server->connections as $fd){
$server->push($fd, '用户'.$data[0].'说:'.$data[1]);
}
});
$server->on('close', function($server, $fd) {
echo "connection close: {$fd}\n";
});
$server->start();
客户端:client.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
#message{ border: 1px solid #ccc; width: 100%; height: 200px;overflow: auto;}
#conent{ width: 100%; height: 50px; border: 1px solid #ccc;}
.main{margin-top: 10px;}
#sendMessage{ width: 100%; border: 1px solid #ccc; background: blue; color: #fff; padding: 10px; font-weight: bold; font-size: 16px;}
</style>
<div>
<h1>聊天室</h1>
<div id="message">
</div>
<div class="main">
<textarea id="conent"></textarea>
<button id="sendMessage" onclick="sendMessage()">发送消息</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var username = 'user_'+Math.random();
var wsServer = 'ws://192.168.1.189:9502';
var websocket = new WebSocket(wsServer);
websocket.onopen = function (evt) {
console.log("Connected to WebSocket server.");
};
websocket.onclose = function (evt) {
console.log("Disconnected");
};
function sendMessage(){
var content = document.getElementById('conent').value;
if(content == ''){
alert('请输入聊天内容');
return;
}
//|作为数据包分割线
var text = username+'|'+content;
websocket.send(text);
}
//监听服务端回推的消息
websocket.onmessage = function (evt) {
var message = evt.data;
var html = '<p>'+message+'</p>';
$("#message").append(html);
//成功将发送置空
document.getElementById("conent").value = "";
};
websocket.onerror = function (evt, e) {
console.log('Error occured: ' + evt.data);
};
</script>
</body>
</html>
在终端直接执行
php server.php
在浏览器打开上面的html,多打开几个页面,可以看到聊天效果。
这样一个简单的聊天室就实现了