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-width: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>
View Code
用户页面 （/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>
View Code
客服入口
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>
View Code
客服页面（/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>
View Code
/admin/chat/index