1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>LayIM PC版本地演示</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
html{background-color: #fff; padding: 100px;}
/*body{height: 3000px; background: transparent url(bgo.png) repeat left top fixed;}*/
</style>
</head>
<body>
<script src="../src/layui.js"></script>
<script>
if(!/^http(s*):\/\//.test(location.href)){
alert('请部署到localhost上查看该演示');
}
layui.use('layim', function(layim){
//演示自动回复
var autoReplay = [
'您好，我现在有事不在，一会再和您联系。',
'你没发错吧？face[微笑] ',
'洗澡中，请勿打扰，偷窥请购票，个体四十，团体八折，订票电话：一般人我不告诉他！face[哈哈] ',
'你好，我是主人的美女秘书，有什么事就跟我说吧，等他回来我会转告他的。face[心] face[心] face[心] ',
'face[威武] face[威武] face[威武] face[威武] ',
'<（@￣︶￣@）>',
'你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
'face[黑线] 你慢慢说，别急……',
'(*^__^*) face[嘻嘻] ，是贤心吗？'
];
//基础配置
layim.config({
//初始化接口
init: {
url: './json/layim/getList.json'
,data: {}
}
//或采用以下方式初始化接口
/*
,init: {
mine: {
"username": "LayIM体验者" //我的昵称
,"id": "100000123" //我的ID
,"status": "online" //在线状态 online：在线、hide：隐身
,"remark": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名
,"avatar": "a.jpg" //我的头像
}
,friend: []
,group: []
}
*/
//查看群员接口
,members: {
url: './json/layim/getMembers.json'
,data: {}
}
//上传图片接口
,uploadImage: {
url: '/upload/image' //（返回的数据格式见下文）
,type: '' //默认post
}
//上传文件接口
,uploadFile: {
url: '/upload/file' //（返回的数据格式见下文）
,type: '' //默认post
}
,isAudio: true
,isVideo: true
//扩展工具栏
,tool: [{
alias: 'code'
,title: '代码'
,icon: ''
}]
//,brief: true //是否简约模式（若开启则不显示主面板）
//,title: 'WebIM' //自定义主面板最小化时的标题
//,right: '100px' //主面板相对浏览器右侧距离
//,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离
//,initSkin: '5.jpg' //1-5 设置初始背景
//,skin: ['aaa.jpg'] //新增皮肤
//,isfriend: false //是否开启好友
//,isgroup: false //是否开启群组
//,min: true //是否始终最小化主面板，默认false
//,notice: true //是否开启桌面消息提醒，默认false
//,voice: false //声音提醒，默认开启，声音文件为：default.mp3
,msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
,find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
,chatLog: layui.cache.dir + 'css/modules/layim/html/chatLog.html' //聊天记录页面地址，若不开启，剔除该项即可
});
/*
layim.chat({
name: '在线客服-小苍'
,type: 'kefu'
,avatar: 'http://tva3.sinaimg.cn/crop.0.0.180.180.180/7f5f6861jw1e8qgp5bmzyj2050050aa8.jpg'
,id: -1
});
layim.chat({
name: '在线客服-心心'
,type: 'kefu'
,avatar: 'http://tva1.sinaimg.cn/crop.219.144.555.555.180/0068iARejw8esk724mra6j30rs0rstap.jpg'
,id: -2
});
layim.setChatMin();*/
//监听在线状态的切换事件
layim.on('online', function(data){
//console.log(data);
});
//监听签名修改
layim.on('sign', function(value){
//console.log(value);
});
//监听自定义工具栏点击，以添加代码为例
layim.on('tool(code)', function(insert){
layer.prompt({
title: '插入代码'
,formType: 2
,shade: 0
}, function(text, index){
layer.close(index);
insert('[pre class=layui-code]' + text + '[/pre]'); //将内容插入到编辑器
});
});
//监听layim建立就绪
layim.on('ready', function(res){
//console.log(res.mine);
layim.msgbox(5); //模拟消息盒子有新消息，实际使用时，一般是动态获得
//添加好友（如果检测到该socket）
layim.addList({
type: 'group'
,avatar: "http://tva3.sinaimg.cn/crop.64.106.361.361.50/7181dbb3jw8evfbtem8edj20ci0dpq3a.jpg"
,groupname: 'Angular开发'
,id: "12333333"
,members: 0
});
layim.addList({
type: 'friend'
,avatar: "http://tp2.sinaimg.cn/2386568184/180/40050524279/0"
,username: '冲田杏梨'
,groupid: 2
,id: "1233333312121212"
,remark: "本人冲田杏梨将结束AV女优的工作"
});
setTimeout(function(){
//接受消息（如果检测到该socket）
//临时会话的消息，即消息发送者不在好友列表上
/*
layim.getMessage({
username: "Hi"
,avatar: "http://qzapp.qlogo.cn/qzapp/100280987/56ADC83E78CEC046F8DF2C5D0DD63CDE/100"
,id: "10000111"
,type: "friend"
,cid: Math.random()*100000|0 //模拟消息id
,content: "临时："+ new Date().getTime()
});*/
//好友的消息
layim.getMessage({
username: "贤心"
,avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1"
,id: "100001"
,type: "friend"
,cid: Math.random()*100000|0 //模拟消息id，会赋值在li的data-cid上，以便完成一些消息的操作（如撤回），可不填
,content: "嗨，你好！欢迎体验LayIM。演示标记："+ new Date().getTime()
});
}, 1500);
});
//监听发送消息
layim.on('sendMessage', function(data){
var To = data.to;
//console.log(data);
if(To.type === 'friend'){
layim.setChatStatus('<span style="color:#FF5722;">对方正在输入。。。</span>');
}
//演示自动回复
setTimeout(function(){
var obj = {};
if(To.type === 'group'){
obj = {
username: '模拟群员'+(Math.random()*100|0)
,avatar: layui.cache.dir + 'images/face/'+ (Math.random()*72|0) + '.gif'
,id: To.id
,type: To.type
,content: autoReplay[Math.random()*9|0]
}
} else {
obj = {
username: To.name
,avatar: To.avatar
,id: To.id
,type: To.type
,content: autoReplay[Math.random()*9|0]
}
layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
}
layim.getMessage(obj);
}, 1000);
});
//监听查看群员
layim.on('members', function(data){
//console.log(data);
});
//监听聊天窗口的切换
layim.on('chatChange', function(res){
var type = res.data.type;
//console.log(res.data.id)
if(type === 'friend'){
//模拟标注好友状态
//layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
} else if(type === 'group'){
//模拟系统消息
layim.getMessage({
system: true
,id: res.data.id
,type: "group"
,content: '模拟群员'+(Math.random()*100|0) + '加入群聊'
});
}
});
//监听更换背景
layim.on('setSkin', function(filename, src){
console.log(filename)
});
});
</script>
</body>
</html>