layui 即時通訊
在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: {} //額外參數
}
//配置我的信息（如果設定了該參數，則優(yōu)先讀取該參數，如果沒有，這讀取init返回的mine信息）
,mine: {
"username": "LayIM體驗者" //我的昵稱
,"id": "100000123" //我的ID
,"status": "online" //在線狀態(tài) 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，即記錄上次展開狀態(tài)。
,maxLength: 3000 //最長發(fā)送的字符長度，默認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（上傳文件接口）所返回的數據格式，下面將逐一展示
通過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" //在線狀態(tài) 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
通過layim.config來設定members參數可獲取群員列表，假設你進行了下述配置：
,members: {
url: ' '/api/im/getMembers/'
,data: {}
} 那么當點擊群聊面板查看成員時，將會向members的url發(fā)送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
通過layim.config來設定uploadImage參數可進行圖片上傳，假設你進行了下述配置
,uploadImage: {
url: ''
} 那么當點擊聊天面板上傳圖片時，將會向uploadImage的url發(fā)送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發(fā)送HTTP請求，進行文件上傳。我們會給你傳遞一個name="file"的文件表單域，你接受即可。該接口所返回的信息（response）應該嚴格按照下述的JSON格式：
{
"code": 0 //0表示成功，其它表示失敗
,"msg": "" //失敗信息
,"data": {
"src": "http://cdn.xxx.com/upload/file/LayIM.zip" //文件url
,"name": 'LayIM.zip' //文件名
}
} 萬萬不可畏懼它的存在，除非你真的想用Ajax輪詢去解決消息I/O。WebSocket會使得你的消息接受和傳遞變得極其輕松，最重要的一點是，性能卓絕。layim自帶WebSocket的前端封裝，這完全得益于國外開源類庫socket.io的貢獻，使得我們可以那么輕松地去使用WebSocket的API。
前端層面，WebSocket的建立非常簡單：
layui.use('layim', function(layim){
//建立WebSocket通訊
var socket = new WebSocket('ws://localhost:8090');
//發(fā)送一個消息
socket.send('Hi Server, I am LayIM!');
//更多情況下，一般是傳遞一個對象
socket.send(JSON.stringify({
type: '' //隨便定義，用于在服務端區(qū)分消息類型
,data: {}
}));
//連接成功時觸發(fā)
socket.onopen = function(){
socket.send('XXX連接成功');
};
//監(jiān)聽收到的消息
socket.onmessage = function(res){
//res為接受到的值，如 {"emit": "messageName", "data": {}}
//emit即為發(fā)出的事件名，用于區(qū)分不同的消息
};
另外還有onclose、onerror，分別是在鏈接關閉和出錯時觸發(fā)。
//基本上常用的就上面幾個了，是不是非一般的簡單？
});服務端層面，不用害怕，事情也遠沒有那么復雜。我們會抽空給出Node.js的官方集成案例。但對于其它服務端語言，以下已經成功接入LayIM的案例對你也許會有一定幫助：
Java：LayIM接入案例Java篇，含源碼+圖文
.NET：LayIM接入案例.NET篇，含源碼和Gif
PHP：LayIM接入案例PHP篇 源碼+Demo，強烈建議采用 Workerman
Python：等Python案例分享，暫時可閱讀 http://www.jb51.net/article/51516.htm
你的服務端語言沒有列舉在上面？額。。。那一定是你的語言太冷門了，自己去網搜資料吧。
為了避免聯(lián)調的復雜性，我們并不內置更多聊天記錄的展示。而是彈出一個聊天記錄的layer窗口，這意味著你可以隨意發(fā)揮聊天記錄的頁面。通過layim.config配置chatLog來指向聊天記錄的URL。假設你進行了下述設定：
layim.config({
chatLog: '/chat/log/' //如果未填， 則不在聊天面板顯示該icon
}); 那么，我們會在chatLog所對應的URL后面動態(tài)追加當前聊天窗口的ID（即好友或群組ID）和類型，如：/chat/log?id=123&type=friend
請注意：當你自建一個更多聊天記錄的動態(tài)頁面時，我們建議您通過Ajax來獲取聊天記錄，因為LayIM發(fā)送的內容，可能包含鏈接、圖片等多媒體信息，它們需要 parent.layui.layim.content(content)方法來解析
同樣為了避免聯(lián)調的復雜性，我們并不內置查找好友/群功能。而是彈出一個layer窗口，這意味著你可以隨意發(fā)揮該查找頁面。通過layim.config配置find來指向查找的頁面URL。如：
layim.config({
find: '/find/all/' //查找好友/群地址。如果未填，不不在主面板顯示該icon
}); 方法：layim.on(event, callback)
用于LayIM事件監(jiān)聽。接受兩個參數。第一個參數event即事件名，第二個參數callback即事件回調。
事件名：ready，用于監(jiān)聽LayIM初始化就緒。由于主面板的渲染，需建立在init接口請求完畢的基礎上，而一些操作必須等到主面板渲染完畢后才能操作，所以這個時候就可以放入ready事件的回調體中來執(zhí)行。其回調接受一個object類型的參數，攜帶一些基礎配置信息、我的用戶信息、好友/群列表信息、本地數據庫信息等，調用方式：
layim.on('ready', function(options){
console.log(options);
//do something
});
//注意：簡約模式（即brief: true時）不會觸發(fā)該事件事件名：online，看到主面板你的昵稱后的icon么，沒錯，就是它。當前支持“在線”、“隱身”兩種狀態(tài)切換。分別以online和hide的string類型的值傳遞給回調參數。如：
layim.on('online', function(status){
console.log(status); //獲得online或者hide
//此時，你就可以通過Ajax將這個狀態(tài)值記錄到數據庫中了。
//服務端接口需自寫。
}); 事件名：sendMessage，每當你發(fā)送一個消息，都可以通過該事件監(jiān)聽到?；卣{參數接受一個object類型的值，攜帶發(fā)送的聊天信息。如：
layim.on('sendMessage', function(res){
var mine = res.mine; //包含我發(fā)送的消息及我的信息
//mine的結構如下：
{
avatar: "avatar.jpg" //我的頭像
,content: "你好嗎" //消息內容
,id: "100000" //我的id
,mine: true //是否我發(fā)送的消息
,username: "紙飛機" //我的昵稱
}
var to = res.to; //對方的信息
//to的結構如下：
{
avatar: "avatar.jpg"
,id: "100001"
,name: "賢心"
,sign: "這些都是測試數據，實際使用請嚴格按照該格式返回"
,type: "friend" //聊天類型，一般分friend和group兩種，group即群聊
,username: "賢心"
}
//監(jiān)聽到上述消息后，就可以輕松地發(fā)送socket了，如：
socket.send({
type: 'chatMessage' //隨便定義，用于在服務端區(qū)分消息類型
,data: res
});
});事件的監(jiān)聽并非layim提供，而是WebSocket提供。
檢測到WebSocket事件后，執(zhí)行l(wèi)ayim的內置方法：layim.getMessage(options)
即可顯示消息到聊天面板（如果消息所指定的聊天面板沒有打開，則會進入本地的消息隊列中，直到指定的聊天面板被打開，方可顯示。），這是一個對你有用的例子：
//監(jiān)聽收到的聊天消息，假設你服務端emit的事件名為：chatMessage
socket.onmessage = function(res){
if(res.emit === 'chatMessage'){
layim.getMessage(res.data); //res.data即你發(fā)送消息傳遞的數據（閱讀：監(jiān)聽發(fā)送的消息）
}
};
//它必須接受以下字段
layim.getMessage({
username: "紙飛機" //消息來源用戶名
,avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1" //消息來源用戶頭像
,id: "100000" //聊天窗口來源ID（如果是私聊，則是用戶id，如果是群聊，則是群組id）
,type: "friend" //聊天窗口來源類型，從發(fā)送消息傳遞的to里面獲取
,content: "嗨，你好！本消息系離線消息。" //消息內容
,mine: false //是否我發(fā)送的消息，如果為true，則會顯示在右方
,timestamp: 1467475443306 //服務端動態(tài)時間戳
});事件名：members，在群聊面板中查看全部成員時觸發(fā)，該事件返回獲取群員接口（即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（簡約模式），可以免去較為復雜的數據配置。輕量地建立一個聊天面板。擁有較大的平臺實用性?？梢灶A見的是，它應該會成為LayIM一個露臉率最高的存在。想象一下吧，對你而言是否如此？
方法名：layim.setChatMin()，如果你在初始的狀態(tài)下不想展開聊天面板（譬如懸浮的在線客服），那么該方法會派上用場，使用很簡單，就不過多啰嗦了。
layim.setChatMin();方法名：layim.addList(options)，當你的WebSocket監(jiān)聽到有好友或者群新增時，需讓LayIM的主面板同步添加的信息，可用該方法。先看看例子：
layim.on('ready', function(res){
//監(jiān)聽添加列表的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女優(yōu)的工作" //好友簽名
}
//如果添加的是群組，res的結構必須是這樣的
{
type: 'group' //列表類型，只支持friend和group兩種
,avatar: "a.jpg" //群組頭像
,groupname: 'Angular開發(fā)' //群組名稱
,id: "12333333" //群組id
}
});方法名：layim.removeList(options)，當你的WebSocket監(jiān)聽到有好友或者群刪除時，需讓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，由固定前綴“l(fā)ayim-”+動態(tài)的type和id字符拼接而成，如id="layim-friend10000"，通過查找id選擇器獲得該元素后，你就可以對其進行頭像置灰等處理了。
方法名：layim.cache()，獲取LayIM的cache信息，返回的信息結構和ready事件獲得的信息一樣，不同的是，改方法始終會獲取到最新的cache。
//輸出的信息不妨在你的Chrome控制臺看看（需在引有LayIM的頁面中），在此就不做列舉了
console.log(layim.cache())
無需接口的功能LayIM有許多功能是無需接口來處理的，在此特別列舉幾個比較常見的：
#歷史會話：LayIM會自動記錄你每次打開的聊天窗口到本地數據庫（localStorage）、所以這一塊無需通過接口去渲染。
#主面板的展開狀態(tài)、#好友分組的展開狀態(tài)、#皮膚的選擇：同樣都會記錄到本地數據庫
#搜索好友/群組：LayIM內部會按照關鍵字檢索出搜索結果。
#消息提醒：LayIM內置強大的消息提醒機制，你只需要監(jiān)聽消息，并獲取消息，LayIM將為您處理好一切。
#聊天記錄：LayIM為您的每個對話存儲最新的50條記錄到本地，當你下次打開時，仍然會初始化渲染這些內容。但我們仍然建議你的服務端也存儲一份記錄，因為“查看更多聊天記錄”已經不再屬于LayIM管轄
#更多亮點：潛藏在LayIM的每一處細節(jié)。
LayIM目前并非開源產品（以后也許會開源），因此如果你是通過捐贈渠道獲得LayIM，可以通過layer.config設定copyright: true來剔除LayIM主面板的關于信息，這就表示你已經過授權。當然，如果你想友好地保留，我們也是非常歡迎的。如果你通過非捐贈渠道獲得LayIM，我們并不會進行追究，但是請勿進行銷售，這是唯一的紅線吧。
另外，再次強調一點：LayIM雖然并不開源，但layui是完全免費且開源的。LayIM是我們?yōu)閿挡欢嗟慕邮苁召M的產品。因為一定資金的來源，是對我們整個開發(fā)流可持續(xù)發(fā)展的有力保障。仍然是那句話，如果你對LayIM的“收費”表示厭惡，請忽視它的存在。即便是沒有一個人為LayIM買單，我們仍然會堅持初衷，即：通過極簡的體驗，拉近你的用戶在web間的距離。
LayIM的作者是賢心一人，版權最終解釋權歸他所有。
Layui - 用心與你溝通
更多建議：