效果图：
服务器代码（服务器新建websocket.php文件）：
<?php
//创建一个websocket服务 0.0.0.0:6069
$ws = new Swoole\WebSocket\Server('0.0.0.0','6069');
//监听浏览器客户端有没有客户连接上我们的服务
//$request->fd客户端的唯一标识
//参数1：推送给谁 参数2：推送内容
$ws->on('Open', function ($ws, $request) {
$content = '监听到客户端'.$request->fd."连接了服务\n";
echo $content;//服务器上能看见的信息
$ws->push($request->fd, json_encode(['person'=>'官方','content'=>'欢迎来到聊天室~'],256));//推送(到浏览器)
});
//监听浏览器客户端有没有给我们的服务发送内容
//$frame->data 用户发送的内容
$ws->on('Message', function ($ws, $frame) {
if($frame->data=='你好'){
$msg = '你好';
}else if($frame->data == '在吗'){
$msg = '我在';
}else{
$msg = '请联系人工客服';
}
$content = json_encode(['person'=>'客服','content'=>$msg],256);
$ws->push($frame->fd, $content);//将信息推送到浏览器
});
//监听WebSocket连接关闭事件
$ws->on('Close', function ($ws, $fd) {
echo '监听到客户端'.$fd."断开连接\n";
});
//启动服务
$ws->start();
要记得运行：
客户端代码（这里使用vue完成的）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="root">
<div>
<p v-for="(item,index) in arr">
{{item.person}}：{{item.content}}
</p>
</div>
<div>
<input type="text" placeholder="请输入内容..." v-model="content">
<button type="button" @click="sendMessage()">发送</button>
</div>
</div>
</body>
</html>
<script>
//在Vue中，获取文本框的内容使用双向绑定来实现 v-model
new Vue({
el:'.root',//绑定的元素
data:{
//页面中的自定义数据(绑定以后data中的数据只能在绑定的标签中使用)
wsObj:'',//socket对象
content:'',//用户输入的内容
arr:[]//消息列表
},
methods:{
//自定义方法
sendMessage(){
this.arr.push({person:'我',content:this.content})
this.wsObj.send(this.content)//向服务器发内容
}
},
created() {
//页面加载完成之后自动运行
//连接websocket this表示当前Vue实例
this.wsObj = new WebSocket('ws://39.99.240.121:6069');
//监听是否连接上服务
this.wsObj.onopen = function(){
console.log('连接已经建立');
}
var obj = this;
//监听的是客户端接收服务端数据时触发
this.wsObj.onmessage = function(e){
var json = JSON.parse(e.data)
obj.arr.push(json)
}
}
})
</script>