layui layim pc端仿qq及时通讯聊天ui效果代码-html代码-BFW代码库

代码语言：html

代码描述：layui layim pc端仿qq及时通讯聊天ui效果代码，可以单聊、群聊、新消息声音提醒，支持发送表情、文件、图片功能。支持拖动，有接口演示。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">

</head>
<body>
            
<blockquote class="layui-elem-quote">
LayIM 是基于 layui 的一款用于开发网页端聊天系统的纯静态 UI 界面解决方案，其包含的只是一套前端源代码素材和相关的模拟示例，没有后端程序及数据库存储等服务。
</blockquote>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>面板外的操作示例</legend>
</fieldset>
 
<div class="site-demo-button">
  <button class="layui-btn site-demo-layim" data-type="chat">自定义会话</button>
  <button class="layui-btn site-demo-layim" data-type="message">接受好友的消息</button>
  <button class="layui-btn site-demo-layim" data-type="messageAudio">接受音频消息</button>
  <button class="layui-btn site-demo-layim" data-type="messageVideo">接受视频消息</button>
  <button class="layui-btn site-demo-layim" data-type="messageTemp">接受临时会话消息</button>
  
  <br>
  
  <button class="layui-btn site-demo-layim" data-type="add">申请好友</button>
  <button class="layui-btn site-demo-layim" data-type="addqun">申请加群</button>
  <button class="layui-btn site-demo-layim" data-type="addFriend">同意好友</button>
  <button class="layui-btn site-demo-layim" data-type="addGroup">增加群组到主面板</button>
  <button class="layui-btn site-demo-layim" data-type="removeFriend">删除主面板好友</button>
  <button class="layui-btn site-demo-layim" data-type="removeGroup">删除主面板群组</button>
  
  <br>
  <button class="layui-btn site-demo-layim" data-type="setGray">置灰离线好友</button>
  <button class="layui-btn site-demo-layim" data-type="unGray">取消好友置灰</button>
  <button class="layui-btn site-demo-layim" style="background-color: #3FDD86" data-type="mobile">WAP 版演示</button>
</div> 
              
        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui.2.6.5.js"></script>  

<script>


layui.config({
  base: '//repo.bfw.wiki/bfwrepo/js/layui/layim/'
  ,layimAssetsPath: '//repo.bfw.wiki/bfwrepo/js/layui/layim/' //layim 资源文件所在目录
  ,version: true //layim 资源文件所在目录
}).extend({
  layim: 'layim' //配置 layim 组件所在的路径
}).use('layim', function(layim){ //加载组件
  var layim = layui.layim;
  
  //演示自动回复
  var autoReplay = [
    '您好，我现在有事不在，一会再和您联系。', 
    '你没发错吧？face[微笑] ',
    '这是一段演示消息 face[哈哈] ',
    '演示消息 face[心] face[心] face[心] ',
    'face[威武] face[威武] face[威武] face[威武] ',
    '<（@￣︶￣@）>',
    '你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
    'face[黑线]  你慢慢说，别急……',
    '(*^__^*) face[嘻嘻]'
  ];
  
  //基础配置
  layim.config({
    //初始化接口
    init: {
      url: '//repo.bfw.wiki/bfwrepo/json/getList.json'
      ,data: {}
    }
    //查看群员接口
    ,members: {
      url: '//repo.bfw.wiki/bfwrepo/json/getMembers.json'
      ,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: layui.cache.layimAssetsPath + 'html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
  //  ,find: layui.cache.layimAssetsPath + 'html/find.html' //发现页面地址，若不开启，剔除该项即可
 //   ,chatLog: layui.cache.layimAssetsPath + 'html/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.layimAssetsPath + '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: '//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90'
        ,id: 1008612
      });
      layer.msg('也就是说，此人可以不在好友面板里');
    }
    ,message: function(){
      //制造好友消息
      layim.getMessage({
        username: "测试1"
        ,avatar: "//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"
        ,id: "100001"
        ,type: "friend"
        ,content: "嗨，你好！这是一条测试内容。演示标记："+ new Date().getTime()
        ,timestamp: new Date().getTime()
      });
  .........完整代码请登录后点击上方下载按钮下载查看