這個(gè)程序員不是一般的六，因?yàn)樽约旱囊粋€(gè)Layim非云端項(xiàng)目設(shè)計(jì)，曾經(jīng)受到無數(shù)知名公司的邀請嗎，卻被這位大佬幾倍程序員給拒絕了。這是為什么呢？這位大神：我只想用自己的代碼去編程，不想寫自己不喜歡的編程?？赡芎芏嗳硕疾恢?，layim是什么？這里我給大家普及一下，webim框架【layim】一個(gè)純前端webim插件，說純前端也是有點(diǎn)扯淡，數(shù)據(jù)存儲還是要服務(wù)支持的，layim目前是Web IM應(yīng)用解決方案，致力于通過豐富的IM交互，及高度開放的接口，讓其自由接入到你的Web系統(tǒng)。且他的功能強(qiáng)大，在線狀態(tài)設(shè)置、好友分組展示、群組、歷史會話、右鍵菜單操作、搜索好友/群組、換膚、關(guān)于、主面板最小化/展開狀態(tài)記錄、私聊面板、群聊面板、多聊天切換、消息提醒、表情、圖片上傳、文件上傳、聊天記錄及其本地化存儲、快捷鍵發(fā)送設(shè)置、聊天面板最小化、在線客服/自定義聊天模式等20多項(xiàng)功能。（下面有演示圖）
這里還是要說一下我的前端學(xué)習(xí)群：621071874，從我一個(gè)到現(xiàn)在的都是看我每一篇文章來的，可以說都是我們大前端的學(xué)霸啊，不定期分享干貨。想學(xué)到東西的都可以來，歡迎初學(xué)和進(jìn)階中的小伙伴。
layui放入你的/static/目錄中，并且你的html頁面在根目錄：
初始化配置：
通過layim.config來設(shè)定init參數(shù)可獲得我的信息、好友列表、群組列表：
接口所返回的信息（response）應(yīng)該嚴(yán)格按照下述的JSON格式：
通過layim.config來設(shè)定members參數(shù)可獲取群員列表，假設(shè)你進(jìn)行了下述配置：
那么當(dāng)點(diǎn)擊群聊面板查看成員時(shí)，將會向members的url發(fā)送Ajax請求，并自動傳遞一個(gè)id參數(shù)（群組id）。該接口所返回的信息（response）應(yīng)該嚴(yán)格按照下述的JSON格式：
通過layim.config來設(shè)定uploadImage參數(shù)可進(jìn)行圖片上傳，假設(shè)你進(jìn)行了下述配置：
那么當(dāng)點(diǎn)擊聊天面板上傳圖片時(shí)，將會向uploadImage的url發(fā)送HTTP請求，進(jìn)行圖片上傳。我們會給你傳遞一個(gè)name="file"的文件表單域，你接受即可。該接口所返回的信息（response）應(yīng)該嚴(yán)格按照下述的JSON格式：
通過layim.config來設(shè)定uploadImage參數(shù)可進(jìn)行文件上傳：
那么當(dāng)點(diǎn)擊聊天面板上傳文件時(shí)，將會向uploadFile的url發(fā)送HTTP請求，進(jìn)行文件上傳。我們會給你傳遞一個(gè)name="file"的文件表單域，你接受即可。該接口所返回的信息（response）應(yīng)該嚴(yán)格按照下述的JSON格式：
接入WebSocket：
為了避免聯(lián)調(diào)的復(fù)雜性，我們并不內(nèi)置更多聊天記錄的展示。而是彈出一個(gè)聊天記錄的layer窗口，這意味著你可以隨意發(fā)揮聊天記錄的頁面。通過layim.config配置chatLog來指向聊天記錄的URL。假設(shè)你進(jìn)行了下述設(shè)定：
同樣為了避免聯(lián)調(diào)的復(fù)雜性，我們并不內(nèi)置查找好友/群功能。而是彈出一個(gè)layer窗口，這意味著你可以隨意發(fā)揮該查找頁面。通過layim.config配置find來指向查找的頁面URL
回調(diào)接受一個(gè)object類型的參數(shù)，攜帶一些基礎(chǔ)配置信息、我的用戶信息、好友/群列表信息、本地?cái)?shù)據(jù)庫信息等，調(diào)用方式：
事件名：online，看到主面板你的昵稱后的icon么，沒錯(cuò)，就是它。當(dāng)前支持“在線”、“隱身”兩種狀態(tài)切換。分別以online和hide的string類型的值傳遞給回調(diào)參數(shù)：
事件名：sendMessage，每當(dāng)你發(fā)送一個(gè)消息，都可以通過該事件監(jiān)聽到。回調(diào)參數(shù)接受一個(gè)object類型的值，攜帶發(fā)送的聊天信息：
事件的監(jiān)聽并非layim提供，而是WebSocket提供：
事件名：members，在群聊面板中查看全部成員時(shí)觸發(fā)，該事件返回獲取群員接口（即layim.config中的members）的response信息：
事件名：chatChange，坦白而言，似乎沒什么卵用。不過有總比沒有好。該事件返回一個(gè)object類型的參數(shù)，攜帶當(dāng)前聊天面板的容器、基礎(chǔ)信息等：
方法名：layim.chat(options)，是否似曾相識，沒錯(cuò)，我們見過文檔最開始的“客服姐姐”用的就是該方法。它允許你自定義任意模式的聊天窗口：
初始最小化聊天界面：方法名：layim.setChatMin()，如果你在初始的狀態(tài)下不想展開聊天面板（譬如懸浮的在線客服），那么該方法會派上用場，使用很簡單。
添加好友/群到主面板，方法名：layim.addList(options)，當(dāng)你的WebSocket監(jiān)聽到有好友或者群新增時(shí)，需讓LayIM的主面板同步添加的信息，可用該方法。先看看例子：
從主面板移除好友/群，方法名：layim.removeList(options)，當(dāng)你的WebSocket監(jiān)聽到有好友或者群刪除時(shí)，需讓LayIM的主面板同步刪除的信息，可用該方法。它的調(diào)用非常簡單，只需要傳兩個(gè)key：
獲取列表元素，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。
整個(gè)網(wǎng)頁版模仿QQ版本聊天系統(tǒng)就完成了。
這個(gè)項(xiàng)目設(shè)計(jì)就算做完了，想要完整代碼自己練習(xí)的小伙伴進(jìn)我的群自助領(lǐng)取，已經(jīng)上傳到群文件里了，群號：621071874，歡迎學(xué)習(xí)交流的小伙伴過來一起學(xué)習(xí)交流。
