webim【LayIM】开发者文档
webim【LayIM】開發(fā)者文檔
在WebIM似乎已被打入冷宮的今天，LayIM正試圖重新為網(wǎng)頁帶來一些社交想象。作為一款Web即時通訊前端解決方案（服務(wù)端需自寫），LayIM提供了全方位接口支撐，竭力以最靈便的方式接入到你的實際項目中。并始終堅持極簡的體驗，拉近你的用戶在web間的距離。我們也將推出LayIM在Node.js端的集成方案，以供服務(wù)端層面的參考。
LayIM兼容除IE6/7以外的所有瀏覽器，如果你的網(wǎng)站仍需兼容ie6/7，那么強(qiáng)烈建議你說服你的老板或者客戶。
模塊加載名稱：layim，官網(wǎng)地址：layim.layui.com
開始使用
LayIM基于layui模塊體系，因此你獲得的其實是一個包含LayIM的layui框架，不同的是，開源版的layui并不包含LayIM。捐贈后，將您獲得的壓縮包解壓，將layui整個目錄文件放入你的項目后，不用再對其代碼做任何修改（方便下次升級）。然后您只需引入下述兩個文件即可。
./layui/css/layui.css ./layui/layui.js
假如你將layui放入你的/static/目錄中，并且你的html頁面在根目錄，那么一個最直接的例子是：
通過上述方式，便可成功加載layim。當(dāng)然，你僅僅只是看到了一個"客服姐姐"的聊天面板，這等同于：Hello World!
向“客服姐姐”問好后就忘了它吧，這份文檔才剛剛開始。
初始化配置
一個你必須認(rèn)識的方法：layim.config(options)
控制著許多重要的配置，基本上一個完整LayIM實例的構(gòu)成由它而開始，它允許你自由設(shè)定以下參數(shù)：
上面的參數(shù)中，brief、skin、min、isgroup、chatLog、copyright等參數(shù)都是非必填項，本身具有默認(rèn)值。而對于init（初始化接口）、members（查看群員接口）、uploadImage（上傳圖片接口）、uploadFile（上傳文件接口）所返回的數(shù)據(jù)格式，下面將逐一展示
init數(shù)據(jù)格式
通過layim.config來設(shè)定init參數(shù)可獲得我的信息、好友列表、群組列表，假設(shè)你進(jìn)行了下述配置
init: {url: '/api/im/getList/' }那么該接口所返回的信息（response）應(yīng)該嚴(yán)格按照下述的JSON格式：
{"code": 0 //0表示成功，其它表示失敗,"msg": "" //失敗信息,"data": {//我的信息（如果layim.config已經(jīng)配置了mine，則該返回的信息無效）"mine": {"username": "紙飛機(jī)" //我的昵稱,"id": "100000" //我的ID,"status": "online" //在線狀態(tài) online：在線、hide：隱身,"sign": "在深邃的編碼世界，做一枚輕盈的紙飛機(jī)" //我的簽名,"avatar": "a.jpg" //我的頭像}//好友列表,"friend": [{"groupname": "前端碼屌" //好友分組名,"id": 1 //分組ID,"online": 2 //在線數(shù)量，可以不傳,"list": [{ //分組下的好友列表"username": "賢心" //好友昵稱,"id": "100001" //好友ID,"avatar": "a.jpg" //好友頭像,"sign": "這些都是測試數(shù)據(jù)，實際使用請嚴(yán)格按照該格式返回" //好友簽名}, …… ]}, …… ]//群組列表,"group": [{"groupname": "前端群" //群組名,"id": "101" //群組ID,"avatar": "a.jpg" //群組頭像}, …… ]} }Demo：getList.json
members數(shù)據(jù)格式
通過layim.config來設(shè)定members參數(shù)可獲取群員列表，假設(shè)你進(jìn)行了下述配置
,members: {url: ' '/api/im/getMembers/',data: {} }那么當(dāng)點擊群聊面板查看成員時，將會向members的url發(fā)送Ajax請求，并自動傳遞一個id參數(shù)（群組id）。該接口所返回的信息（response）應(yīng)該嚴(yán)格按照下述的JSON格式：
{"code": 0 //0表示成功，其它表示失敗,"msg": "" //失敗信息,"data": {"owner": { "username": "賢心" //群主昵稱,"id": "100001" //群主ID,"avatar": "http://tp1.sinaimg.cn/1571889140/180/40030060651/1" //群主頭像,"sign": "這些都是測試數(shù)據(jù)，實際使用請嚴(yán)格按照該格式返回" //群主簽名},"list": [{"username": "馬小云" //群員昵稱,"id": "168168" //群員id,"avatar": "http://tp4.sinaimg.cn/2145291155/180/5601307179/1" //群員頭像,"sign": "讓天下沒有難寫的代碼" //群員簽名}, …… ]} }Demo：getMembers.json
uploadImage數(shù)據(jù)格式
通過layim.config來設(shè)定uploadImage參數(shù)可進(jìn)行圖片上傳，假設(shè)你進(jìn)行了下述配置
,uploadImage: {url: '' } 那么當(dāng)點擊聊天面板上傳圖片時，將會向uploadImage的url發(fā)送HTTP請求，進(jìn)行圖片上傳。我們會給你傳遞一個name="file"的文件表單域，你接受即可。該接口所返回的信息（response）應(yīng)該嚴(yán)格按照下述的JSON格式：?
{"code": 0 //0表示成功，其它表示失敗,"msg": "" //失敗信息,"data": {"src": "http://cdn.xxx.com/upload/images/a.jpg" //圖片url} }uploadFile數(shù)據(jù)格式
通過layim.config來設(shè)定uploadImage參數(shù)可進(jìn)行文件上傳，事實上跟圖片上傳非常類似有木有？假設(shè)你進(jìn)行了下述配置
,uploadFile: {url: ' '' } 那么當(dāng)點擊聊天面板上傳文件時，將會向uploadFile的url發(fā)送HTTP請求，進(jìn)行文件上傳。我們會給你傳遞一個name="file"的文件表單域，你接受即可。該接口所返回的信息（response）應(yīng)該嚴(yán)格按照下述的JSON格式：?
{"code": 0 //0表示成功，其它表示失敗,"msg": "" //失敗信息,"data": {"src": "http://cdn.xxx.com/upload/file/LayIM.zip" //文件url,"name": 'LayIM.zip' //文件名} }接入WebSocket
萬萬不可畏懼它的存在，除非你真的想用Ajax輪詢?nèi)ソ鉀Q消息I/O。WebSocket會使得你的消息接受和傳遞變得極其輕松，最重要的一點是，性能卓絕。WebSocket的建立非常簡單：
layui.use('layim', function(layim){//建立WebSocket通訊//注意：也可以直接采用 socket.io的版本，下面是以原生WS為例var socket = new WebSocket('ws://localhost:8090');//發(fā)送一個消息socket.send('Hi Server, I am LayIM!');//更多情況下，一般是傳遞一個JSON socket.send(JSON.stringify({type: '' //隨便定義，用于在服務(wù)端區(qū)分消息類型,data: {} })); //連接成功時觸發(fā)socket.onopen = function(){socket.send('XXX連接成功'); };//監(jiān)聽收到的消息socket.onmessage = function(res){//res為接受到的值，如 {"emit": "messageName", "data": {}}//emit即為發(fā)出的事件名，用于區(qū)分不同的消息};另外還有onclose、onerror，分別是在鏈接關(guān)閉和出錯時觸發(fā)。//基本上常用的就上面幾個了，是不是非一般的簡單？ });服務(wù)端層面，不用害怕，事情也遠(yuǎn)沒有那么復(fù)雜。我們會抽空給出Node.js的官方集成案例。但對于其它服務(wù)端語言，以下已經(jīng)成功接入LayIM的案例對你也許會有一定幫助：
Java：LayIM接入案例Java篇，含源碼+圖文 .NET：LayIM接入案例.NET篇，含源碼和Gif PHP：LayIM接入案例PHP篇 源碼+Demo，強(qiáng)烈建議采用 Workerman Python：等Python案例分享，暫時可閱讀 http://www.jb51.net/article/51516.htm你的服務(wù)端語言沒有列舉在上面？額。。。那一定是你的語言太冷門了，自己去網(wǎng)搜資料吧。
查看更多聊天記錄
為了避免聯(lián)調(diào)的復(fù)雜性，我們并不內(nèi)置更多聊天記錄的展示。而是彈出一個聊天記錄的layer窗口，這意味著你可以隨意發(fā)揮聊天記錄的頁面。通過layim.config配置chatLog來指向聊天記錄的URL。假設(shè)你進(jìn)行了下述設(shè)定：
layim.config({chatLog: '/chat/log/' //聊天記錄地址，如果未填， 則不在聊天面板顯示該icon }); 那么，我們會在chatLog所對應(yīng)的URL后面動態(tài)追加當(dāng)前聊天窗口的ID（即好友或群組ID）和類型，如：/chat/log?id=123&type=friend
請注意：當(dāng)你自建一個更多聊天記錄的動態(tài)頁面時，我們建議您通過Ajax來獲取聊天記錄，因為LayIM發(fā)送的內(nèi)容，可能包含鏈接、圖片等多媒體信息，它們需要?parent.layui.layim.content(content)方法來解析
查找好友/群
同樣為了避免聯(lián)調(diào)的復(fù)雜性，我們并不內(nèi)置查找好友/群功能。而是彈出一個layer窗口，這意味著你可以隨意發(fā)揮該查找頁面。通過layim.config配置find來指向查找的頁面URL。如：
layim.config({find: '/find/all/' //查找好友/群地址。如果未填，不不在主面板顯示該icon });事件監(jiān)聽
方法：layim.on(event, callback)
用于LayIM事件監(jiān)聽。接受兩個參數(shù)。第一個參數(shù)event即事件名，第二個參數(shù)callback即事件回調(diào)。
ready事件
事件名：ready，用于監(jiān)聽LayIM初始化就緒。由于主面板的渲染，需建立在init接口請求完畢的基礎(chǔ)上，而一些操作必須等到主面板渲染完畢后才能操作，所以這個時候就可以放入ready事件的回調(diào)體中來執(zhí)行。其回調(diào)接受一個object類型的參數(shù)，攜帶一些基礎(chǔ)配置信息、我的用戶信息、好友/群列表信息、本地數(shù)據(jù)庫信息等，調(diào)用方式：
layim.on('ready', function(options){console.log(options);//do something }); //注意：簡約模式（即brief: true時）不會觸發(fā)該事件監(jiān)聽在線狀態(tài)切換
事件名：online，看到主面板你的昵稱后的icon么，沒錯，就是它。當(dāng)前支持“在線”、“隱身”兩種狀態(tài)切換。分別以online和hide的string類型的值傳遞給回調(diào)參數(shù)。如：
layim.on('online', function(status){console.log(status); //獲得online或者h(yuǎn)ide//此時，你就可以通過Ajax將這個狀態(tài)值記錄到數(shù)據(jù)庫中了。//服務(wù)端接口需自寫。 });監(jiān)聽發(fā)送的消息
事件名：sendMessage，每當(dāng)你發(fā)送一個消息，都可以通過該事件監(jiān)聽到。回調(diào)參數(shù)接受一個object類型的值，攜帶發(fā)送的聊天信息。如：
layim.on('sendMessage', function(res){var mine = res.mine; //包含我發(fā)送的消息及我的信息 //mine的結(jié)構(gòu)如下： {avatar: "avatar.jpg" //我的頭像,content: "你好嗎" //消息內(nèi)容,id: "100000" //我的id,mine: true //是否我發(fā)送的消息,username: "紙飛機(jī)" //我的昵稱 }var to = res.to; //對方的信息 //to的結(jié)構(gòu)如下： {avatar: "avatar.jpg",id: "100001",name: "賢心",sign: "這些都是測試數(shù)據(jù)，實際使用請嚴(yán)格按照該格式返回",type: "friend" //聊天類型，一般分friend和group兩種，group即群聊,username: "賢心" }//監(jiān)聽到上述消息后，就可以輕松地發(fā)送socket了，如：socket.send({type: 'chatMessage' //隨便定義，用于在服務(wù)端區(qū)分消息類型,data: res}); });監(jiān)聽接受的消息
事件的監(jiān)聽并非layim提供，而是WebSocket提供。
檢測到WebSocket事件后，執(zhí)行l(wèi)ayim的內(nèi)置方法：layim.getMessage(options)
即可顯示消息到聊天面板（如果消息所指定的聊天面板沒有打開，則會進(jìn)入本地的消息隊列中，直到指定的聊天面板被打開，方可顯示。），這是一個對你有用的例子：
監(jiān)聽查看群員
事件名：members，在群聊面板中查看全部成員時觸發(fā)，該事件返回獲取群員接口（即layim.config中的members）的response信息。
layim.on('members', function(data){console.log(data); });監(jiān)聽聊天窗口的切換
事件名：chatChange，坦白而言，似乎沒什么卵用。不過有總比沒有好。該事件返回一個object類型的參數(shù)，攜帶當(dāng)前聊天面板的容器、基礎(chǔ)信息等。
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 //成員數(shù)，不好獲取的話，可以設(shè)置為0 });該方法結(jié)合brief: true（簡約模式），可以免去較為復(fù)雜的數(shù)據(jù)配置。輕量地建立一個聊天面板。擁有較大的平臺實用性。可以預(yù)見的是，它應(yīng)該會成為LayIM一個露臉率最高的存在。想象一下吧，對你而言是否如此？
初始最小化聊天界面
方法名：layim.setChatMin()，如果你在初始的狀態(tài)下不想展開聊天面板（譬如懸浮的在線客服），那么該方法會派上用場，使用很簡單，就不過多啰嗦了。
layim.setChatMin();添加好友/群到主面板
方法名：layim.addList(options)，當(dāng)你的WebSocket監(jiān)聽到有好友或者群新增時，需讓LayIM的主面板同步添加的信息，可用該方法。先看看例子：
layim.on('ready', function(res){//監(jiān)聽添加列表的socket事件，假設(shè)你服務(wù)端emit的事件名為：addListsocket.onmessage = function(res){if(res.emit === 'addList'){layim.addList(res.data); //如果是在iframe頁，如LayIM設(shè)定的add面板，則為 parent.layui.layim.addList(data);}};//需要特別注意的是回調(diào)返回的res//如果添加的是好友，res的結(jié)構(gòu)必須是這樣的 {type: 'friend' //列表類型，只支持friend和group兩種,avatar: "a.jpg" //好友頭像,username: '沖田杏梨' //好友昵稱,groupid: 2 //所在的分組id,id: "1233333312121212" //好友id,sign: "本人沖田杏梨將結(jié)束AV女優(yōu)的工作" //好友簽名 } //如果添加的是群組，res的結(jié)構(gòu)必須是這樣的 {type: 'group' //列表類型，只支持friend和group兩種,avatar: "a.jpg" //群組頭像,groupname: 'Angular開發(fā)' //群組名稱,id: "12333333" //群組id } });從主面板移除好友/群
方法名：layim.removeList(options)，當(dāng)你的WebSocket監(jiān)聽到有好友或者群刪除時，需讓LayIM的主面板同步刪除的信息，可用該方法。它的調(diào)用非常簡單，只需要傳兩個key：
layim.removeList({type: 'friend' //或者group,id: 1238668 //好友或者群組ID }); //如果是在iframe頁，如LayIM設(shè)定的add面板，則為： parent.layui.layim.removeList({type: 'friend' //或者group,id: 1238668 //好友或者群組ID });獲取列表元素
LayIM的好友/群的列表所在元素，附帶唯一的id，由固定前綴“l(fā)ayim-”+動態(tài)的type和id字符拼接而成，如id="layim-friend10000"，通過查找id選擇器獲得該元素后，你就可以對其進(jìn)行頭像置灰等處理了。
獲取cache數(shù)據(jù)
方法名：layim.cache()，獲取LayIM的cache信息，返回的信息結(jié)構(gòu)和ready事件獲得的信息一樣，不同的是，改方法始終會獲取到最新的cache。
//輸出的信息不妨在你的Chrome控制臺看看（需在引有LayIM的頁面中），在此就不做列舉了 console.log(layim.cache())無需接口的功能
LayIM有許多功能是無需接口來處理的，在此特別列舉幾個比較常見的：
#歷史會話：LayIM會自動記錄你每次打開的聊天窗口到本地數(shù)據(jù)庫（localStorage）、所以這一塊無需通過接口去渲染。
#主面板的展開狀態(tài)、#好友分組的展開狀態(tài)、#皮膚的選擇：同樣都會記錄到本地數(shù)據(jù)庫
#搜索好友/群組：LayIM內(nèi)部會按照關(guān)鍵字檢索出搜索結(jié)果。
#消息提醒：LayIM內(nèi)置強(qiáng)大的消息提醒機(jī)制，你只需要監(jiān)聽消息，并獲取消息，LayIM將為您處理好一切。
#聊天記錄：LayIM為您的每個對話存儲最新的50條記錄到本地，當(dāng)你下次打開時，仍然會初始化渲染這些內(nèi)容。但我們?nèi)匀唤ㄗh你的服務(wù)端也存儲一份記錄，因為“查看更多聊天記錄”已經(jīng)不再屬于LayIM管轄
#更多亮點：潛藏在LayIM的每一處細(xì)節(jié)。
關(guān)于版權(quán)
LayIM目前并非開源產(chǎn)品（以后也許會開源），因此如果你是通過捐贈渠道獲得LayIM，可以通過layer.config設(shè)定copyright: true來剔除LayIM主面板的關(guān)于信息，這就表示你已經(jīng)過授權(quán)。當(dāng)然，如果你想友好地保留，我們也是非常歡迎的。如果你通過非捐贈渠道獲得LayIM，我們并不會進(jìn)行追究，但是請勿進(jìn)行銷售，這是唯一的紅線吧。
另外，再次強(qiáng)調(diào)一點：LayIM雖然并不開源，但layui是完全免費且開源的。LayIM是我們?yōu)閿?shù)不多的接受收費的產(chǎn)品。因為一定資金的來源，是對我們整個開發(fā)流可持續(xù)發(fā)展的有力保障。仍然是那句話，如果你對LayIM的“收費”表示厭惡，請忽視它的存在。即便是沒有一個人為LayIM買單，我們?nèi)匀粫猿殖踔?#xff0c;即：通過極簡的體驗，拉近你的用戶在web間的距離。
LayIM的作者是賢心一人，版權(quán)最終解釋權(quán)歸他所有。
Layui - 用心與你溝通
本文鏈接：webim框架【layim】一個純前端webim插件http://www.51xuediannao.com/js/jquery/layim.html
總結(jié)
以上是生活随笔為你收集整理的webim【LayIM】开发者文档的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mac 如何恢复python_mac p
- 下一篇： AOJ-AHU-OJ-592 神奇的叶子