知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    webim框架【layim】一個純前端webim插件

    作者:佳明媽 來源:layim 2016-12-02 人氣:
    webim框架【layim】一個純前端webim插件,說純前端也是有點扯淡,數據存儲還是要服務支持的,layim目前是Web IM應用解決方案,致力于通過豐富的IM交互,及高度開放的接口,讓其自由接入

    webim框架【layim】一個純前端webim插件,說純前端也是有點扯淡,數據存儲還是要服務支持的,layim目前是Web IM應用解決方案,致力于通過豐富的IM交互,及高度開放的接口,讓其自由接入到你的Web系統。

    webim框架【layim】功能介紹

    layim是Web IM應用"非云端"解決方案

    layim目前是Web IM應用"非云端"解決方案,致力于通過豐富的IM交互,及高度開放的接口,讓其自由接入到你的Web系統。你可以通過付費的方式,獲得LayIM的全部代碼。當然,對layui具有一定貢獻的親們,也可以無需付費直接獲得LayIM開發版。資金來源是對LayIM可持續性發展的唯一保障,如果你對此反感,可無視 layim的存在,或在Fly社區反饋建議。

    layim涵蓋功能,20項以上功能

    在線狀態設置、好友分組展示、群組、歷史會話、右鍵菜單操作、搜索好友/群組、換膚、關于、主面板最小化/展開狀態記錄、私聊面板、群聊面板、多聊天切換、消息提醒、表情、圖片上傳、文件上傳、聊天記錄及其本地化存儲、快捷鍵發送設置、聊天面板最小化、在線客服/自定義聊天模式 

    webim框架【layim】功能模塊
    webim框架【layim】私聊
    webim框架【layim】群聊功能
    webim框架【layim】在線客服
    webim框架【layim】聊天切換功能
    webim框架【layim】換膚功能
    webim框架【layim】面板操作演示

    webim框架layim v2.0.92更新日志

    # v2.0.92(2016.11.29)
    * 將Layui升級到 1.0.5
    * 修復上個版本導致的查看群員拉動滾動條錯位的bug
    
    # v2.0.91(2016.11.10)
    * 將Layui升級到 1.0.3
    * 最小化聊天面板樣式細節調整
    * 最小化主面板也允許通過頭像拖拽
    * 聊天區域查看大圖由單擊事件改為雙擊事件查看
    
    # v2.0.9(2016.10.14)
    * 基于 Layui 1.0.0
    * 增加minRight,用戶控制聊天面板最小化時、及新消息提示層的相對right的px坐標
    * 小幅度性能優化
    * 修復新消息提示層,在改變窗口尺寸的情況下,未能始終在可視范圍的最底部
    * 如果uploadImage未設定,則不在聊天面板顯示上傳圖片
    * 最小化的聊天面板可通過頭像拖拽
    * 聊天記錄列表由最多50條記錄數改為最多20條
    * 工具欄中圖片、文件移入設為手型
    
    # v2.0.85(2016.09.01)
    * 增加min基礎參數,用于設定主面板是否在頁面打開時,始終最小化展現
    * 優化聊天內容面板的時間展現,改為24小時制,并修復了部分瀏覽器不兼容的bug。
    * 修復“臨時會話”的顯示問題。
    * 滾動條美化
    
    # v2.0.81 - v2.0.84(2016.08.12)- 進一步版本穩定
    * 修復如果設置isfriend為true,初始化面板未定位到群組列表的bug
    * 修復如果設置isfriend為true,點擊搜索的關閉,仍然顯示了好友面板的bug
    * 增加isfriend基礎參數,用于控制是否顯示好友
    * 新增一套內置的皮膚背景
    * 修復最小化后,本地數據被清空的bug
    * 緊急修復多列表會話時,鼠標移入導致列表樣式異常的bug
    * 樣式微調
    
    # v2.0.8(2016.07.18) - 階段性穩定版
    * 修復多帳號使用同一個瀏覽器存在本地數據(localStorage)共享的巨大BUG。
    * 增加右鍵面板清空歷史會話操作(后續會陸續增加各種右邊面板的菜單)
    * 增加發送聊天的字數限制(可通過maxLength設置,默認3000)
    * 如果好友/群未在主面板列表,則同樣可以彈出聊天面板(以便于做臨時會話)
    * 對查看更多歷史記錄的url,新增一個type參數,用于區分好友或群組等聊天類型。
    * 修復打開聊天面板時,所有層被強制垂直水平居中的bug(其實之前是特意這樣,但現在看來的確不合理)
    * 修復執行addList時,如果列表已經存在對應的好友卻仍然成功插入的bug
    * 默認不再顯示群組成員人數,點擊下拉查看群員時才顯示。群組列表對應的接口中的members也無需返回
    * 對主面板的好友和群列表所在的元素增加id,以便控制元素來做一些自定義操作(如頭像置灰)
    
    # v2.0.71(2016.07.09)
    * 修復與獨立組件layer的沖突
    
    # v2.0.7(2016.07.06)
    * 增加主面板“添加好友、群組”的入口
    * 增加layim.config right參數,用于設定主面板右偏移量。該參數可避免遮蓋你頁面右下角的bar。
    * 簽名的key由remark改為sign
    * 修復客服模式未存儲到本地聊天記錄的bug
    * 修復初始加載為隱身狀態時,不能切換其他在線狀態的bug
    * 如果uploadFile沒配置,這不會在聊天面板顯示文件上傳的icon
    * 客服模式只能最小化聊天窗口,而不能關閉窗口
    * 如果未開啟聊天記錄,點擊聊天內容頂部的“查看更多”,會出現提示。
    * 默認不再把自動添加到群成員列表中
    * 優化多處細節
    
    # v2.0.6(2016.07.02)
    * 修復在拖動頁面滾動條時,點擊彈出表情框、群員框錯位的bug。
    * 修復WebSocket鏈接異常時,執行addList出現js報錯的bug。
    * 修復連續上傳圖片,發送后圖片未能正確解析的bug。
    * 修復搜索群員無法點擊的bug。
    
    # v2.0.5(2016.06.30)
    * 增加最近聊天記錄的本地化存儲
    * 增加傳文件功能
    * 增加mine配置,用于設定當前用戶信息。如果設定了該參數,則優先讀取該參數,如果沒有,這讀取init返回的mine信息。
    * 增加聊天內容的字符解析方法 layim.content(content),一般用于“更多聊天記錄”的內容解析。
    * 修復點擊搜索列表,定位了錯誤的聊天對象的bug
    * 修復打開別的聊天窗口后,消息通知的層被關閉的bug
    * 修改聊天區域圖片最大顯示寬度為50%(之前100%)
    * 修復拉動群員列表滾動條,群員面板被關閉的bug
    * 修復簡約模式(brief: true)開啟時,當前無我的身份數據的bug(現在設置mine即可)
    * 修復接受的聊天內容為全英文和數字時,樣式未換行的bug
    * 修復IE系列瀏覽器上傳正確的圖片后,觸發change事件,導致仍然出現"圖片格式不對"的錯誤提示。
    * 修復上傳相對路徑的圖片時,未能正確解析。
    * 修復選擇完表情沒有獲取焦點導致無法快捷鍵發送的小小bug
    * 歷史會話最多只存儲最新的50條
    
    # v2.0.4(2016.06.24)
    * 增加強大的消息提醒功能
    * 修復默認皮膚的聊天面板過于透明的問題
    * 修復錯誤提示中的單詞“DATE”糾正為“DATA”
    * 完善錯誤拋出機制
    
    # v2.0.3(2016.06.21)
    * 增加移除好友或者群的方法:layim.removeList(options)
    * 增加主面板收縮后的自定義文字參數
    * 修復好友為空時,增加好友,沒有移除空數據提示的元素
    * 修復拖動群聊面板時,好友下拉框脫節的bug
    * 修復圖片上傳緩存問題
    
    # v2.0.2(2016.06.21)
    * 排除與Bootstrap的樣式沖突
    * 優化部分樣式
    * 默認不加載socket模塊,需要用到時,在外部layui.use(['layim', 'socket'], callback)來加載
    * 修復接口返回的json未能解析成object的bug
    * 圖片上傳支持https的路徑
    * layui升級到0.0.7

    webim【LayIM】開發者文檔

    在WebIM似乎已被打入冷宮的今天,LayIM正試圖重新為網頁帶來一些社交想象。作為一款Web即時通訊前端解決方案(服務端需自寫),LayIM提供了全方位接口支撐,竭力以最靈便的方式接入到你的實際項目中。并始終堅持極簡的體驗,拉近你的用戶在web間的距離。我們也將推出LayIM在Node.js端的集成方案,以供服務端層面的參考。

    LayIM兼容除IE6/7以外的所有瀏覽器,如果你的網站仍需兼容ie6/7,那么強烈建議你說服你的老板或者客戶。

    模塊加載名稱:layim,官網地址:layim.layui.com

    開始使用

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

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


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

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>LayIM測試</title>
    <link rel="stylesheet" href="layui.css" media="all">
    </head>
    <body>
    <script src="layui.js"></script>
    <script>
    layui.use('layim', function(layim){
      //先來個客服模式壓壓精
      layim.config({
        brief: true //是否簡約模式(如果true則不顯示主面板)
      }).chat({
        name: '客服姐姐'
        ,type: 'kefu'
        ,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: {
          url: '' //接口地址(返回的數據格式見下文)
          ,type: 'get' //默認get,一般可不填
          ,data: {} //額外參數
        }
        
        //配置我的信息(如果設定了該參數,則優先讀取該參數,如果沒有,這讀取init返回的mine信息)
        ,mine: {
          "username": "LayIM體驗者" //我的昵稱
          ,"id": "100000123" //我的ID
          ,"status": "online" //在線狀態 online:在線、hide:隱身
          ,"sign": "在深邃的編碼世界,做一枚輕盈的紙飛機" //我的簽名
          ,"avatar": "a.jpg" //我的頭像
        }
        //獲取群員接口
        ,members: {
          url: '' //接口地址(返回的數據格式見下文)
          ,type: 'get' //默認get,一般可不填
          ,data: {} //額外參數
        }
        
        //上傳圖片接口(返回的數據格式見下文)
        ,uploadImage: {
          url: '' //接口地址(返回的數據格式見下文)
          ,type: 'post' //默認post
        } 
        
        //上傳文件接口(返回的數據格式見下文)
        ,uploadFile: {
          url: '' //接口地址(返回的數據格式見下文)
          ,type: 'post' //默認post
        } 
        
        //增加皮膚選擇,如果不想增加,可以剔除該項
        ,skin: [ 
          'http://xxx.com/skin.jpg', 
          …
        ] 
        
        ,brief: false //是否簡約模式(默認false,如果只用到在線客服,且不想顯示主面板,可以設置 true)
        ,title: '我的LayIM' //主面板最小化后顯示的名稱
        ,min: false //用于設定主面板是否在頁面打開時,始終最小化展現。默認false,即記錄上次展開狀態。
        ,minRight: null //【默認不開啟】用戶控制聊天面板最小化時、及新消息提示層的相對right的px坐標,如:minRight: '200px'
        ,maxLength: 3000 //最長發送的字符長度,默認3000
        ,isfriend: true //是否開啟好友(默認true,即開啟)
        ,isgroup: true //是否開啟群組(默認true,即開啟)
        ,right: '0px' //默認0px,用于設定主面板右偏移量。該參數可避免遮蓋你頁面右下角已經的bar。
        ,chatLog: '/chat/log/' //聊天記錄地址(如果未填則不顯示)
        ,find: '/find/' //查找好友/群的地址(如果未填則不顯示)
        ,copyright: false //是否授權,如果通過官網捐贈獲得LayIM,此處可填true
      });
    });      
          

    上面的參數中,brief、skin、min、isgroup、chatLog、copyright等參數都是非必填項,本身具有默認值。而對于init(初始化接口)、members(查看群員接口)、uploadImage(上傳圖片接口)、uploadFile(上傳文件接口)所返回的數據格式,下面將逐一展示

    init數據格式

    通過layim.config來設定init參數可獲得我的信息、好友列表、群組列表,假設你進行了下述配置

    init: {
      url: '/api/im/getList/'
    }    
          

    那么該接口所返回的信息(response)應該嚴格按照下述的JSON格式:

    {
      "code": 0 //0表示成功,其它表示失敗
      ,"msg": "" //失敗信息
      ,"data": {
      
        //我的信息(如果layim.config已經配置了mine,則該返回的信息無效)
        "mine": {
          "username": "紙飛機" //我的昵稱
          ,"id": "100000" //我的ID
          ,"status": "online" //在線狀態 online:在線、hide:隱身
          ,"sign": "在深邃的編碼世界,做一枚輕盈的紙飛機" //我的簽名
          ,"avatar": "a.jpg" //我的頭像
        }
        
        //好友列表
        ,"friend": [{
          "groupname": "前端碼屌" //好友分組名
          ,"id": 1 //分組ID
          ,"online": 2 //在線數量,可以不傳
          ,"list": [{ //分組下的好友列表
            "username": "賢心" //好友昵稱
            ,"id": "100001" //好友ID
            ,"avatar": "a.jpg" //好友頭像
            ,"sign": "這些都是測試數據,實際使用請嚴格按照該格式返回" //好友簽名
          }, …… ]
        }, …… ]
        
        //群組列表
        ,"group": [{
          "groupname": "前端群" //群組名
          ,"id": "101" //群組ID
          ,"avatar": "a.jpg" //群組頭像
        }, …… ]
      }
    }
          

    Demo:getList.json

    members數據格式

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

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

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

    {
      "code": 0 //0表示成功,其它表示失敗
      ,"msg": "" //失敗信息
      ,"data": {
        "owner": { 
          "username": "賢心" //群主昵稱
          ,"id": "100001" //群主ID
          ,"avatar": "http://tp1.sinaimg.cn/1571889140/180/40030060651/1" //群主頭像
          ,"sign": "這些都是測試數據,實際使用請嚴格按照該格式返回" //群主簽名
        }
        ,"list": [{
          "username": "馬小云" //群員昵稱
          ,"id": "168168" //群員id
          ,"avatar": "http://tp4.sinaimg.cn/2145291155/180/5601307179/1" //群員頭像
          ,"sign": "讓天下沒有難寫的代碼" //群員簽名
        }, …… ]
      }
    }      
          

    Demo:getMembers.json

    uploadImage數據格式

    通過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
      }
    }      
          

    uploadFile數據格式

    通過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' //文件名
      }
    }      
          

    接入WebSocket

    萬萬不可畏懼它的存在,除非你真的想用Ajax輪詢去解決消息I/O。WebSocket會使得你的消息接受和傳遞變得極其輕松,最重要的一點是,性能卓絕。WebSocket的建立非常簡單:

    layui.use('layim', function(layim){
      
      //建立WebSocket通訊
      //注意:也可以直接采用 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,分別是在鏈接關閉和出錯時觸發。
      //基本上常用的就上面幾個了,是不是非一般的簡單?
    });

    服務端層面,不用害怕,事情也遠沒有那么復雜。我們會抽空給出Node.js的官方集成案例。但對于其它服務端語言,以下已經成功接入LayIM的案例對你也許會有一定幫助:

    Java:LayIM接入案例Java篇,含源碼+圖文
    .NET:LayIM接入案例.NET篇,含源碼和Gif
    PHP:LayIM接入案例PHP篇 源碼+Demo,強烈建議采用 Workerman
    Python:等Python案例分享,暫時可閱讀 http://www.jb51.net/article/51516.htm
          

    你的服務端語言沒有列舉在上面?額。。。那一定是你的語言太冷門了,自己去網搜資料吧。

    查看更多聊天記錄

    為了避免聯調的復雜性,我們并不內置更多聊天記錄的展示。而是彈出一個聊天記錄的layer窗口,這意味著你可以隨意發揮聊天記錄的頁面。通過layim.config配置chatLog來指向聊天記錄的URL。假設你進行了下述設定:

    layim.config({
      chatLog: '/chat/log/' //聊天記錄地址,如果未填, 則不在聊天面板顯示該icon
    });      
          

    那么,我們會在chatLog所對應的URL后面動態追加當前聊天窗口的ID(即好友或群組ID)和類型,如:/chat/log?id=123&type=friend

    請注意:當你自建一個更多聊天記錄的動態頁面時,我們建議您通過Ajax來獲取聊天記錄,因為LayIM發送的內容,可能包含鏈接、圖片等多媒體信息,它們需要 parent.layui.layim.content(content)方法來解析

    查找好友/群

    同樣為了避免聯調的復雜性,我們并不內置查找好友/群功能。而是彈出一個layer窗口,這意味著你可以隨意發揮該查找頁面。通過layim.config配置find來指向查找的頁面URL。如:

    layim.config({
      find: '/find/all/' //查找好友/群地址。如果未填,不不在主面板顯示該icon
    });      
          

    事件監聽

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

    ready事件

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

    layim.on('ready', function(options){
      console.log(options);
      //do something
    });
    //注意:簡約模式(即brief: true時)不會觸發該事件
          

    監聽在線狀態切換

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

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

    監聽發送的消息

    事件名: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({
        type: 'chatMessage' //隨便定義,用于在服務端區分消息類型
        ,data: res
      }); 
      
    });
    

    監聽接受的消息

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

    //監聽收到的聊天消息,假設你服務端emit的事件名為:chatMessage
    socket.onmessage = function(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: "嗨,你好!本消息系離線消息。" //消息內容
      ,mine: false //是否我發送的消息,如果為true,則會顯示在右方
      ,timestamp: 1467475443306 //服務端動態時間戳
    });
    

    監聽查看群員

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

    layim.on('members', function(data){
      console.log(data);
    });
          

    監聽聊天窗口的切換

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

    layim.on('chatChange', function(data){
      console.log(data);
    });
          

    自定義一個聊天窗口

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

    //自定義在線客服
    layim.config({
      brief: true //簡約模式,不顯示主面板
    }).chat({
      name: '在線客服一' //名稱
      ,type: 'kefu' //聊天類型
      ,avatar: 'http://tp1.sinaimg.cn/5619439268/180/40030060651/1' //頭像
      ,id: -1 //定義唯一的id方便你處理信息
    }).chat({
      name: '在線客服二' //名稱
      ,type: 'kefu' //聊天類型
      ,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.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
    });
          

    獲取列表元素

    LayIM的好友/群的列表所在元素,附帶唯一的id,由固定前綴“layim-”+動態的type和id字符拼接而成,如id="layim-friend10000",通過查找id選擇器獲得該元素后,你就可以對其進行頭像置灰等處理了。

    獲取cache數據

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

    //輸出的信息不妨在你的Chrome控制臺看看(需在引有LayIM的頁面中),在此就不做列舉了
    console.log(layim.cache()) 

    無需接口的功能

    LayIM有許多功能是無需接口來處理的,在此特別列舉幾個比較常見的:

    #歷史會話:LayIM會自動記錄你每次打開的聊天窗口到本地數據庫(localStorage)、所以這一塊無需通過接口去渲染。
    #主面板的展開狀態#好友分組的展開狀態#皮膚的選擇:同樣都會記錄到本地數據庫
    #搜索好友/群組:LayIM內部會按照關鍵字檢索出搜索結果。
    #消息提醒:LayIM內置強大的消息提醒機制,你只需要監聽消息,并獲取消息,LayIM將為您處理好一切。
    #聊天記錄:LayIM為您的每個對話存儲最新的50條記錄到本地,當你下次打開時,仍然會初始化渲染這些內容。但我們仍然建議你的服務端也存儲一份記錄,因為“查看更多聊天記錄”已經不再屬于LayIM管轄
    #更多亮點:潛藏在LayIM的每一處細節。

    關于版權

    LayIM目前并非開源產品(以后也許會開源),因此如果你是通過捐贈渠道獲得LayIM,可以通過layer.config設定copyright: true來剔除LayIM主面板的關于信息,這就表示你已經過授權。當然,如果你想友好地保留,我們也是非常歡迎的。如果你通過非捐贈渠道獲得LayIM,我們并不會進行追究,但是請勿進行銷售,這是唯一的紅線吧

    另外,再次強調一點:LayIM雖然并不開源,但layui是完全免費且開源的。LayIM是我們為數不多的接受收費的產品。因為一定資金的來源,是對我們整個開發流可持續發展的有力保障。仍然是那句話,如果你對LayIM的“收費”表示厭惡,請忽視它的存在。即便是沒有一個人為LayIM買單,我們仍然會堅持初衷,即:通過極簡的體驗,拉近你的用戶在web間的距離。

    LayIM的作者是賢心一人,版權最終解釋權歸他所有。

    Layui - 用心與你溝通

    layim授權與下載

    layim授權頁面http://layim.layui.com/?from=lanren

    ↓ 查看全文

    webim框架【layim】一個純前端webim插件由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    webim框架【layim】一個純前端webim插件-最新評論

    福利彩票排列7走势图