1、tp6安装workerman扩展
composer require topthink/think-worker
2、配置
在config/worker_server.php下面配置worker_class
3、app目录下创建http应用并创建worker文件
worker这里有文件源码
<?php declare (strict_types = 1); namespace app\http; use think\facade\Db; use think\worker\Server; use Workerman\Lib\Timer; // define('HEARTBEAT_TIME', 30);// 心跳间隔 class Worker extends Server {
protected $socket = 'websocket://0.0.0.0:2345'; protected static $heartbeat_time = 50; public function onWorkerStart($worker) {
Timer::add(10, function()use($worker){
$time_now = time(); ##这里统计线下人员id $offline_user = []; foreach($worker->connections as $connection) {
// 有可能该connection还没收到消息,那lastMessageTime设置为当前时间 if (empty($connection->lastMessageTim)) {
$connection->lastMessageTime = $time_now;
continue;
}
// 上次通讯时间间隔大于心跳间隔,则认为客户端已经下线,关闭连接
// if ($time_now - $connection->lastMessageTime > HEARTBEAT_TIME) {
if ($time_now - $connection->lastMessageTime > self::$heartbeat_time) {
#这里统计下线人员的id
$offline_user[] = $connection->uid;
#关闭连接
$connection->close();
}
#这里是一个用户下线后通知其他用户
if (count($offline_user) > 0){
$msg = ['type'=>'message','uid'=>$connection->uid,"message"=>"用户【".implode(',',$offline_user)."】下线了"];
$connection->send(json_encode($msg));
}
}
});
}
public function onMessage($connection,$data)
{
#最后接收消息时间
$connection->lastMessageTime = time();
$msg_data = json_decode($data,true);
if (!$msg_data){
return;
}
#绑定用户ID
if ($msg_data['type'] == 'bind' && !isset($connection->uid)){
$connection->uid = $msg_data['uid'];
$this->worker->uidConnections[$connection->uid] = $connection;
}
// Db::name('online_customer_service')->insert();
#单人发消息
if ($msg_data['type'] == 'text' && $msg_data['mode'] == 'single'){
if (isset($this->worker->uidConnections[$msg_data['to_id']])){
$conn = $this->worker->uidConnections[$msg_data['to_id']];
$conn->send($data);
}
}
#群聊
if ($msg_data['type'] == 'text' && $msg_data['mode'] == 'group'){
#实际项目通过群号查询群里有哪些用户
$group_user = [10009,10010,10011,10012,10013,10014,10015,10016,10017];
foreach ($group_user as $key => $val){
if (isset($this->worker->uidConnections[$val])){
$conn = $this->worker->uidConnections[$val];
$conn->send($data);
}
}
}
// #向所有用户发送消息
// foreach ($this->worker->connections as $key => $con){
// $con->send($data);
// }
// $connection->send(json_encode($data));
// $connection->send($data);
}
}
4、创建chat控制器
源码在这里
<?php
/** * User BaiXiantao * Date 2022/7/4 * Time 10:34 */
namespace app\http\controller;
use think\facade\View;
class Chat
{
public function index()
{
#聊天首页
$from_id = input('from_id',10001);
$to_id = 1;
View::assign('from_id',$from_id);
View::assign('to_id',$to_id);
return View::fetch();
}
}
5、在此创建index.html文件
源码在这里
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title></title> <link rel="stylesheet" type="text/css" href="/static/httpchat/font_Icon/iconfont.css"> <script src="/static/admin/jquery/jquery-3.6.0.min.js"></script> <style> .userlist li{ background: rgb(0 0 0 / 5%); text-align: left; padding: 5px; height: 49px; /*line-height: 30px;*/ font-size: 16px; border-bottom: 1px solid rgb(0 0 0 / 5%); } .userlist li img { width: 40px; height: 40px; padding-right: 5px; } .message-num{ right: 2px; } .ChatInfoName{ height: 50px; border-bottom: 1px solid #D9D9D9; line-height: 50px; font-size: 16px; padding: 0 10px; } .chatBox-content{ height: 498px !important; width: 100%; } .chatBox-content-demo{ width: 100%; height: 370px !important; overflow-y: scroll; } .div-textarea{ width: 490px !important; /*min-height: 20px;*/ height: 100px; _height: 120px; padding: 3px; outline: 0; background: #fff; font-size: 14px; line-height: 20px; word-wrap: break-word; overflow-x: hidden; overflow-y: auto; user-modify: read-write-plaintext-only; /*纯文本*/ -webkit-user-modify: read-write-plaintext-only; -moz-user-modify: read-write-plaintext-only; } .div-textarea:focus{ box-shadow: 0 0 15px rgba(82, 168, 236, 0.6); } .clearfloat:after{ display:block; clear:both; content:""; visibility:hidden; height:0 } .clearfloat{ zoom:1; margin: 10px 10px; } .clearfloat .right{ float: right; } .author-name{ text-align: center; margin: 15px 0 5px 0; color: #888; } .clearfloat .chat-message{ max-width: 252px; text-align: left; padding: 8px 12px; border-radius: 6px; word-wrap:break-word; display: inline-block; position: relative; } .clearfloat .left .chat-message{ background: #D9D9D9; min-height: 36px; } .clearfloat .left .chat-message:before{ position: absolute; content: ""; top: 8px; left: -6px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #D9D9D9; } .clearfloat .right{ text-align: right; } .clearfloat .right .chat-message{ background: #8c85e6; color: #fff; text-align: left; min-height: 36px; } .clearfloat .right .chat-message:before{ position: absolute; content: ""; top: 8px; right: -6px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #8c85e6; } .clearfloat .chat-avatars{ display: inline-block; width: 30px; height: 30px; border-radius: 50%; background: #eee; vertical-align: top; overflow: hidden; } .clearfloat .chat-avatars>img{ width: 30px; height: 30px; } .clearfloat .left .chat-avatars{ margin-right: 10px; } .clearfloat .right .chat-avatars{ margin-left: 10px; } .chatBox-send{ width: 100%; padding: 10px 5px; background: #eee; border-top: 1px #D0D0D0 solid; position: absolute; bottom: 0; left: 0; } .chatBox-send>div{ float: left; } .chatBox-send>div:nth-of-type(2){ font-size: 0; } .chatBox-send>div button{ padding: 1px 5px; margin-left: 3px; } .chatBox-send>div label{ padding: 1px 5px; margin-left: 3px; } #chat-biaoqing{ position: relative; } .hidden{ display: none; } .biaoqing-photo{ width: 200px; height: 160px; background: #ffffff; position: absolute; top: -160px; right: 40px; text-align: left; border-radius: 5px; border: solid 1px #c5c5c5; display: none; } .biaoqing-photo::before{ content: ''; position: absolute; border-top: solid 7px #c5c5c5; border-left: solid 9px transparent; border-right: solid 9px transparent; bottom: -7px; right: 36px; } .biaoqing-photo::after{ content: ''; position: absolute; border-top: solid 7px #fff; border-left: solid 10px transparent; border-right: solid 10px transparent; bottom: -5px; right: 35px; } .biaoqing-photo>ul{ margin: 0; width: 200px; height: 160px; padding: 3px 2px; list-style: none; } .biaoqing-photo>ul>li{ float: left; height: 30px; margin-left: 2px; } .emoji-picker-image{ display: inline-block; width: 30px; height: 30px; background: url(/static/httpchat/img/bqxtb01.png) no-repeat; background-size: 200px auto; cursor: pointer; } .biaoqing-photo>ul>li span.emoji-picker-image:hover{ border: solid 1px #f5f5f5; } .chat-message img{ width: 220px; height:auto; } .chat-name{ width: 230px; } /*按钮样式*/ .btn-default-styles { outline: none; resize: none; border: none; display: inline-block; padding: 5px 10px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; background: #bbb; color: #fff; border-radius: 4px; } .btn-default-styles:focus { outline: none; } .btn-default-styles:hover { background: #c5c5c5; animation: anniu 1s infinite; } .btn-default-styles:active { box-shadow: 0 2px 3px rgba(0, 0, 0, .2) inset; } /* 设置滚动条的样式 */ ::-webkit-scrollbar { width:5px; } /* 滚动槽 */ ::-webkit-scrollbar-track { border-radius:10px; } /* 滚动条滑块 */ ::-webkit-scrollbar-thumb { border-radius:10px; background:#8C85E6; -webkit-box-shadow:#8C85E6; } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(175, 190, 255, 0.4); } @media all and (max-width: 768px) { .chatBox{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; } } @media all and (max-width: 370px){ .chat-name{ width: 185px; } .chat-people>div:nth-of-type(2){ width: 120px; } .clearfloat .chat-message{ max-width: 240px; } } </style> </head> <body> <div class="layui-fluid" style="padding: 0"> <div class="layui-row" style="overflow: hidden;"> <div class="layui-col-md3 layui-col-lg3 layui-col-xs3 div-user" style="border-right: 1px solid #b4b2b2;height: 549px;overflow-y: scroll;"> <ul class 标签:
reh磁吹灭弧电力型继电器继电器aqw215ak5连接器连接器q18j4a9zj1b2连接器1208tj2连接器