webim【LayIM】开发者文档
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頁面在根目錄，那么一個最直接的例子是：
通過上述方式，便可成功加載layim。當然，你僅僅只是看到了一個"客服姐姐"的聊天面板，這等同于：Hello World!
向“客服姐姐”問好后就忘了它吧，這份文檔才剛剛開始。
初始化配置
一個你必須認識的方法：layim.config(options)
控制著許多重要的配置，基本上一個完整LayIM實例的構成由它而開始，它允許你自由設定以下參數：
上面的參數中，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)
即可顯示消息到聊天面板（如果消息所指定的聊天面板沒有打開，則會進入本地的消息隊列中，直到指定的聊天面板被打開，方可顯示。），這是一個對你有用的例子：
監聽查看群員
事件名：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的事件名為：addListsocket.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 - 用心與你溝通
本文鏈接：webim框架【layim】一個純前端webim插件http://www.51xuediannao.com/js/jquery/layim.html
總結
以上是生活随笔為你收集整理的webim【LayIM】开发者文档的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mac 如何恢复python_mac p
- 下一篇： AOJ-AHU-OJ-592 神奇的叶子