LayIM 開發者文檔

                    當前文檔適用于 LayIM PC端 最新版,如果你正在了解的并非該版本,你可以前往其它版本閱覽: LayIM 移動版文檔
                    在WebIM似乎已被打入冷宮的今天,LayIM正試圖重新為網頁帶來一些社交想象。作為一款Web即時通訊前端解決方案(服務端需自寫),LayIM提供了全方位的前端接口支撐,不僅能讓您更高效地接入到自己的通訊服務中,更能讓你輕松地與 環信融云野狗 等第三方通訊服務平臺對接。LayIM始終堅持極簡的體驗,致力于拉近你的用戶在web間的距離。

                    LayIM兼容除IE6/7以外的所有瀏覽器,如果你的網站仍需兼容ie6/7,那么強烈建議你說服你的老板或者客戶。
                    模塊加載名稱:layim,官網地址:layim.layui.com
                    開始使用

                    LayIM基于layui模塊體系,因此你獲得的其實是一個包含LayIM的layui框架,不同的是,開源版的layui并不包含LayIM。捐贈后,將您獲得的壓縮包解壓,將layui整個目錄文件放入你的項目后,不用再對其代碼做任何修改(方便下次升級)。然后您只需引入下述兩個文件即可。

                    ./build/css/layui.css
                    ./build/layui.js


                    假如你將layui放入你的/static/目錄中,并且你的html頁面在根目錄,那么一個最直接的例子是:

                    <!doctype html>
                    <html>
                    <head>
                    <meta charset="utf-8">
                    <title>LayIM測試</title>
                    <link rel="stylesheet" href="/static/build/layui.css" media="all">
                    </head>
                    <body>
                    <script src="/static/build/layui.js"></script>
                    <script>
                    layui.use('layim', function(layim){
                      //先來個客服模式壓壓精
                      layim.config({
                        brief: true //是否簡約模式(如果true則不顯示主面板)
                      }).chat({
                        name: '客服姐姐'
                        ,type: 'friend'
                        ,avatar: 'http://tp1.sinaimg.cn/5619439268/180/40030060651/1'
                        ,id: -2
                      });
                    });
                    </script>
                    </body>
                    </html>
                          

                    通過上述方式,便可成功加載layim。當然,你僅僅只是看到了一個"客服姐姐"的聊天面板,這等同于:Hello World!
                    向“客服姐姐”問好后就忘了它吧,這份文檔才剛剛開始。

                    初始化配置

                    一個你必須認識的方法:layim.config(options)
                    控制著許多重要的配置,基本上一個完整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' //聊天記錄頁面地址,若不開啟,剔除該項即可
                      });
                    });      
                          

                    layim.config(options)的更多可選配置項見下表:

                    可選項 默認值 類型 用途
                    brief false boolean 是否簡約模式,如果設為 true,則主面板不會顯示。一般可用于客服
                    title 我的LayIM string 主面板最小化后顯示的名稱
                    min false boolean 用于設定主面板是否在頁面打開時,始終最小化展現
                    right 0px string 用于設定主面板右偏移量。該參數可避免遮蓋你頁面右下角已經的bar
                    minRight string 用戶控制聊天面板最小化時、及新消息提示層的相對right的px坐標。
                    如:minRight: '200px'
                    initSkin 空字符 string 設置初始背景,默認不開啟。可設置./css/modules/layim/skin目錄下的圖片文件名
                    如:initSkin: '5.jpg'
                    isAudio false boolean 是否開啟聊天工具欄音頻
                    isVideo false boolean 是否開啟開啟聊天工具欄視頻
                    notice false boolean 是否開啟桌面消息提醒,即在瀏覽器之外的提醒
                    voice default.mp3 string/boolean 設定消息提醒的聲音文件(所在目錄:./layui/css/modules/layim/voice/)
                    若不開啟,設置 false 即可
                    isfriend true boolean 是否開啟好友
                    isgroup true boolean 是否開啟群組
                    maxLength 3000 number 可允許的消息最大字符長度
                    skin null object 拓展背景,如:
                    skin: [ 
                      'http://xxx.com/skin.jpg', 
                      'b.png'
                      …
                    ]             
                                
                    copyright false boolean 是否授權。如果非授權獲得,或將LayIM應用在第三方,建議保留,即不設置。
                    init數據格式

                    通過layim.config來設定init參數可獲得:我的信息、好友列表、群組列表。你可以采用Ajax配置方式,以及直接賦值列表數據。

                    /獲取主面板列表信息
                    init: {
                      url: '' //接口地址(返回的數據格式見下文)
                      ,type: 'get' //默認get,一般可不填
                      ,data: {} //額外參數
                    }  
                          

                    那么該接口所返回的信息(response)應該嚴格按照下述的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" //群組頭像
                        }, …… ]
                      }
                    }
                          

                    Demo:getList.json

                    //里面的字段格式 同 上文的 data 中的格式。
                    //注意:采用該方式時,不可以再配置url參數,否則會走Ajax模式
                    init: {
                      mine: {}
                      ,friend: []
                      ,group: []
                    }
                          
                    members數據格式

                    通過layim.config來設定members參數可獲取群員列表,假設你進行了下述配置

                    ,members: {
                      url: ' '/api/im/getMembers/'
                      ,data: {}
                    }     
                          

                    那么當點擊群聊面板查看成員時,將會向members的url發送Ajax請求,并自動傳遞一個id參數(群組id)。該接口所返回的信息(response)應該嚴格按照下述的JSON格式:

                    {
                      "code": 0 //0表示成功,其它表示失敗
                      ,"msg": "" //失敗信息
                      ,"data": {
                        "list": [{
                          "username": "馬小云" //群員昵稱
                          ,"id": "168168" //群員id
                          ,"avatar": "http://tp4.sinaimg.cn/2145291155/180/5601307179/1" //群員頭像
                          ,"sign": "讓天下沒有難寫的代碼" //群員簽名
                        }, …… ]
                      }
                    }      
                          

                    Demo:getMembers.json

                    上傳圖片

                    通過layim.config來設定uploadImage參數可進行圖片上傳,假設你進行了下述配置

                    ,uploadImage: {
                      url: ''
                    }     
                          

                    那么當點擊聊天面板上傳圖片時,將會向uploadImage的url發送HTTP請求,進行圖片上傳。我們會給你傳遞一個name="file"的文件表單域,你接受即可。該接口所返回的信息(response)應該嚴格按照下述的JSON格式:

                    {
                      "code": 0 //0表示成功,其它表示失敗
                      ,"msg": "" //失敗信息
                      ,"data": {
                        "src": "http://cdn.xxx.com/upload/images/a.jpg" //圖片url
                      }
                    }      
                          
                    上傳文件

                    通過layim.config來設定uploadImage參數可進行文件上傳,事實上跟圖片上傳非常類似有木有?假設你進行了下述配置

                    ,uploadFile: {
                      url: ' ''
                    }     
                          

                    那么當點擊聊天面板上傳文件時,將會向uploadFile的url發送HTTP請求,進行文件上傳。我們會給你傳遞一個name="file"的文件表單域,你接受即可。該接口所返回的信息(response)應該嚴格按照下述的JSON格式:

                    {
                      "code": 0 //0表示成功,其它表示失敗
                      ,"msg": "" //失敗信息
                      ,"data": {
                        "src": "http://cdn.xxx.com/upload/file/LayIM.zip" //文件url
                        ,"name": "LayIM.zip" //文件名
                      }
                    }      
                          
                    擴展工具欄

                    你可以對聊天面板的工具欄區域進行擴展,以便實現更豐富的聊天內容。首先在你layim.config中設定好要擴展的圖標、名稱等信息,如:

                    layim.config({
                      //可同時配置多個
                      tool: [{
                        alias: 'code' //工具別名
                        ,title: '代碼' //工具名稱
                        ,icon: '&#xe64e;' //工具圖標,參考圖標文檔
                      }] 
                    })
                          

                    那么在工具欄中將會出現一個代碼的圖標,如何在點擊它時實現你想要的功能呢?很簡單,你只需要:

                    //監聽自定義工具欄點擊,以添加代碼為例
                    layim.on('tool(code)', function(insert, send, obj){ //事件中的tool為固定字符,而code則為過濾器,對應的是工具別名(alias)
                      layer.prompt({
                        title: '插入代碼'
                        ,formType: 2
                        ,shade: 0
                      }, function(text, index){
                        layer.close(index);
                        insert('[pre class=layui-code]' + text + '[/pre]'); //將內容插入到編輯器,主要由insert完成
                        //send(); //自動發送
                      });
                      console.log(this); //獲取當前工具的DOM對象
                      console.log(obj); //獲得當前會話窗口的DOM對象、基礎信息
                    });   
                          
                    消息盒子

                    你可以配置msgbox指向一個盒子頁面地址,從而為主面板賦予各種系統消息機制。

                    layim.config({
                      msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子頁面地址,若不開啟,剔除該項即可
                    });      
                          

                    它指向的是我們內置的一個盒子模版(你也可以換成你自己的頁面),里面寫好了所有代碼,你只需要按照里面的注釋配置好一些接口即可。
                    當你試圖在盒子的圖標上實時獲取到最新的系統消息數時,你可以借助以下方法完成。

                    layim.msgbox(5); //數字即為你通過websocket或者Ajax實時獲取到的最新消息數量
                    //它將在主面板的消息盒子icon上不斷顯隱提示,直到點擊后自動消失
                          
                    查找頁面

                    為了避免聯調的復雜性且需求不一,所以官方暫不提供該模版結構與樣式,實際使用時,可移至該文件到你的項目中,對頁面自行把控

                    layim.config({
                      find: layui.cache.dir + 'css/modules/layim/html/find.html' //發現頁面地址,若不開啟,剔除該項即可
                    });      
                          
                    查看更多聊天記錄

                    LayIM會在本地存儲每個會話的最新 20 條記錄。但一般服務端也要存儲存儲一份,為了避免聯調的復雜性,我們并不內置更多聊天記錄的展示。而是彈出一個聊天記錄的layer窗口,這意味著你可以隨意發揮聊天記錄的頁面。通過layim.config配置chatLog來指向聊天記錄的URL。假設你進行了下述設定:

                    layim.config({
                      //以下為我們內置的模版,也可以換成你的任意頁面。若不開啟,剔除該項即可
                      chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' 
                    });      
                          

                    那么,我們會在chatLog所對應的URL后面動態追加當前聊天窗口的ID(即好友或群組ID)和類型,如:/chat/log?id=123&type=friend
                    詳細情況可以打開 chatlog.html 去了解,里面有我們寫好的代碼。

                    富文本內容格式

                    LayIM的聊天多類型內容解析采用內部特定的文本格式,你可以借助它在聊天內容區域呈現多樣化的內容。目前我們支持的內容如下:

                    超鏈接格式:a(地址)[文本]       如:a(http://www.fk434.com)[layui]   
                    圖片格式:img[地址]            如:img[http://cdn.layui.com/xxx/a.jpg]
                    文件格式:file(地址)[文本]      如:file(http://cdn.layui.com/download/layim.zip)[layim.zip]
                    音頻格式:audio[地址]          如:audio[http://cdn.layui.com/xxx/a.mp3]
                    視頻格式:video[地址]          如:video[http://cdn.layui.com/xxx/a.avi]
                          
                    接入WebSocket

                    一般來說,對接到第三方通訊平臺是個更靠譜的選擇,比如:環信融云野狗。它們都可以是 LayIM 的最佳拍檔,你會省去許多工作。

                    但如果你想保證絕對的數據隱私,你也可以自己搭建通訊服務。目前所有的主流Web語言都有對WebSocket做很好的支持,其中也有很多優秀的通訊框架可以任你挑選,因此萬萬不可畏懼它的存在,除非你真的想用Ajax輪詢去解決消息I/O。WebSocket會使得你的消息接受和傳遞變得極其輕松,最重要的一點是,性能卓絕。WebSocket的建立非常簡單:

                    layui.use('layim', function(layim){
                      
                      //建立WebSocket通訊
                      //注意:如果你要兼容ie8+,建議你采用 socket.io 的版本。下面是以原生WS為例
                      
                      var socket = new WebSocket('ws://localhost:8090');
                      
                      //發送一個消息
                      socket.send('Hi Server, I am LayIM!');
                    
                    //更多情況下,一般是傳遞一個JSON
                    socket.send(JSON.stringify({
                      type: '' //隨便定義,用于在服務端區分消息類型
                      ,data: {}
                    })); 
                    
                    //連接成功時觸發 socket.onopen = function(){ socket.send('XXX連接成功'); }; //監聽收到的消息 socket.onmessage = function(res){ //res為接受到的值,如 {"emit": "messageName", "data": {}} //emit即為發出的事件名,用于區分不同的消息 }; 另外還有onclose、onerror,分別是在鏈接關閉和出錯時觸發。 //基本上常用的就上面幾個了,是不是非一般的簡單? });

                    服務端層面,不用害怕,事情也遠沒有那么復雜。這些文檔也許可以幫助到你:LayIM 接入案例/教程大集錦,含Node.js/Java/.NET/PHP

                    事件監聽

                    方法:layim.on(event, callback)
                    用于LayIM事件監聽。接受兩個參數。第一個參數event即事件名,第二個參數callback即事件回調。

                    ready事件

                    事件名:ready,用于監聽LayIM初始化就緒。由于主面板的渲染,需建立在init接口請求完畢的基礎上,而一些操作必須等到主面板渲染完畢后才能操作,所以這個時候就可以放入ready事件的回調體中來執行。其回調接受一個object類型的參數,攜帶一些基礎配置信息、我的用戶信息、好友/群列表信息、本地數據庫信息等,調用方式:

                    layim.on('ready', function(options){
                      console.log(options);
                      //do something
                    });
                    //注意:以下情況不會觸發 ready事件,即代碼無需寫在ready里面
                    * 簡約模式(即brief: true時)不會觸發該事件
                    * init直接賦值mine、friend的情況下(只有設置了url才會執行 ready 事件)
                          
                    監聽在線狀態切換

                    事件名:online,看到主面板你的昵稱后的icon么,沒錯,就是它。當前支持“在線”、“隱身”兩種狀態切換。分別以online和hide的string類型的值傳遞給回調參數。如:

                    layim.on('online', function(status){
                      console.log(status); //獲得online或者hide
                      
                      //此時,你就可以通過Ajax將這個狀態值記錄到數據庫中了。
                      //服務端接口需自寫。
                    });     
                          
                    監聽修改簽名

                    事件名:sign
                    當主面板的簽名被改動后觸發,并返回新的簽名

                    layim.on('sign', function(value){
                      console.log(value); //獲得新的簽名
                      
                      //此時,你就可以通過Ajax將新的簽名同步到數據庫中了。
                    });     
                          
                    監聽更換背景皮膚

                    事件名:setSkin
                    當點擊更換背景皮膚時觸發,返回特定目錄下的圖片文件名和src路徑

                    layim.on('setSkin', function(filename, src){
                      console.log(filename); //獲得文件名,如:1.jpg
                      console.log(src); //獲得背景路徑,如:http://res.layui.com/layui/src/css/modules/layim/skin/1.jpg
                    });     
                          
                    監聽發送的消息

                    事件名:sendMessage,每當你發送一個消息,都可以通過該事件監聽到。回調參數接受一個object類型的值,攜帶發送的聊天信息。如:

                    layim.on('sendMessage', function(res){
                      var mine = res.mine; //包含我發送的消息及我的信息
                    
                    //mine的結構如下:
                    {
                      avatar: "avatar.jpg" //我的頭像
                      ,content: "你好嗎" //消息內容
                      ,id: "100000" //我的id
                      ,mine: true //是否我發送的消息
                      ,username: "紙飛機" //我的昵稱
                    }
                    var to = res.to; //對方的信息
                    //to的結構如下:
                    {
                      avatar: "avatar.jpg"
                      ,id: "100001"
                      ,name: "賢心"
                      ,sign: "這些都是測試數據,實際使用請嚴格按照該格式返回"
                      ,type: "friend" //聊天類型,一般分friend和group兩種,group即群聊
                      ,username: "賢心"
                    }
                    //監聽到上述消息后,就可以輕松地發送socket了,如: socket.send(JSON.stringify({ type: 'chatMessage' //隨便定義,用于在服務端區分消息類型 ,data: res })); });
                    監聽接受的消息

                    事件的監聽并非layim提供,而是WebSocket提供。
                    檢測到WebSocket事件后,執行layim的內置方法:layim.getMessage(options)
                    即可顯示消息到聊天面板(如果消息所指定的聊天面板沒有打開,則會進入本地的消息隊列中,直到指定的聊天面板被打開,方可顯示。),這是一個對你有用的例子:

                    //監聽收到的聊天消息,假設你服務端emit的事件名為:chatMessage
                    socket.onmessage = function(res){
                      res = JSON.parse(res);
                      if(res.emit === 'chatMessage'){
                        layim.getMessage(res.data); //res.data即你發送消息傳遞的數據(閱讀:監聽發送的消息)
                      }
                    };
                     
                    //如果是來自于用戶的聊天消息,它必須接受以下字段
                    
                    layim.getMessage({
                      username: "紙飛機" //消息來源用戶名
                      ,avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1" //消息來源用戶頭像
                      ,id: "100000" //消息的來源ID(如果是私聊,則是用戶id,如果是群聊,則是群組id)
                      ,type: "friend" //聊天窗口來源類型,從發送消息傳遞的to里面獲取
                      ,content: "嗨,你好!本消息系離線消息。" //消息內容
                      ,cid: 0 //消息id,可不傳。除非你要對消息進行一些操作(如撤回)
                      ,mine: false //是否我發送的消息,如果為true,則會顯示在右方
                      ,fromid: "100000" //消息的發送者id(比如群組中的某個消息發送者),可用于自動解決瀏覽器多窗口時的一些問題
                      ,timestamp: 1467475443306 //服務端時間戳毫秒數。注意:如果你返回的是標準的 unix 時間戳,記得要 *1000
                    });
                    
                    //如果是來自于系統的聊天面板的消息
                    layim.getMessage({
                      system: true //系統消息
                      ,id: 1111111 //聊天窗口ID
                      ,type: "friend" //聊天窗口類型
                      ,content: '對方已掉線'
                    });
                    
                    監聽查看群員

                    事件名:members,在群聊面板中查看全部成員時觸發,該事件返回獲取群員接口(即layim.config中的members)的response信息。

                    layim.on('members', function(data){
                      console.log(data);
                    });
                          
                    監聽聊天窗口的切換

                    事件名:chatChange,坦白而言,似乎沒什么卵用。不過有總比沒有好。該事件返回一個object類型的參數,攜帶當前聊天面板的容器、基礎信息等。

                    layim.on('chatChange', function(obj){
                      console.log(obj);
                    });
                          
                    自定義一個聊天窗口

                    方法名:layim.chat(options),是否似曾相識,沒錯,我們見過文檔最開始的“客服姐姐”用的就是該方法。它允許你自定義任意模式的聊天窗口,先看例子吧:

                    //自定義聊天窗口
                    
                    layim.chat({
                      name: '張三' //名稱
                      ,type: 'friend' //聊天類型
                      ,avatar: 'http://tp1.sinaimg.cn/5619439268/180/40030060651/1' //頭像
                      ,id: 11111 //好友id
                    })
                     
                    //自定義客服窗口
                    layim.config({
                      brief: true //簡約模式,不顯示主面板
                    }).chat({
                      name: '在線客服二' //名稱
                      ,type: 'friend' //聊天類型
                      ,avatar: 'http://tp1.sinaimg.cn/5619439268/180/40030060651/1' //頭像
                      ,id: -2 //定義唯一的id方便你處理信息
                    });
                    layim.setChatMin(); //收縮聊天面板
                    
                    //自定義群聊(對于想搞一個臨時性的房間,貌似是挺有意思的)
                    layim.chat({
                      name: 'LayIM暢聊'
                      ,type: 'group' //群組類型
                      ,avatar: 'http://tp2.sinaimg.cn/5488749285/50/5719808192/1'
                      ,id: 10000000 //定義唯一的id方便你處理信息
                      ,members: 123 //成員數,不好獲取的話,可以設置為0
                    });
                    

                    該方法結合brief: true(簡約模式),可以免去較為復雜的數據配置。輕量地建立一個聊天面板。擁有較大的平臺實用性。可以預見的是,它應該會成為LayIM一個露臉率最高的存在。想象一下吧,對你而言是否如此?

                    初始最小化聊天界面

                    方法名:layim.setChatMin(),如果你在初始的狀態下不想展開聊天面板(譬如懸浮的在線客服),那么該方法會派上用場,使用很簡單,就不過多啰嗦了。

                    layim.setChatMin();
                    更新當前會話狀態

                    方法名:layim.setChatStatus(str),可用于顯示:對方輸入狀態、在線離線狀態等,如:

                    //每次窗口打開或切換,即更新對方的狀態
                    layim.on('chatChange', function(res){
                      var type = res.data.type;
                      if(type === 'friend'){
                        layim.setChatStatus('<span style="color:#FF5722;">在線</span>'); //模擬標注好友在線狀態
                      } else if(type === 'group'){
                        //模擬系統消息
                        layim.getMessage({
                          system: true //系統消息
                          ,id: 111111111
                          ,type: "group"
                          ,content: '賢心加入群聊'
                        });
                      }
                    });
                          
                    彈出添加面板

                    方法名:layim.add(data)
                    執行該方法將彈出一個我們內置的添加面板,可以幫助你完成:申請添加好友、申請添加群。參數格式如下:

                    layim.add({
                      type: 'friend' //friend:申請加好友、group:申請加群
                      ,username: 'xxx' //好友昵稱,若申請加群,參數為:groupname
                      ,avatar: 'a.jpg' //頭像
                      ,submit: function(group, remark, index){ //一般在此執行Ajax和WS,以通知對方
                        console.log(group); //獲取選擇的好友分組ID,若為添加群,則不返回值
                        console.log(remark); //獲取附加信息
                        layer.close(index); //關閉改面板
                      }
                    });
                          
                    好友分組面板

                    方法名:layim.setFriendGroup(data)
                    執行該方法將彈出一個好友分組面板,以完成將好友追加到主面板的操作:

                    layim.setFriendGroup({
                      type: 'friend'
                      ,username: 'xxx' //好友昵稱,若申請加群,參數為:groupname
                      ,avatar: 'a.jpg' //頭像
                      ,group: layim.cache().friend //獲取好友列表數據
                      ,submit: function(group, index){
                        //一般在此執行Ajax和WS,以通知對方已經同意申請
                        //……
                        
                        //同意后,將好友追加到主面板
                        layim.addList(data); //見下文
                      }
                    });
                          
                    添加好友/群到主面板

                    方法名:layim.addList(options),當你的WebSocket監聽到有好友或者群新增時,需讓LayIM的主面板同步添加的信息,可用該方法。先看看例子:

                    layim.on('ready', function(res){
                      
                      
                      //監聽添加列表的socket事件,假設你服務端emit的事件名為:addList
                      socket.onmessage = function(res){
                        if(res.emit === 'addList'){
                          layim.addList(res.data); //如果是在iframe頁,如LayIM設定的add面板,則為 parent.layui.layim.addList(data);
                        }
                      };
                      
                      //需要特別注意的是回調返回的res
                      
                      //如果添加的是好友,res的結構必須是這樣的
                    
                    {
                      type: 'friend' //列表類型,只支持friend和group兩種
                      ,avatar: "a.jpg" //好友頭像
                      ,username: '沖田杏梨' //好友昵稱
                      ,groupid: 2 //所在的分組id
                      ,id: "1233333312121212" //好友id
                      ,sign: "本人沖田杏梨將結束AV女優的工作" //好友簽名
                    }
                    
                    //如果添加的是群組,res的結構必須是這樣的
                    {
                      type: 'group' //列表類型,只支持friend和group兩種
                      ,avatar: "a.jpg" //群組頭像
                      ,groupname: 'Angular開發' //群組名稱
                      ,id: "12333333" //群組id
                    }
                    
                    });
                    從主面板移除好友/群

                    方法名:layim.removeList(options)
                    當你的WebSocket監聽到有好友或者群刪除時,需讓LayIM的主面板同步刪除的信息,可用該方法。它的調用非常簡單,只需要傳兩個key:

                    layim.removeList({
                      type: 'friend' //或者group
                      ,id: 1238668 //好友或者群組ID
                    });
                    //如果是在iframe頁,如LayIM設定的add面板,則為:
                    parent.layui.layim.removeList({
                      type: 'friend' //或者group
                      ,id: 1238668 //好友或者群組ID
                    });
                          
                    實時更新好友列表離線狀態
                    獲取cache數據

                    方法名:layim.cache(),獲取LayIM的cache信息,返回的信息結構和ready事件獲得的信息一樣,不同的是,改方法始終會獲取到最新的cache。

                    //輸出的信息不妨在你的Chrome控制臺看看(需在引有LayIM的頁面中),在此就不做列舉了
                    console.log(layim.cache()) 
                    刪除本地數據
                    var cache =  layui.layim.cache();
                    var local = layui.data('layim')[cache.mine.id]; //獲取當前用戶本地數據
                     
                    //這里以刪除本地聊天記錄為例
                    delete local.chatlog;
                     
                    //向localStorage同步數據
                    layui.data('layim', {
                      key: cache.mine.id
                      ,value: local
                    });
                          
                    關于版權

                    LayIM目前并非開源產品,因此如果你是通過官網捐贈渠道獲得LayIM,你將成為LayIM的終身會員,并可以將LayIM應用在任意正規平臺。如果你通過非捐贈渠道獲得LayIM,我們并不會進行過多追究,但是請勿對 LayIM 本身二次出售。版權最終解釋權為:layui.com 所有

                    layui - 用心與你溝通

                    亚洲图色