css、js 下载：
https://files.cnblogs.com/files/kitty-blog/chat.zip
用户显示入口
1 <!-- 聊天相关 --> 2 <div id="open-chat-window-btn" class="open-chat-window-btn"><svg t="1577244016201" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="43836" width="80" height="80"><path d="M0 511.999716a511.999716 511.999716 0 0 0 511.999716 511.999715 510.236161 510.236161 0 0 0 211.626549-45.624863c55.068414-25.031097 161.848799-2.673776 204.401664-44.543976 43.690642-43.007976 22.755543-150.641694 48.867528-206.961662A510.179272 510.179272 0 0 0 1023.999431 511.999716a511.999716 511.999716 0 0 0-511.999715-511.999716 511.999716 511.999716 0 0 0-511.999716 511.999716z" fill="#ffa066" p-id="43837" data-spm-anchor-id="a313x.7781069.0.i58" class=""></path><path d="M284.444286 511.999716m-56.888857 0a56.888857 56.888857 0 1 0 113.777715 0 56.888857 56.888857 0 1 0-113.777715 0Z" fill="#ffffff" p-id="43838" data-spm-anchor-id="a313x.7781069.0.i57" class=""></path><path d="M739.555145 511.999716m-56.888858 0a56.888857 56.888857 0 1 0 113.777715 0 56.888857 56.888857 0 1 0-113.777715 0Z" fill="#ffffff" p-id="43839" data-spm-anchor-id="a313x.7781069.0.i54" class=""></path><path d="M511.999716 511.999716m-56.888858 0a56.888857 56.888857 0 1 0 113.777715 0 56.888857 56.888857 0 1 0-113.777715 0Z" fill="#ffffff" p-id="43840" data-spm-anchor-id="a313x.7781069.0.i56" class=""></path></svg></div> 3 <iframe src="/home/chat/index" id="chat-iframe" class="hidden-iframe" scrolling="no" frameborder="0"></iframe> 4 <style> 5 .open-chat-window-btn{ 6 position: fixed; 7 width: 80px; 8 text-align: center; 9 bottom: 50px; 10 right: 10px; 11 cursor: pointer; 12 z-index: 9999; 13 transition:all 0.5s ease-in-out; 14 } 15 iframe#chat-iframe{ 16 position: fixed; 17 width: 400px; 18 height: 560px; 19 right: 0; 20 bottom: 0px; 21 z-index: 9999; 22 -webkit-transition:right 1s ease-in-out; 23 transition:right 1s ease-in-out 24 } 25 .hidden-iframe{ 26 right: -140vw !important; 27 } 28 @media(max-480px) { 29 .open-chat-window-btn{ 30 transform: scale(0.6); 31 -webkit-transform: scale(0.6); 32 right: -12px; 33 } 34 iframe#chat-iframe{ 35 width: 360px; 36 height: 500px; 37 } 38 } 39 </style> 40 <script> 41 $(function(){ 42 // 展开 43 let $chatIframe = document.querySelector('iframe#chat-iframe'); 44 let $openBtn = document.querySelector('#open-chat-window-btn') 45 $openBtn.addEventListener("click",function(event){ 46 $chatIframe.classList.remove('hidden-iframe'); 47 //自动滚动到底部 48 let $chatLog = $chatIframe.contentWindow.document.querySelector('.chat-log'); 49 setTimeout(()=>{ 50 $chatLog.scrollTo({top: $chatLog.scrollHeight, behavior: "instant" }); 51 },2000) 52 }); 53 // // 自动弹出窗口 54 // setTimeout(() => { 55 // $openBtn.click(); 56 // }, 10000); 57 }) 58 </script>
用户页面 （/home/chat/index）
1 <link rel="stylesheet" href="/chat/default/chat.css?v=1.0"> 2 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 3 <link href="https://cdn.staticfile.org/emoji/0.2.2/emoji.css" rel="stylesheet" type="text/css" /> 4 <script src="https://cdn.staticfile.org/jquery/2.1.0/jquery.min.js"></script> 5 <script src="https://cdn.staticfile.org/emoji/0.2.2/emoji.js"></script> 6 <!-- 聊天窗口 --> 7 <div class="chat-window" id="chat-window"> 8 <!-- 聊天头部,客服信息 --> 9 <header> 10 在线客服：<span class="online_user">小K</span>正在为您服务！ 11 <span class="close-window-btn"><svg t="1577240042399" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4306" width="20" height="20"><path d="M960 576H64V448h896z" p-id="4307" fill="#ffffff"></path></svg></span> 12 </header> 13 <!-- 聊天记录区域 --> 14 <div class="chat-log-section"> 15 </div> 16 17 <!-- 聊天输入区域 --> 18 <div class="chat-input"> 19 <!-- 表情 --> 20 <div class="emoji-content" id="emoji-content"> 21 <span class="emoji emoji1f620"></span> 22 <span class="emoji emoji1f629"></span> 23 <span class="emoji emoji1f632"></span> 24 <span class="emoji emoji1f61e"></span> 25 <span class="emoji emoji1f635"></span> 26 <span class="emoji emoji1f630"></span> 27 <span class="emoji emoji1f612"></span> 28 <span class="emoji emoji1f60d"></span> 29 <span class="emoji emoji1f624"></span> 30 <span class="emoji emoji1f61c"></span> 31 <span class="emoji emoji1f61d"></span> 32 <span class="emoji emoji1f60b"></span> 33 <span class="emoji emoji1f618"></span> 34 <span class="emoji emoji1f61a"></span> 35 <span class="emoji emoji1f637"></span> 36 <span class="emoji emoji1f633"></span> 37 <span class="emoji emoji1f603"></span> 38 <span class="emoji emoji1f605"></span> 39 <span class="emoji emoji1f606"></span> 40 <span class="emoji emoji1f601"></span> 41 <span class="emoji emoji1f602"></span> 42 <span class="emoji emoji1f60a"></span> 43 <span class="emoji emoji263a "></span> 44 <span class="emoji emoji1f604"></span> 45 <span class="emoji emoji1f622"></span> 46 <span class="emoji emoji1f62d"></span> 47 <span class="emoji emoji1f628"></span> 48 <span class="emoji emoji1f623"></span> 49 <span class="emoji emoji1f621"></span> 50 <span class="emoji emoji1f60c"></span> 51 <span class="emoji emoji1f616"></span> 52 <span class="emoji emoji1f614"></span> 53 <span class="emoji emoji1f631"></span> 54 <span class="emoji emoji1f62a"></span> 55 <span class="emoji emoji1f60f"></span> 56 <span class="emoji emoji1f613"></span> 57 <span class="emoji emoji1f625"></span> 58 <span class="emoji emoji1f62b"></span> 59 <span class="emoji emoji1f609"></span> 60 <span class="emoji emoji1f63a"></span> 61 <span class="emoji emoji1f638"></span> 62 <span class="emoji emoji1f639"></span> 63 <span class="emoji emoji1f63d"></span> 64 <span class="emoji emoji1f63b"></span> 65 <span class="emoji emoji1f63f"></span> 66 <span class="emoji emoji1f63e"></span> 67 <span class="emoji emoji1f63c"></span> 68 <span class="emoji emoji1f640"></span> 69 <span class="emoji emoji1f645"></span> 70 <span class="emoji emoji1f646"></span> 71 <span class="emoji emoji1f647"></span> 72 <span class="emoji emoji1f648"></span> 73 <span class="emoji emoji1f64a"></span> 74 <span class="emoji emoji1f649"></span> 75 <span class="emoji emoji1f64b"></span> 76 <span class="emoji emoji1f64c"></span> 77 <span class="emoji emoji1f64d"></span> 78 <span class="emoji emoji1f64e"></span> 79 <span class="emoji emoji1f64f"></span> 80 </div> 81 <!-- 工具栏 --> 82 <div class="tool-bar" id="tool-bar"> 83 <!-- 表情 --> 84 <div class="emoji-btn" id="emoji-btn"><svg t="1576752765757" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1796" width="28" height="28"><path d="M512 116.492c-218.433 0-395.508 177.075-395.508 395.508s177.075 395.508 395.508 395.508 395.508-177.075 395.508-395.508-177.075-395.508-395.508-395.508zM512 876.609c-201.367 0-364.609-163.241-364.609-364.609s163.241-364.609 364.609-364.609 364.609 163.241 364.609 364.609-163.241 364.609-364.609 364.609z" fill="#ffa066" p-id="1797"></path><path d="M512 694.761c-103.67 0-187.713-84.041-187.713-187.713h-30.899c0 120.735 97.875 218.611 218.611 218.611s218.611-97.875 218.611-218.611h-30.899c0 103.67-84.041 187.713-187.713 187.713z" fill="#ffa066" p-id="1798"></path><path d="M293.389 507.049c0 8.533 6.916 15.449 15.449 15.449s15.449-6.916 15.449-15.449c0-8.533-6.916-15.449-15.449-15.449-8.533 0-15.449 6.916-15.449 15.449z" fill="#ffa066" p-id="1799"></path><path d="M699.713 507.049c0 8.533 6.916 15.449 15.449 15.449s15.449-6.916 15.449-15.449c0-8.533-6.916-15.449-15.449-15.449-8.533 0-15.449 6.916-15.449 15.449z" fill="#ffa066" p-id="1800"></path><path d="M324.287 381.838c0 19.199 15.563 34.762 34.762 34.762s34.762-15.563 34.762-34.762c0-19.199-15.563-34.762-34.762-34.762-19.199 0-34.762 15.563-34.762 34.762z" fill="#ffa066" p-id="1801"></path><path d="M630.189 381.838c0 19.199 15.563 34.762 34.762 34.762s34.762-15.563 34.762-34.762c0-19.199-15.563-34.762-34.762-34.762-19.199 0-34.762 15.563-34.762 34.762z" fill="#ffa066" p-id="1802"></path></svg></div> 85 <!-- 发送按钮 --> 86 <div class="send-btn">发送</div> 87 </div> 88 <!-- 输入框 --> 89 <textarea rows="8" placeholder="请输入你的问题"></textarea> 90 </div> 91 </div> 92 <!-- 模板 --> 93 <!-- 聊天窗口 --> 94 <template id="chat-log"> 95 <section class="chat-log"> 96 </section> 97 </template> 98 <!-- 文字、表情消息 left: 客服; right: 用户--> 99 <template id="chat-box"> 100 <div class="chat-box"> 101 <!-- 头像 --> 102 <div class="avatar"><img src="/chat/default/avatar-kf.png" alt=""></div> 103 <!-- 消息内容 文字、表情 --> 104 <div class="text-content"><span class="emoji emoji1f620"></span></div> 105 </div> 106 </template> 107 <!-- 会话列表 --> 108 <template id="conversationItem"> 109 <li> 110 <a href="javascript:void(0);"> 111 <div class="avatar"> 112 <img src="/chat/default/avatar-user.png" alt=""> 113 </div> 114 <div class="info"> 115 <h4>name</h4> 116 <p>11111</p> 117 </div> 118 </a> 119 </li> 120 </template> 121 <!-- 系统消息 --> 122 <template id="system-msg-box"> 123 <span class="system-msg-box"></span> 124 <br> 125 </template> 126 <script src="{{ asset('/chat/jmessage-sdk-web.2.6.0.min') }}.js"></script> 127 <script src="{{ asset('/chat/default/chat') }}.js"></script> 128 <script> 129 let chat = new Chat(); 130 chat.init({!! jim('init') !!},{!! jim('user') !!} ).then(()=>{ 131 chat.getChatWindow(chat.sendUserInfo.target_username,chat.sendUserInfo.target_nickname) 132 }); 133 </script>
客服入口
1 <li class="dropdown messages-menu"> 2 <a href="javascript:void(0);" id="show-chat-iframe-btn"> 3 <i class="fa fa-envelope-o"></i> 4 {{-- TODO 未读消息 --}} 5 <span class="label label-warning">0</span> 6 </a> 7 </li> 8 <iframe src="/admin/chat/index" id="chat-iframe" class="hidden-iframe" scrolling="no" frameborder="0"></iframe> 9 <style> 10 iframe#chat-iframe{ 11 position: absolute; 12 width: 100%; 13 height: calc(100vh - 103px); 14 right: 0; 15 top: 50px; 16 z-index: 9999; 17 } 18 .hidden,.hidden-iframe{ 19 display: none !important; 20 } 21 </style> 22 <script> 23 let $btn = document.querySelector("#show-chat-iframe-btn"); 24 let $iframe = document.querySelector("#chat-iframe"); 25 $btn.addEventListener("click",function(){ 26 if($iframe.classList.contains('hidden-iframe')){ 27 $iframe.classList.remove('hidden-iframe') 28 }else{ 29 $iframe.classList.add('hidden-iframe') 30 } 31 32 }) 33 </script>
客服页面（/admin/chat/index）
1 <link rel="stylesheet" href="/chat/default/chat.css?v=1.0"> 2 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 3 <link href="https://cdn.staticfile.org/emoji/0.2.2/emoji.css" rel="stylesheet" type="text/css" /> 4 <script src="https://cdn.staticfile.org/jquery/2.1.0/jquery.min.js"></script> 5 <script src="https://cdn.staticfile.org/emoji/0.2.2/emoji.js"></script> 6 <!-- 聊天窗口 --> 7 <div class="chat-wrapper"> 8 9 <div class="chat-left-user-list" id="conversationlist"> 10 <div class='chat-list'>会话列表</div> 11 <ul></ul> 12 </div> 13 <div class="chat-right-content"> 14 <div class="chat-window admin-chat-window hidden" id="chat-window"> 15 <!-- 聊天头部,客服信息 --> 16 <header> 17 当前用户：<span class="online_user"></span> 18 <span class="close-window-btn"><svg t="1577240042399" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4306" width="20" height="20"><path d="M960 576H64V448h896z" p-id="4307" fill="#ffffff"></path></svg></span> 19 </header> 20 <!-- 聊天记录区域 --> 21 <div class="chat-log-section"> 22 </div> 23 <!-- 聊天输入区域 --> 24 <div class="chat-input"> 25 <!-- 表情 --> 26 <div class="emoji-content" id="emoji-content"> 27 <span class="emoji emoji1f620"></span> 28 <span class="emoji emoji1f629"></span> 29 <span class="emoji emoji1f632"></span> 30 <span class="emoji emoji1f61e"></span> 31 <span class="emoji emoji1f635"></span> 32 <span class="emoji emoji1f630"></span> 33 <span class="emoji emoji1f612"></span> 34 <span class="emoji emoji1f60d"></span> 35 <span class="emoji emoji1f624"></span> 36 <span class="emoji emoji1f61c"></span> 37 <span class="emoji emoji1f61d"></span> 38 <span class="emoji emoji1f60b"></span> 39 <span class="emoji emoji1f618"></span> 40 <span class="emoji emoji1f61a"></span> 41 <span class="emoji emoji1f637"></span> 42 <span class="emoji emoji1f633"></span> 43 <span class="emoji emoji1f603"></span> 44 <span class="emoji emoji1f605"></span> 45 <span class="emoji emoji1f606"></span> 46 <span class="emoji emoji1f601"></span> 47 <span class="emoji emoji1f602"></span> 48 <span class="emoji emoji1f60a"></span> 49 <span class="emoji emoji263a "></span> 50 <span class="emoji emoji1f604"></span> 51 <span class="emoji emoji1f622"></span> 52 <span class="emoji emoji1f62d"></span> 53 <span class="emoji emoji1f628"></span> 54 <span class="emoji emoji1f623"></span> 55 <span class="emoji emoji1f621"></span> 56 <span class="emoji emoji1f60c"></span> 57 <span class="emoji emoji1f616"></span> 58 <span class="emoji emoji1f614"></span> 59 <span class="emoji emoji1f631"></span> 60 <span class="emoji emoji1f62a"></span> 61 <span class="emoji emoji1f60f"></span> 62 <span class="emoji emoji1f613"></span> 63 <span class="emoji emoji1f625"></span> 64 <span class="emoji emoji1f62b"></span> 65 <span class="emoji emoji1f609"></span> 66 <span class="emoji emoji1f63a"></span> 67 <span class="emoji emoji1f638"></span> 68 <span class="emoji emoji1f639"></span> 69 <span class="emoji emoji1f63d"></span> 70 <span class="emoji emoji1f63b"></span> 71 <span class="emoji emoji1f63f"></span> 72 <span class="emoji emoji1f63e"></span> 73 <span class="emoji emoji1f63c"></span> 74 <span class="emoji emoji1f640"></span> 75 <span class="emoji emoji1f645"></span> 76 <span class="emoji emoji1f646"></span> 77 <span class="emoji emoji1f647"></span> 78 <span class="emoji emoji1f648"></span> 79 <span class="emoji emoji1f64a"></span> 80 <span class="emoji emoji1f649"></span> 81 <span class="emoji emoji1f64b"></span> 82 <span class="emoji emoji1f64c"></span> 83 <span class="emoji emoji1f64d"></span> 84 <span class="emoji emoji1f64e"></span> 85 <span class="emoji emoji1f64f"></span> 86 </div> 87 <!-- 工具栏 --> 88 <div class="tool-bar" id="tool-bar"> 89 <!-- 表情 --> 90 <div class="emoji-btn" id="emoji-btn"><svg t="1576752765757" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1796" width="28" height="28"><path d="M512 116.492c-218.433 0-395.508 177.075-395.508 395.508s177.075 395.508 395.508 395.508 395.508-177.075 395.508-395.508-177.075-395.508-395.508-395.508zM512 876.609c-201.367 0-364.609-163.241-364.609-364.609s163.241-364.609 364.609-364.609 364.609 163.241 364.609 364.609-163.241 364.609-364.609 364.609z" fill="#ffa066" p-id="1797"></path><path d="M512 694.761c-103.67 0-187.713-84.041-187.713-187.713h-30.899c0 120.735 97.875 218.611 218.611 218.611s218.611-97.875 218.611-218.611h-30.899c0 103.67-84.041 187.713-187.713 187.713z" fill="#ffa066" p-id="1798"></path><path d="M293.389 507.049c0 8.533 6.916 15.449 15.449 15.449s15.449-6.916 15.449-15.449c0-8.533-6.916-15.449-15.449-15.449-8.533 0-15.449 6.916-15.449 15.449z" fill="#ffa066" p-id="1799"></path><path d="M699.713 507.049c0 8.533 6.916 15.449 15.449 15.449s15.449-6.916 15.449-15.449c0-8.533-6.916-15.449-15.449-15.449-8.533 0-15.449 6.916-15.449 15.449z" fill="#ffa066" p-id="1800"></path><path d="M324.287 381.838c0 19.199 15.563 34.762 34.762 34.762s34.762-15.563 34.762-34.762c0-19.199-15.563-34.762-34.762-34.762-19.199 0-34.762 15.563-34.762 34.762z" fill="#ffa066" p-id="1801"></path><path d="M630.189 381.838c0 19.199 15.563 34.762 34.762 34.762s34.762-15.563 34.762-34.762c0-19.199-15.563-34.762-34.762-34.762-19.199 0-34.762 15.563-34.762 34.762z" fill="#ffa066" p-id="1802"></path></svg></div> 91 <!-- 发送按钮 --> 92 <div class="send-btn">发送</div> 93 </div> 94 <!-- 输入框 --> 95 <textarea rows="8" placeholder="请输入你的问题"></textarea> 96 </div> 97 </div> 98 </div> 99 </div> 100 <!-- 模板 --> 101 <!-- 聊天窗口 --> 102 <template id="chat-log"> 103 <section class="chat-log"> 104 </section> 105 </template> 106 <!-- 文字、表情消息 left: 客服; right: 用户--> 107 <template id="chat-box"> 108 <div class="chat-box"> 109 <!-- 头像 --> 110 <div class="avatar"><img src="/chat/default/avatar-kf.png" alt=""></div> 111 <!-- 消息内容 文字、表情 --> 112 <div class="text-content"><span class="emoji emoji1f620"></span></div> 113 </div> 114 </template> 115 <!-- 会话列表 --> 116 <template id="conversationItem"> 117 <li> 118 <a href="javascript:void(0);"> 119 <div class="avatar"> 120 <img src="/chat/default/avatar-user.png" alt=""> 121 </div> 122 <div class="info"> 123 <h4>name</h4> 124 <p>11111</p> 125 </div> 126 </a> 127 </li> 128 </template> 129 <!-- 系统消息 --> 130 <template id="system-msg-box"> 131 <span class="system-msg-box"></span> 132 <br> 133 </template> 134 <script src="{{ asset('/chat/jmessage-sdk-web.2.6.0.min') }}.js"></script> 135 <script src="{{ asset('/chat/default/chat') }}.js"></script> 136 <script> 137 let chat = new Chat(); 138 chat.init({!! jim('init') !!},{!! jim('admin') !!}); 139 </script>
/admin/chat/index