1.放行防火墙及宝塔安全端口号
2.配置解析过的域名
3.讲文件配置到根目录下
4.创建websocket.php文件，访问聊天页面web.html
?websocket.php
<?php
//创建WebSocket Server对象，监听0.0.0.0:9502端口
$ws = new Swoole\WebSocket\Server('0.0.0.0', 9502);
//监听WebSocket连接打开事件
$ws->on('Open', function ($ws, $request) {
//进行数据组装
$arr=[
'type'=>'open',
//唯一标识
'fd'=>$request->fd
];
//将组装好的数据编码，推给客户端
$ws->push($request->fd, json_encode($arr));
});
//监听WebSocket消息事件
$ws->on('Message', function ($ws, $frame) {
//这里的echo就是在终端上显示的那些服务端给客户端的消息
echo "Message: {$frame->data}\n";
//解码
$arr=json_decode($frame->data,true);
//判断
switch ($arr['type']) {
//登录
case 'login':
$res=[
'type'=>'login',
'fd'=>$frame->fd,
'content'=>'欢迎'.$arr['nickname'].'进入聊天室'
];
foreach ($ws->connections as $fd){
$ws->push($fd,json_encode($res));
}
break;
//聊天
case 'chat':
$res=[
'type'=>'chat',
'nickname'=>$arr['nickname'],
'content'=>$arr['content'],
'fd'=>$frame->fd
];
foreach ($ws->connections as $fd){
$ws->push($fd,json_encode($res));
}
break;
}
// $ws->push($frame->fd, "server: {$frame->data}");
});
//监听WebSocket连接关闭事件
$ws->on('Close', function ($ws, $fd) {
echo "client-{$fd} is closed\n";
});
// 启动服务
$ws->start();静态页面：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>在线聊天室</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.min.css">
<link rel="stylesheet" href="css/style.css">
<!--引入jQuery-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<!--登录页-->
<div class="login" style="width:100%;height:600px;text-align:center;line-height:600px;">
<input type="text" class="nickname" id="nickname" placeholder="请输入昵称">
<input type="button" value="进入聊天室" class="layui-btn" id="login">
</div>
<div class="wrapper" style="display: none">
<div class="container">
<div class="left">
<div class="top"> 在线人员 </div>
<ul class="people">
<li class="person" data-chat="person1">
<img src="img/thomas.jpg" alt="" />
<span class="name">张三</span>
<span class="time">10:09</span>
</li>
<li class="person" data-chat="person2">
<img src="img/dog.png" alt="" />
<span class="name">李四</span>
<span class="time">10:44</span>
</li>
<li class="person" data-chat="person3">
<img src="img/louis-ck.jpeg" alt="" />
<span class="name">王五</span>
<span class="time">10:50</span>
</li>
</ul>
</div>
<div class="right">
<div class="top"><span><span class="name">聊天室</span></span></div>
<div class="chat" data-chat="person2">
<!--<div class="bubble you">-->
<!-- 帅哥好! -->
<!--</div>-->
<!--<div class="bubble me">-->
<!-- 在的，美女！-->
<!--</div>-->
<!--<div class="bubble me">-->
<!-- 找我看电影吗？-->
<!--</div>-->
<!--<div class="bubble you">-->
<!-- 是的，晚上有空不？-->
<!--</div>-->
<!--<div class="bubble me">-->
<!-- 有空，你请一定有空！-->
<!--</div>-->
<!--<div class="bubble me">-->
<!-- 晚上，旗杆见！-->
<!--</div>-->
</div>
<!--聊天消息-->
<div class="write">
<input type="text" id="chat" />
<a href="javascript:;" class="write-link send" id="send"></a>
</div>
</div>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
<script>
// 定义客户端连接服务
var wsServer = 'ws://1.117.158.15:9502';
var websocket = new WebSocket(wsServer);
// 连接触发
websocket.onopen = function (evt) {
console.log("Connected to WebSocket server.");
};
// 接收消息
websocket.onmessage = function (evt) {
console.log("Received Message: " + evt.data);
//解析json字符串
var data=JSON.parse(evt.data);
console.log(evt.data);
switch(data.type){
case 'open':
fd=data.fd;
console.log(fd)
break;
case 'login':
console.log(data)
//根据唯一标识进行判断登录是不是自己发的
if(data.fd!=fd){
$('.chat').append(`<div style="color: #999999;width: 400px;height: 25px;border-radius: 10px;line-height: 25px;background-color: aliceblue;margin: 0 auto;text-align: center">
<p>${data.content}</p>
</div>`)
}
break;
case 'chat':
console.log(data)
//根据唯一标识进行判断消息是自己发的还是好友发的
//如果不是自己发的，则放置聊天页面的左边，即you
if(data.fd!=fd){
$('.chat').append(`<div class="bubble you">
${data.content}
</div>`)
}else{
//如果是自己发的，则放置聊天页面的右边，即me
$('.chat').append(`<div class="bubble me">
${data.content}
</div>`)
}
break;
}
};
// 关闭时
websocket.onclose = function (evt) {
console.log("Disconnected");
};
websocket.onerror = function (evt, e) {
console.log('Error occured: ' + evt.data);
};
//点击进入会议室，触发此登录事件
$('#login').click(function(){
//获取输入的昵称
nickname = $('.nickname').val();
//没输入昵称则弹框提示
if (nickname == '') {
alert('请输入昵称');
return;
}
//向websocket发送消息，此先调用的下方send函数
send('login', nickname);
// 隐藏登录框
$(".login").css("display", "none");
// 展示聊天框
$(".wrapper").css("display", "");
})
//点击发送消息，触发此发送事件
$('#send').click(function(){
content=$('#chat').val();
send('chat', content);
$('#chat').val('')
})
//此函数解决了代码冗余，提高了可用度
//因为多处用到此代码，登录和发送消息
function send(type,msg){
//用来数据组装
var obj={}
switch(type){
case 'login':
obj.type=type;
obj.nickname=msg;
console.log(JSON.stringify(obj))
//向websocket发送消息，并将消息转化成json字符串
websocket.send(JSON.stringify(obj))
break;
case 'chat':
obj.type=type;
obj.content=msg;
obj.nickname=nickname;
console.log(JSON.stringify(obj))
websocket.send(JSON.stringify(obj))
break;
}
}
</script>