layui 即時(shí)通訊

2019-01-19 18:47 更新

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

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

模塊加載名稱:layim,官網(wǎng)地址:layim.layui.com

開始使用

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

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

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

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

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

初始化配置

一個(gè)你必須認(rèn)識(shí)的方法:layim.config(options)
控制著許多重要的配置,基本上一個(gè)完整LayIM實(shí)例的構(gòu)成由它而開始,它允許你自由設(shè)定以下參數(shù):

layui.use('layim', function(layim){
  //基礎(chǔ)配置
  layim.config({
  
    //獲取主面板列表信息
    init: {
      url: '' //接口地址(返回的數(shù)據(jù)格式見下文)
      ,type: 'get' //默認(rèn)get,一般可不填
      ,data: {} //額外參數(shù)
    }
    
    //配置我的信息(如果設(shè)定了該參數(shù),則優(yōu)先讀取該參數(shù),如果沒有,這讀取init返回的mine信息)
    ,mine: {
      "username": "LayIM體驗(yàn)者" //我的昵稱
      ,"id": "100000123" //我的ID
      ,"status": "online" //在線狀態(tài) online:在線、hide:隱身
      ,"sign": "在深邃的編碼世界,做一枚輕盈的紙飛機(jī)" //我的簽名
      ,"avatar": "a.jpg" //我的頭像
    }
    //獲取群?jiǎn)T接口
    ,members: {
      url: '' //接口地址(返回的數(shù)據(jù)格式見下文)
      ,type: 'get' //默認(rèn)get,一般可不填
      ,data: {} //額外參數(shù)
    }
    
    //上傳圖片接口(返回的數(shù)據(jù)格式見下文)
    ,uploadImage: {
      url: '' //接口地址(返回的數(shù)據(jù)格式見下文)
      ,type: 'post' //默認(rèn)post
    } 
    
    //上傳文件接口(返回的數(shù)據(jù)格式見下文)
    ,uploadFile: {
      url: '' //接口地址(返回的數(shù)據(jù)格式見下文)
      ,type: 'post' //默認(rèn)post
    } 
    
    //增加皮膚選擇,如果不想增加,可以剔除該項(xiàng)
    ,skin: [ 
      'http://xxx.com/skin.jpg', 
      …
    ] 
    
    ,brief: false //是否簡(jiǎn)約模式(默認(rèn)false,如果只用到在線客服,且不想顯示主面板,可以設(shè)置 true)
    ,title: '我的LayIM' //主面板最小化后顯示的名稱
    ,min: false //用于設(shè)定主面板是否在頁(yè)面打開時(shí),始終最小化展現(xiàn)。默認(rèn)false,即記錄上次展開狀態(tài)。
    ,maxLength: 3000 //最長(zhǎng)發(fā)送的字符長(zhǎng)度,默認(rèn)3000
    ,isfriend: true //是否開啟好友(默認(rèn)true,即開啟)
    ,isgroup: true //是否開啟群組(默認(rèn)true,即開啟)
    ,right: '0px' //默認(rèn)0px,用于設(shè)定主面板右偏移量。該參數(shù)可避免遮蓋你頁(yè)面右下角已經(jīng)的bar。
    ,chatLog: '/chat/log/' //聊天記錄地址(如果未填則不顯示)
    ,find: '/find/' //查找好友/群的地址(如果未填則不顯示)
    ,copyright: false //是否授權(quán),如果通過官網(wǎng)捐贈(zèng)獲得LayIM,此處可填true
  });
});      

上面的參數(shù)中,brief、skin、min、isgroup、chatLog、copyright等參數(shù)都是非必填項(xiàng),本身具有默認(rèn)值。而對(duì)于init(初始化接口)、members(查看群?jiǎn)T接口)、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": "這些都是測(cè)試數(shù)據(jù),實(shí)際使用請(qǐng)嚴(yán)格按照該格式返回" //好友簽名
      }, …… ]
    }, …… ]
    
    //群組列表
    ,"group": [{
      "groupname": "前端群" //群組名
      ,"id": "101" //群組ID
      ,"avatar": "a.jpg" //群組頭像
    }, …… ]
  }
}

Demo:getList.json

members數(shù)據(jù)格式

通過layim.config來設(shè)定members參數(shù)可獲取群?jiǎn)T列表,假設(shè)你進(jìn)行了下述配置:

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

那么當(dāng)點(diǎn)擊群聊面板查看成員時(shí),將會(huì)向members的url發(fā)送Ajax請(qǐng)求,并自動(dòng)傳遞一個(gè)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": "這些都是測(cè)試數(shù)據(jù),實(shí)際使用請(qǐng)嚴(yán)格按照該格式返回" //群主簽名
    }
    ,"list": [{
      "username": "馬小云" //群?jiǎn)T昵稱
      ,"id": "168168" //群?jiǎn)Tid
      ,"avatar": "http://tp4.sinaimg.cn/2145291155/180/5601307179/1" //群?jiǎn)T頭像
      ,"sign": "讓天下沒有難寫的代碼" //群?jiǎn)T簽名
    }, …… ]
  }
}      

Demo:getMembers.json

uploadImage數(shù)據(jù)格式

通過layim.config來設(shè)定uploadImage參數(shù)可進(jìn)行圖片上傳,假設(shè)你進(jìn)行了下述配置

,uploadImage: {
  url: ''
}     

那么當(dāng)點(diǎn)擊聊天面板上傳圖片時(shí),將會(huì)向uploadImage的url發(fā)送HTTP請(qǐng)求,進(jìn)行圖片上傳。我們會(huì)給你傳遞一個(gè)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í)上跟圖片上傳非常類似有木有?假設(shè)你進(jìn)行了下述配置:

,uploadFile: {
  url: ' ''
}     

那么當(dāng)點(diǎn)擊聊天面板上傳文件時(shí),將會(huì)向uploadFile的url發(fā)送HTTP請(qǐng)求,進(jìn)行文件上傳。我們會(huì)給你傳遞一個(gè)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

萬(wàn)萬(wàn)不可畏懼它的存在,除非你真的想用Ajax輪詢?nèi)ソ鉀Q消息I/O。WebSocket會(huì)使得你的消息接受和傳遞變得極其輕松,最重要的一點(diǎn)是,性能卓絕。layim自帶WebSocket的前端封裝,這完全得益于國(guó)外開源類庫(kù)socket.io的貢獻(xiàn),使得我們可以那么輕松地去使用WebSocket的API。

前端層面,WebSocket的建立非常簡(jiǎn)單:

layui.use('layim', function(layim){
  
  //建立WebSocket通訊
  var socket = new WebSocket('ws://localhost:8090');
  
  //發(fā)送一個(gè)消息
  socket.send('Hi Server, I am LayIM!');

  //更多情況下,一般是傳遞一個(gè)對(duì)象
  socket.send(JSON.stringify({
    type: '' //隨便定義,用于在服務(wù)端區(qū)分消息類型
    ,data: {}
  })); 

  //連接成功時(shí)觸發(fā)
  socket.onopen = function(){
    socket.send('XXX連接成功'); 
  };
  
  //監(jiān)聽收到的消息
  socket.onmessage = function(res){
    //res為接受到的值,如 {"emit": "messageName", "data": {}}
    //emit即為發(fā)出的事件名,用于區(qū)分不同的消息
  };
  
  另外還有onclose、onerror,分別是在鏈接關(guān)閉和出錯(cuò)時(shí)觸發(fā)。
  
  //基本上常用的就上面幾個(gè)了,是不是非一般的簡(jiǎn)單?
  
});

服務(wù)端層面,不用害怕,事情也遠(yuǎn)沒有那么復(fù)雜。我們會(huì)抽空給出Node.js的官方集成案例。但對(duì)于其它服務(wù)端語(yǔ)言,以下已經(jīng)成功接入LayIM的案例對(duì)你也許會(huì)有一定幫助:

Java:LayIM接入案例Java篇,含源碼+圖文

.NET:LayIM接入案例.NET篇,含源碼和Gif

PHP:LayIM接入案例PHP篇 源碼+Demo,強(qiáng)烈建議采用 Workerman

Python:等Python案例分享,暫時(shí)可閱讀 http://www.jb51.net/article/51516.htm

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

查看更多聊天記錄

為了避免聯(lián)調(diào)的復(fù)雜性,我們并不內(nèi)置更多聊天記錄的展示。而是彈出一個(gè)聊天記錄的layer窗口,這意味著你可以隨意發(fā)揮聊天記錄的頁(yè)面。通過layim.config配置chatLog來指向聊天記錄的URL。假設(shè)你進(jìn)行了下述設(shè)定:

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

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

請(qǐng)注意:當(dāng)你自建一個(gè)更多聊天記錄的動(dòng)態(tài)頁(yè)面時(shí),我們建議您通過Ajax來獲取聊天記錄,因?yàn)長(zhǎng)ayIM發(fā)送的內(nèi)容,可能包含鏈接、圖片等多媒體信息,它們需要 parent.layui.layim.content(content)方法來解析

查找好友/群

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

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

方法:layim.on(event, callback)
用于LayIM事件監(jiān)聽。接受兩個(gè)參數(shù)。第一個(gè)參數(shù)event即事件名,第二個(gè)參數(shù)callback即事件回調(diào)。

ready事件

事件名:ready,用于監(jiān)聽LayIM初始化就緒。由于主面板的渲染,需建立在init接口請(qǐng)求完畢的基礎(chǔ)上,而一些操作必須等到主面板渲染完畢后才能操作,所以這個(gè)時(shí)候就可以放入ready事件的回調(diào)體中來執(zhí)行。其回調(diào)接受一個(gè)object類型的參數(shù),攜帶一些基礎(chǔ)配置信息、我的用戶信息、好友/群列表信息、本地?cái)?shù)據(jù)庫(kù)信息等,調(diào)用方式:

layim.on('ready', function(options){
  console.log(options);
  //do something
});
//注意:簡(jiǎn)約模式(即brief: true時(shí))不會(huì)觸發(fā)該事件
監(jiān)聽在線狀態(tài)切換

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

layim.on('online', function(status){
  console.log(status); //獲得online或者h(yuǎn)ide
  
  //此時(shí),你就可以通過Ajax將這個(gè)狀態(tài)值記錄到數(shù)據(jù)庫(kù)中了。
  //服務(wù)端接口需自寫。
});     
監(jiān)聽發(fā)送的消息

事件名:sendMessage,每當(dāng)你發(fā)送一個(gè)消息,都可以通過該事件監(jiān)聽到。回調(diào)參數(shù)接受一個(gè)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; //對(duì)方的信息

//to的結(jié)構(gòu)如下:
{
  avatar: "avatar.jpg"
  ,id: "100001"
  ,name: "賢心"
  ,sign: "這些都是測(cè)試數(shù)據(jù),實(shí)際使用請(qǐng)嚴(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提供。
檢測(cè)到WebSocket事件后,執(zhí)行l(wèi)ayim的內(nèi)置方法:layim.getMessage(options) 
即可顯示消息到聊天面板(如果消息所指定的聊天面板沒有打開,則會(huì)進(jìn)入本地的消息隊(duì)列中,直到指定的聊天面板被打開,方可顯示。),這是一個(gè)對(duì)你有用的例子:

//監(jiān)聽收到的聊天消息,假設(shè)你服務(wù)端emit的事件名為:chatMessage
socket.onmessage = function(res){
  if(res.emit === 'chatMessage'){
    layim.getMessage(res.data); //res.data即你發(fā)送消息傳遞的數(shù)據(jù)(閱讀:監(jiān)聽發(fā)送的消息)
  }
};
//它必須接受以下字段

layim.getMessage({
  username: "紙飛機(jī)" //消息來源用戶名
  ,avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1" //消息來源用戶頭像
  ,id: "100000" //聊天窗口來源ID(如果是私聊,則是用戶id,如果是群聊,則是群組id)
  ,type: "friend" //聊天窗口來源類型,從發(fā)送消息傳遞的to里面獲取
  ,content: "嗨,你好!本消息系離線消息。" //消息內(nèi)容
  ,mine: false //是否我發(fā)送的消息,如果為true,則會(huì)顯示在右方
  ,timestamp: 1467475443306 //服務(wù)端動(dòng)態(tài)時(shí)間戳
});
監(jiān)聽查看群?jiǎn)T

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

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

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

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

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

//自定義在線客服

layim.config({
  brief: true //簡(jiǎn)約模式,不顯示主面板
}).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(); //收縮聊天面板
//自定義群聊(對(duì)于想搞一個(gè)臨時(shí)性的房間,貌似是挺有意思的)

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(簡(jiǎn)約模式),可以免去較為復(fù)雜的數(shù)據(jù)配置。輕量地建立一個(gè)聊天面板。擁有較大的平臺(tái)實(shí)用性。可以預(yù)見的是,它應(yīng)該會(huì)成為L(zhǎng)ayIM一個(gè)露臉率最高的存在。想象一下吧,對(duì)你而言是否如此?

初始最小化聊天界面

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

layim.setChatMin();

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

layim.on('ready', function(res){
  
  //監(jiān)聽添加列表的socket事件,假設(shè)你服務(wù)端emit的事件名為:addList
  socket.onmessage = function(res){
    if(res.emit === 'addList'){
      layim.addList(res.data); //如果是在iframe頁(yè),如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)聽到有好友或者群刪除時(shí),需讓LayIM的主面板同步刪除的信息,可用該方法。它的調(diào)用非常簡(jiǎn)單,只需要傳兩個(gè)key:

layim.removeList({
  type: 'friend' //或者group
  ,id: 1238668 //好友或者群組ID
});
//如果是在iframe頁(yè),如LayIM設(shè)定的add面板,則為:
parent.layui.layim.removeList({
  type: 'friend' //或者group
  ,id: 1238668 //好友或者群組ID
});
獲取列表元素

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

獲取cache數(shù)據(jù)

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

//輸出的信息不妨在你的Chrome控制臺(tái)看看(需在引有LayIM的頁(yè)面中),在此就不做列舉了
console.log(layim.cache()) 
無需接口的功能
無需接口的功能

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

#歷史會(huì)話:LayIM會(huì)自動(dòng)記錄你每次打開的聊天窗口到本地?cái)?shù)據(jù)庫(kù)(localStorage)、所以這一塊無需通過接口去渲染。
#主面板的展開狀態(tài)、#好友分組的展開狀態(tài)、#皮膚的選擇:同樣都會(huì)記錄到本地?cái)?shù)據(jù)庫(kù)
#搜索好友/群組:LayIM內(nèi)部會(huì)按照關(guān)鍵字檢索出搜索結(jié)果。
#消息提醒:LayIM內(nèi)置強(qiáng)大的消息提醒機(jī)制,你只需要監(jiān)聽消息,并獲取消息,LayIM將為您處理好一切。
#聊天記錄:LayIM為您的每個(gè)對(duì)話存儲(chǔ)最新的50條記錄到本地,當(dāng)你下次打開時(shí),仍然會(huì)初始化渲染這些內(nèi)容。但我們?nèi)匀唤ㄗh你的服務(wù)端也存儲(chǔ)一份記錄,因?yàn)椤安榭锤嗔奶煊涗洝币呀?jīng)不再屬于LayIM管轄
#更多亮點(diǎn):潛藏在LayIM的每一處細(xì)節(jié)。

關(guān)于版權(quán)

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

另外,再次強(qiáng)調(diào)一點(diǎn):LayIM雖然并不開源,但layui是完全免費(fèi)且開源的。LayIM是我們?yōu)閿?shù)不多的接受收費(fèi)的產(chǎn)品。因?yàn)橐欢ㄙY金的來源,是對(duì)我們整個(gè)開發(fā)流可持續(xù)發(fā)展的有力保障。仍然是那句話,如果你對(duì)LayIM的“收費(fèi)”表示厭惡,請(qǐng)忽視它的存在。即便是沒有一個(gè)人為L(zhǎng)ayIM買單,我們?nèi)匀粫?huì)堅(jiān)持初衷,即:通過極簡(jiǎn)的體驗(yàn),拉近你的用戶在web間的距離。

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

Layui - 用心與你溝通


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)