swoole中websoket创建在线聊天室（php）
swoole中websoket创建在线聊天室（php）
swoole现仅支持Linix，macos
创建websocket服务器
首先现在服务器创建一个websocket服务器
<?php
//创建websocket服务器
$server = new Swoole\WebSocket\Server("0.0.0.0", 6060);
// 当WebSocket客户端与服务器建立连接并完成握手后会回调此函数
$server->on('open', function (Swoole\WebSocket\Server $server, Swoole\Http\Request $request) {
});
// 服务器主动向客户端发送数据
$server->on('message', function (Swoole\WebSocket\Server $server, swoole_websocket_frame $frame) {
$data = $frame->data;
$ret['data'] = $data;
//广播群发
foreach ($server->connections as $client) {
//判断客户端是否自己
if ($frame->fd == $client) {
$ret['style'] = 'bubble me';
} else {
$ret['style'] = 'bubble you';
}
@$server->push($client, json_encode($ret, 256));
}
});
// 客户端关闭连接时触发此回调函数
$server->on('close', function ($ser, $fd) {
});
// 启动服务
$server->start();
html页面
创建一个简单可用的swoole聊天室
<!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">
</head>
<body>
<div class="wrapper">
<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">
<template v-for="item in msglist">
<div :class="item.style">
{{ item.data }}
</div>
</template>
</div>
<div class="write">
<input type="text" v-model="msg" placeholder="输入内容" @keydown.enter="send"/>
<!-- vue 修饰符 once prevent stop enter shift alt -->
<a @click.prevent="send" class="write-link send"></a>
</div>
</div>
</div>
</div>
<script src="js/index.js"></script>
<script src="js/vue.js"></script>
<script>
// 客户端连接websocket服务器端
const ws = new WebSocket('ws://175.24.114.149:6060');
// 事件监听
// 建议时事件
ws.onopen = () => {
console.log('连接建立')
};
// 接受消息事件
ws.onmessage = ({data}) => {
// 返回的是一个json字符串，json字符串转为对象 es6提供一个方法
let json = JSON.parse(data);
// 使用vue提供变异方法
vm.msglist.push(json);
};
// 实例化 主组件中，data是用的对象非函数 子组件data用的是函数返回一个对象
const vm = new Vue({
el: '.wrapper',
data: {
msg: '',
// 消息列表
msglist: []
},
methods: {
// 发送消息事件
send() {
ws.send(this.msg);
this.msg = '';
}
}
});
</script>
</body>
</html>
