1
duhe
2025-03-27 2eea07efd133fed07a82a12c544f537cf018c5c6
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
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
/**
 
 @Name:layuiAdmin 用户登入和注册等
 @Author:贤心
 @Site:http://www.layui.com/admin/
 @License: LPPL
    
 */
 
layui.define(['index', 'layim'], function(exports){
  var $ = layui.$
  ,admin = layui.admin
  ,element = layui.element
  ,router = layui.router();
 
  
  var layim = layui.layim;
  
  //演示自动回复
  var autoReplay = [
    '您好,我现在有事不在,一会再和您联系。', 
    '你没发错吧?face[微笑] ',
    '洗澡中,请勿打扰,偷窥请购票,个体四十,团体八折,订票电话:一般人我不告诉他!face[哈哈] ',
    '你好,我是主人的美女秘书,有什么事就跟我说吧,等他回来我会转告他的。face[心] face[心] face[心] ',
    'face[威武] face[威武] face[威武] face[威武] ',
    '<(@ ̄︶ ̄@)>',
    '你要和我说话?你真的要和我说话?你确定自己想说吗?你一定非说不可吗?那你说吧,这是自动回复。',
    'face[黑线]  你慢慢说,别急……',
    '(*^__^*) face[嘻嘻] ,是贤心吗?'
  ];
  
  //基础配置
  layim.config({
    //初始化接口
    init: {
      url: layui.setter.base + 'json/layim/getList.js'
      ,data: {}
    }
    //查看群员接口
    ,members: {
      url: layui.setter.base + 'json/layim/getMembers.js'
      ,data: {}
    }
    
    ,uploadImage: {
      url: '' //(返回的数据格式见下文)
      ,type: '' //默认post
    }
    ,uploadFile: {
      url: '' //(返回的数据格式见下文)
      ,type: '' //默认post
    }
    
    ,isAudio: true //开启聊天工具栏音频
    ,isVideo: true //开启聊天工具栏视频
    
    //扩展工具栏
    ,tool: [{
      alias: 'code'
      ,title: '代码'
      ,icon: '&#xe64e;'
    }]
    
    //,brief: true //是否简约模式(若开启则不显示主面板)
    
    //,title: 'WebIM' //自定义主面板最小化时的标题
    //,right: '100px' //主面板相对浏览器右侧距离
    //,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离
    ,initSkin: '3.jpg' //1-5 设置初始背景
    //,skin: ['aaa.jpg'] //新增皮肤
    //,isfriend: false //是否开启好友
    //,isgroup: false //是否开启群组
    //,min: true //是否始终最小化主面板,默认false
    //,notice: true //是否开启桌面消息提醒,默认false
    //,voice: false //声音提醒,默认开启,声音文件为:default.mp3
    
    ,msgbox: '/layim/demo/msgbox.html' //消息盒子页面地址,若不开启,剔除该项即可
    ,find: '/layim/demo/find.html' //发现页面地址,若不开启,剔除该项即可
    ,chatLog: '/layim/demo/chatlog.html' //聊天记录页面地址,若不开启,剔除该项即可
    
  });
  //监听在线状态的切换事件
  layim.on('online', function(status){
    layer.msg(status);
  });
  
  //监听签名修改
  layim.on('sign', function(value){
    layer.msg(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); //模拟消息盒子有新消息,实际使用时,一般是动态获得
  });
  //监听发送消息
  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) + '加入群聊'
      });
    }
  });
  
  
  //面板外的操作
  var $ = layui.jquery, active = {
    chat: function(){
      //自定义会话
      layim.chat({
        name: '小闲'
        ,type: 'friend'
        ,avatar: '//tva3.sinaimg.cn/crop.0.0.180.180.180/7f5f6861jw1e8qgp5bmzyj2050050aa8.jpg'
        ,id: 1008612
      });
      layer.msg('也就是说,此人可以不在好友面板里');
    }
    ,message: function(){
      //制造好友消息
      layim.getMessage({
        username: "贤心"
        ,avatar: "//tp1.sinaimg.cn/1571889140/180/40030060651/1"
        ,id: "100001"
        ,type: "friend"
        ,content: "嗨,你好!欢迎体验LayIM。演示标记:"+ new Date().getTime()
        ,timestamp: new Date().getTime()
      });
    }
    ,messageAudio: function(){
      //接受音频消息
      layim.getMessage({
        username: "林心如"
        ,avatar: "//tp3.sinaimg.cn/1223762662/180/5741707953/0"
        ,id: "76543"
        ,type: "friend"
        ,content: "audio[http://gddx.sc.chinaz.com/Files/DownLoad/sound1/201510/6473.mp3]"
        ,timestamp: new Date().getTime()
      });
    }
    ,messageVideo: function(){
      //接受视频消息
      layim.getMessage({
        username: "林心如"
        ,avatar: "//tp3.sinaimg.cn/1223762662/180/5741707953/0"
        ,id: "76543"
        ,type: "friend"
        ,content: "video[http://www.w3school.com.cn//i/movie.ogg]"
        ,timestamp: new Date().getTime()
      });
    }
    ,messageTemp: function(){
      //接受临时会话消息
      layim.getMessage({
        username: "小酱"
        ,avatar: "//tva1.sinaimg.cn/crop.7.0.736.736.50/bd986d61jw8f5x8bqtp00j20ku0kgabx.jpg"
        ,id: "198909151014"
        ,type: "friend"
        ,content: "临时:"+ new Date().getTime()
      });
    }
    ,add: function(){
      //实际使用时数据由动态获得
      layim.add({
        type: 'friend'
        ,username: '麻花疼'
        ,avatar: '//tva1.sinaimg.cn/crop.0.0.720.720.180/005JKVuPjw8ers4osyzhaj30k00k075e.jpg'
        ,submit: function(group, remark, index){
          layer.msg('好友申请已发送,请等待对方确认', {
            icon: 1
            ,shade: 0.5
          }, function(){
            layer.close(index);
          });
          
          //通知对方
          /*
          $.post('/im-applyFriend/', {
            uid: info.uid
            ,from_group: group
            ,remark: remark
          }, function(res){
            if(res.status != 0){
              return layer.msg(res.msg);
            }
            layer.msg('好友申请已发送,请等待对方确认', {
              icon: 1
              ,shade: 0.5
            }, function(){
              layer.close(index);
            });
          });
          */
        }
      });
    }
    ,addqun: function(){
      layim.add({
        type: 'group'
        ,username: 'LayIM会员群'
        ,avatar: '//tva2.sinaimg.cn/crop.0.0.180.180.50/6ddfa27bjw1e8qgp5bmzyj2050050aa8.jpg'
        ,submit: function(group, remark, index){
          layer.msg('申请已发送,请等待管理员确认', {
            icon: 1
            ,shade: 0.5
          }, function(){
            layer.close(index);
          });
          
          //通知对方
          /*
          $.post('/im-applyGroup/', {
            uid: info.uid
            ,from_group: group
            ,remark: remark
          }, function(res){
          
          });
          */
        }
      });
    }
    ,addFriend: function(){
      var user = {
        type: 'friend'
        ,id: 1234560
        ,username: '李彦宏' //好友昵称,若申请加群,参数为:groupname
        ,avatar: '//tva4.sinaimg.cn/crop.0.0.996.996.180/8b2b4e23jw8f14vkwwrmjj20ro0rpjsq.jpg' //头像
        ,sign: '全球最大的中文搜索引擎'
      }
      layim.setFriendGroup({
        type: user.type
        ,username: user.username
        ,avatar: user.avatar
        ,group: layim.cache().friend //获取好友列表数据
        ,submit: function(group, index){
          //一般在此执行Ajax和WS,以通知对方已经同意申请
          //……
          
          //同意后,将好友追加到主面板
          layim.addList({
            type: user.type
            ,username: user.username
            ,avatar: user.avatar
            ,groupid: group //所在的分组id
            ,id: user.id //好友ID
            ,sign: user.sign //好友签名
          });
          
          layer.close(index);
        }
      });
    }
    ,addGroup: function(){
      layer.msg('已成功把[Angular开发]添加到群组里', {
        icon: 1
      });
      //增加一个群组
      layim.addList({
        type: 'group'
        ,avatar: "//tva3.sinaimg.cn/crop.64.106.361.361.50/7181dbb3jw8evfbtem8edj20ci0dpq3a.jpg"
        ,groupname: 'Angular开发'
        ,id: "12333333"
        ,members: 0
      });
    }
    ,removeFriend: function(){
      layer.msg('已成功删除[凤姐]', {
        icon: 1
      });
      //删除一个好友
      layim.removeList({
        id: 121286
        ,type: 'friend'
      });
    }
    ,removeGroup: function(){
      layer.msg('已成功删除[前端群]', {
        icon: 1
      });
      //删除一个群组
      layim.removeList({
        id: 101
        ,type: 'group'
      });
    }
    //置灰离线好友
    ,setGray: function(){
      layim.setFriendStatus(168168, 'offline');
      
      layer.msg('已成功将好友[马小云]置灰', {
        icon: 1
      });
    }
    //取消好友置灰
    ,unGray: function(){
      layim.setFriendStatus(168168, 'online');
      
      layer.msg('成功取消好友[马小云]置灰状态', {
        icon: 1
      });
    }
    
    ,kefu1: function(){
      layim.chat({
        name: '在线客服一' //名称
        ,type: 'kefu' //聊天类型
        ,avatar: '//tp1.sinaimg.cn/5619439268/180/40030060651/1' //头像
        ,id: 1111111 //定义唯一的id方便你处理信息
      })
    }
    ,kefu2: function(){
      layim.chat({
        name: '在线客服二' //名称
        ,type: 'kefu' //聊天类型
        ,avatar: '//tp1.sinaimg.cn/5619439268/180/40030060651/1' //头像
        ,id: 2222222 //定义唯一的id方便你处理信息
      });
    }
    
    //移动端版本
    ,mobile: function(){
      var device = layui.device();
      var mobileHome = '/layim/demo/mobile.html';
      if(device.android || device.ios){
        return location.href = mobileHome;
      }
      var index = layer.open({
        type: 2
        ,title: '移动版演示 (或手机扫右侧二维码预览)'
        ,content: mobileHome
        ,area: ['375px', '667px']
        ,shadeClose: true
        ,shade: 0.8
        ,end: function(){
          layer.close(index + 2);
        }
      });
      layer.photos({
        photos: {
          "data": [{
            "src": "http://cdn.layui.com/upload/2016_12/168_1481056358469_50288.png",
          }]
        }
        ,anim: 0
        ,shade: false
        ,success: function(layero){
          layero.css('margin-left', '350px');
        }
      });
    }
  };
  $('.LAY-senior-im-chat-demo .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
  
  
  exports('im', {});
});