前言

前端展示页面我选择了LayIM,原因嘛好看的UI页面,完善的文档,完成度非常高的封装,不需要考虑前端的东西,将重心放在后端的业务实现。
以下是对LayIM的部分展示,已经文档的一些我自己的见解,部分内容来自于LayIM官网和开发文档
特别说明:LayIM是收费的

LayIM的体验

这是LayIM加载完成后的页面

初始化

前端页面的引入

layui.use('layim', function(layim){
  //基础配置
  layim.config({
 
    init: {} //获取主面板列表信息，下文会做进一步介绍
 
    //获取群员接口（返回的数据格式见下文）
    ,members: {
      url: '' //接口地址（返回的数据格式见下文）
      ,type: 'get' //默认get，一般可不填
      ,data: {} //额外参数
    }
    
    //上传图片接口（返回的数据格式见下文），若不开启图片上传，剔除该项即可
    ,uploadImage: {
      url: '' //接口地址
      ,type: 'post' //默认post
    } 
    
    //上传文件接口（返回的数据格式见下文），若不开启文件上传，剔除该项即可
    ,uploadFile: {
      url: '' //接口地址
      ,type: 'post' //默认post
    }
    //扩展工具栏，下文会做进一步介绍（如果无需扩展，剔除该项即可）
    ,tool: [{
      alias: 'code' //工具别名
      ,title: '代码' //工具名称
      ,icon: '&#xe64e;' //工具图标，参考图标文档
    }]
    
    ,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' //聊天记录页面地址，若不开启，剔除该项即可
  });
});

返回的数据格式为JSON格式

{
  "code": 0 //0表示成功，其它表示失败
  ,"msg": "" //失败信息
  ,"data": {
  
    //我的信息
    "mine": {
      "username": "纸飞机" //我的昵称
      ,"id": "100000" //我的ID
      ,"status": "online" //在线状态 online：在线、hide：隐身
      ,"sign": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名
      ,"avatar": "a.jpg" //我的头像
    }
    
    //好友列表
    ,"friend": [{
      "groupname": "前端码屌" //好友分组名
      ,"id": 1 //分组ID
      ,"list": [{ //分组下的好友列表
        "username": "贤心" //好友昵称
        ,"id": "100001" //好友ID
        ,"avatar": "a.jpg" //好友头像
        ,"sign": "这些都是测试数据，实际使用请严格按照该格式返回" //好友签名
        ,"status": "online" //若值为offline代表离线，online或者不填为在线
      }, …… ]
    }, …… ]
    
    //群组列表
    ,"group": [{
      "groupname": "前端群" //群组名
      ,"id": "101" //群组ID
      ,"avatar": "a.jpg" //群组头像
    }, …… ]
  }
}

code:返回的状态，其中0表示成功，其它表示失败
msg:返回的消息
data:返回的数据
mine:当前登录人的个人信息,包括签名、头像等信息
friend:好友列表
group:群组列表

详细的解释可以官网的文档，写的真的很详细。
而且还有移动端的展示

结束

仅仅为了展示LayIM的魅力，就不进行具体的展示效果了,有基础的看看文档就一目了然。
推荐一个前端 UI 框架Layui, LayIM是Layui中的一个收费模块
更多的LayIM接入案例

参考资料

LayIM官网
 LayIM开发文档