laravel--IM即时通讯--客服与客户一对一通讯
程序员文章站
2022-05-16 21:45:27
...
学习总结
1.启动websocket通讯需要在命令行输入php ws_test.php start
启动通讯
2.ws_test.php
中每个连接都分配一个id,通过连接发送的字符串标识判断是客户端还是服务端发送的请求。
1.workerman中的websocket通讯ws_test.php
<?php
use Workerman\Worker;
require_once __DIR__ . '/../Workerman/Autoloader.php';
/// 注意:这里与上个例子不同,使用的是websocket协议
$ws_worker = new Worker("websocket://0.0.0.0:2001");
// 启动4个进程对外提供服务
$ws_worker->count = 4;
//连接信息定义为全局变量
$m_list = []; //客户连接信息
$a_list = [];//客服人员连接信息
// 当收到客户端发来的数据后返回hello $data给客户端
$ws_worker->onMessage = function($connection, $data)
{
global $m_list;
global $a_list;
$data = json_decode($data,true);
print_r($data);
//登录
if($data['type']==='login'){
//无论是客户还是客服人员在登录的时候,都需要把连接注册在大数组中
$connection->from_id = $connection->id;
//如果是客户登录,则把连接数据放在$m_list数组中
if($data['group']==='member'){
$m_list[$connection->id] = $connection;
$data['from_id'] = $connection->from_id;
if($a_list):
$index = array_rand($a_list);
$a_list[$index]->to_id = $m_list[$connection->id]->from_id;
$m_list[$connection->id]->to_id = $a_list[$index]->from_id;
$res['code'] = 0;
$res['msg'] = '连接成功';
$res['type'] = 'login';
$res['id'] = $m_list[$connection->id]->from_id;
$a_list[$index]->send(json_encode($res));
$res['id'] = $a_list[$index]->from_id;
$m_list[$connection->id]->send(json_encode($res));
else:
$connection->send(json_encode(['code'=>1,'msg'=>'没有客服在线,请稍候']));
endif;
}
//如果是客服登录,就把客服登录链接放在$a_list数组中
if($data['group']==='admin'){
$a_list[$connection->id] = $connection;
}
}
//发送信息
if($data['type']==='msg')
{
$res =['code'=>0,'msg'=>$data['msg'],'type'=>'msg','id'=>$connection->id];
if($data['group']==='member'){
$a_list[$data['to_id']]->send(json_encode($res));
}
if($data['group']==='admin'){
$m_list[$data['to_id']]->send(json_encode($res));
}
}
//$connection->send(json_encode($data));
};
// 运行worker
Worker::runAll();
?>
2.客户端index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
<script src="/static/plugins/layui/layui.js"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度商桥IM通讯</title>
<style>
.msg{
margin:10px 10px;
height: 95vh;
}
.msg>.list{
padding: 10px;
border: 1px solid #E6E6E6;
border-radius: 5px;
height: 70%;
margin-bottom: 10px;
}
.msg>.item>{
height: 30%;
}
</style>
</head>
<body>
<div class="msg">
<div class="list">
</div>
<div class="item">
<textarea class="layui-textarea" name="msg"></textarea>
</div>
</div>
</body>
</html>
<script>
layui.use(['layer'],function(){
layer = layui.layer;
$ = layui.jquery;
// 假设服务端ip为127.0.0.1
ws = new WebSocket("ws://127.0.0.1:2001");
data = {};
data.type = 'login';//当前是登录操作
data.group='member';//角色是客户
ws.onopen = function() {
ws.send(JSON.stringify(data));
};
ws.onmessage = function(e) {
res = JSON.parse(e.data);
console.log(res);
if(res.code>0)
{
alert(res.msg);
}
else
{
if(res.type=='login')
{
html = '<div class="item">客服'+res.id+'为您服务...</div>';
}
else
{
html = '<div class="item">客服'+res.id+': '+res.msg+'</div>';
}
to_id = res.id;//记录是哪个客服为我服务
$('.list').append(html);
}
};
});
// //客户向服务器的客服人员发送消息
function send()
{
data['type'] = 'msg';
data['group'] = 'member';
data['msg'] =$('textarea[name="msg"]').val();
data['to_id'] =to_id;
ws.send(JSON.stringify(data));
html = '<div class="item">我:'+$('textarea[name="msg"]').val()+'</div>';
$('.list').append(html);
$('textarea[name="msg"]').val('');
}
</script>
3.服务器端index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
<script src="/static/plugins/layui/layui.js"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>客户服务</title>
<style>
.main{
width: 600px;
height: 450px;
margin: 20px;
box-sizing: border-box;
border: 1px solid #e1e1e1;
display: flex;
flex-flow: row nowrap;
}
.main>.member{
width: 30%;
padding: 10px 10px;
border-right: 1px solid #e1e1e1;
}
.main>.member>div{
background-color: #fff;
}
.main>.member>div:hover{
background-color: #009688;
cursor: pointer;
}
.main>.admin{
width: 70%;
display: flex;
flex-flow: column nowrap;
}
.main>.admin>.msg_list{
padding: 10px 10px;
height: 65%;
border-bottom: 1px solid #e1e1e1;
}
.main>.admin>.msg_input{
padding: 10px 10px;
height: 35%;
overflow: auto;
}
.main>.admin>.btn_send>button{
margin-left: 84%;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="main">
<div class="member">
</div>
<div class="admin">
<div class="msg_list"></div>
<div class="msg_input" contenteditable="true">
</div>
<div class="btn_send">
<button class="layui-btn layui-btn-normal" type="button" onclick="send()">发送</button>
</div>
</div>
</div>
</body>
</html>
<script>
layui.use(['layer'],function(){
layer = layui.layer;
$ = layui.jquery;
// 假设服务端ip为127.0.0.1
ws = new WebSocket("ws://127.0.0.1:2001");
data = {};
data.type = 'login';//当前是登录操作
data.group='admin';//角色是客服
ws.onopen = function() {
ws.send(JSON.stringify(data));
};
ws.onmessage = function(e) {
res = JSON.parse(e.data);
console.log(res);
if(res.code>0)
{
alert(res.msg);
}
else
{
to_id = res.id;
if(res.type == 'login'){
html = '<div onclick="back('+res.id+')">客户'+res.id+'</div>';
$('.member').append(html);
}
else{
html = '<div>客户'+res.id+':'+res.msg+'</div>';
$('.msg_list').append(html);
}
}
};
});
function back(id)
{
to_id = id;
}
// //客服向客户发送消息
function send()
{
data['type'] = 'msg';
data['group'] = 'admin';
data['msg'] =$('.msg_input').text();
data['to_id'] =to_id;
ws.send(JSON.stringify(data));
html = '<div>我:@客户'+to_id+'@'+$('.msg_input').text()+'</div>';
$('.msg_list').append(html);
$('.msg_input').text('');
}
</script>