- 启动容器
docker run --name 'swooleChatDemo' -p 9501:9501 -p 81:80 -it -d kong36088/nginx-php7-swoole /bin/bash - 进入容器
docker exec -it [容器名/ID] /bin/bash - 修改nginx配置
vim /etc/nginx/sites-enabled/default
将配置改为下图这样的
将root /var/www/html/ChatRoom
改为 root /var/www/html
- 把ChatRoom删除
修改配置
然后重启nginx服务器
service nginx restart
image.png
- 进入项目根目录将文件放入
cd /var/www/html/
mkdir swoole
vim index.php
代码如下
<?php
//服务器代码
//创建websocket 服务器
$ws = new Swoole\WebSocket\Server("0.0.0.0",9501);
// open
$ws->on('open',function(Swoole\WebSocket\Server $ws,$request){
echo "新用户 $request->fd 加入。\n";
$GLOBALS['fd'][$request->fd]['id'] = $request->fd;//设置用户id
$GLOBALS['fd'][$request->fd]['name'] = '匿名用户';//设置用户名
});
//message
$ws->on('message',function(Swoole\WebSocket\Server $ws,$request){
$msg = $GLOBALS['fd'][$request->fd]['name'].":".$request->data."\n";
if(strstr($request->data,"#name#")){//用户设置昵称
$GLOBALS['fd'][$request->fd]['name'] = str_replace("#name#",'',$request->data);
}else{//进行用户信息发送
//发送每一个客户端
foreach($GLOBALS['fd'] as $i){
$ws->push($i['id'],$msg);
}
}
});
//close
$ws->on('close',function($ws,$request){
echo "客户端-{$request} 断开连接\n";
unset($GLOBALS['fd'][$request]);//清楚连接仓库
});
$ws->start();
?>
vim index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title id="myTitle">IM</title>
</head>
<style>
body {
background-color: #60800a;
}
#myname {
width:120px;
height:30px;
}
.setUserName {
width:80px;
height:30px;
}
#msg{
margin:80px 300px;
width:450px;
height:200px;
background-color:white;
}
.show_send{
margin:0px 300px;
}
#text{
width:200px;
height:50px;
}
.send_button{
width:80px;
height:30px;
}
</style>
<body>
<h1>swoole-websocket 及时通讯demo</h1>
<!--发送信息-->
<div id="send_msg" class="main box-shadow" style="display:none;">
<div id="msg"></div>
<div class="show_send">
<input type="text" id="text"><input class="send_button" value="发送数据" type="submit" onclick="send_message()">
</div>
</div>
<!--设置昵称-->
<div id="setName" class="box-shadow" style="display:block;margin:200px 150px 200px 550px;">
<input type="text" id="myname"/>
<input type="submit" class="setUserName" value="设置昵称" onclick="send_name()">
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
var msg = document.getElementById("msg");
var wsServer = 'ws://39.106.22.201:9501';
var websocket = new WebSocket(wsServer);
websocket.onopen = function(evt){
// msg.innerHTML = websocket.readyState;
/*
connecting 0
open 1
closing 2
closed 3
*/
console.log('链接成功');
}
websocket.onmessage = function(evt){
msg.innerHTML += evt.data+'<br />';
console.log('从服务器获取到的数据:'+ evt.data);
}
websocket.onclose = function(evt){
console.log("服务器拒绝");
}
websocket.onerror = function(evt,e){
console.log('错误:'+evt.data);
}
function send_message(){
var text = document.getElementById('text').value;
document.getElementById('text').value = '';
websocket.send(text);
}
function send_name(){
var text = document.getElementById('myname').value;
websocket.send("#name#"+text);
var myTitle = document.getElementById("myTitle");
myTitle.innerHTML = "IM" +text;
alert("设置成功");
var setName = document.getElementById("setName");
setName.style.display = "none";
var send_msg = document.getElementById("send_msg");
send_msg.style.display = "block";
}
</script>
</html>
index.html 和index.php的配置自己改成自己的
html
image.png
然后给权限
cd /var/www
chmod -R 777 html
运行服务端
cd /var/www/html
php index.php
访问客户端
image.png
the end
