摘要：簡(jiǎn)述本是基于和環(huán)信開發(fā)而成的，本項(xiàng)目?jī)H供學(xué)習(xí)使用，使用前請(qǐng)先到官網(wǎng)獲取的授權(quán)許可。目前已完成的功能有好友群內(nèi)的文字表情圖片文件在線離線消息發(fā)送和接收。面板內(nèi)快速查找。

本webim是基于 layim 和環(huán)信webim3.X開發(fā)而成的，本項(xiàng)目?jī)H供學(xué)習(xí)使用，使用前請(qǐng)先到layim官網(wǎng)獲取layim的授權(quán)許可 。目前已完成的功能有：

1.好友/群內(nèi)的文字、表情、圖片、文件 在線/離線消息發(fā)送和接收。 
2.查看群?jiǎn)T列表。 
3.面板內(nèi)快速查找。 
4.面板右鍵自定義事件 
5.修改簽名
6.自定義上傳背景皮膚
7.搜索好友/群
8.添加好友/群
9.新建群
10.消息盒子展示
11.查看/修改個(gè)人信息
12.實(shí)時(shí)獲取好友在線狀態(tài)
13.擠下線提醒
14.文件儲(chǔ)存在七牛云
15.增刪改 好友/好友分組
16.群管理（增刪管理員/修改群名片/單個(gè)群?jiǎn)T禁言解除禁言/踢人）

1）因?yàn)榭紤]到需要和app之間進(jìn)行通信（表情，圖片等），環(huán)信的表情定義為[/:u]類似的字符而layim則為face[/:u]的字符，為了同時(shí)滿足兩種情況，修改了layim.js的表情相關(guān)代碼，請(qǐng)知曉
2） 自定義右鍵的刪除功能借鑒的是layim的刪除歷史會(huì)話
3） 自定義上傳皮膚功能，在layim.js添加了一個(gè)setSkinByUser的方法，并修改了皮膚尋則模版，對(duì)應(yīng)的上傳路徑是class/doAction.php?action=uploadSkin
4） 面板內(nèi)的搜索好友功能，修改了layim.js的search方法

原則上是不建議自行修改layim.js文件的，因?yàn)檫@樣不利于后期的維護(hù)升級(jí)。

部分截圖如下

體驗(yàn)地址：test.guoshanchina.com

體驗(yàn)帳號(hào)：

用戶名：911088 密碼：123456

用戶名：1570855 密碼：123456

用戶名：1570845 密碼：123456

用戶名：911058 密碼：123456

用戶名：910992 密碼：123456

用戶名：911067 密碼：123456

用戶名：911100 密碼：123456

用戶名：911085 密碼：123456

開始之前，你要了解layui擴(kuò)展第三方插件的方法，然后在環(huán)信注冊(cè)帳號(hào)并創(chuàng)建應(yīng)用。

layui綁定擴(kuò)展

        layui.config({
            base: "static/js/"
        }).extend({
            socket: "socket",
        });

layim,socket初始化

layui.use(["layim", "jquery", "socket"], function (layim, socket) {

var $ = layui.jquery;
var socket = layui.socket;
var token = $("body").data("token");
var rykey = $("body").data("rykey");           
socket.config({
    user: token,
    pwd: rykey ,
    layim: layim,
});

layim.config({
    init: {
        url: "class/doAction.php?action=get_user_data", data: {}
    },
    //獲取群成員
    members: {
        url: "class/doAction.php?action=groupMembers", data: {}
    }
    //上傳圖片接口
    , uploadImage: {
        url: "class/doAction.php?action=uploadImage" //（返回的數(shù)據(jù)格式見下文）
        , type: "" //默認(rèn)post
    }
    //上傳文件接口
    , uploadFile: {
        url: "class/doAction.php?action=uploadFile" //
        , type: "" //默認(rèn)post
    }
    //自定義皮膚
    ,uploadSkin: {
        url: "class/doAction.php?action=uploadSkin"
        , type: "post" //默認(rèn)post
    }                    
    ,systemSkin: {//選擇系統(tǒng)皮膚
        url: "class/doAction.php?action=systemSkin"
        , type: "post" //默認(rèn)post
    }
    , isAudio: false //開啟聊天工具欄音頻
    , isVideo: false //開啟聊天工具欄視頻

    //擴(kuò)展工具欄
    // , tool: [{
    //         alias: "code"
    //         , title: "代碼"
    //         , icon: ""
    //     }]
    ,title: "我的webim" 
    ,copyright:true
    , initSkin: "1.jpg" //1-5 設(shè)置初始背景
    , notice: true //是否開啟桌面消息提醒，默認(rèn)false
    , msgbox: layui.cache.dir + "css/modules/layim/html/msgbox.html" //消息盒子頁面地址，若不開啟，剔除該項(xiàng)即可
    , find: layui.cache.dir + "css/modules/layim/html/find.html" //發(fā)現(xiàn)頁面地址，若不開啟，剔除該項(xiàng)即可
    , chatLog: layui.cache.dir + "css/modules/layim/html/chatLog.html" //聊天記錄頁面地址，若不開啟，剔除該項(xiàng)即可
});  

});

socket.js

內(nèi)容比較長(zhǎng)就不貼出來了，需要源碼的朋友可以在這里下載https://github.com/shmilylbel...
,當(dāng)然最好是star一下，因?yàn)槲視?huì)繼續(xù)完善該項(xiàng)目的。

【注意】github 上傳的代碼已去除layim.js，所以下載代碼后請(qǐng)?jiān)谀惬@取到 layim.js授權(quán)后將 layim.js 拖進(jìn) static / layui / lay / modules / 文件夾內(nèi)方可運(yùn)行。