經(jīng)常有朋友問起GoEasy如何實(shí)現(xiàn)IM撒会，今天就手把手的帶大家從頭到尾用GoEasy實(shí)現(xiàn)一個(gè)完整IM聊天秩命，全套代碼已經(jīng)放在了github。

今日的前端技術(shù)發(fā)展可謂百花爭鳴缓淹，為了確保本文能幫助到使用任何技術(shù)棧的前端工程師登失，Demo的源碼實(shí)現(xiàn)上選擇了最簡單的HTML+JQuery的方式遏佣，所以,不論您是準(zhǔn)備用Uniapp開發(fā)移動(dòng)APP，還是準(zhǔn)備寫個(gè)小程序揽浙，不論你喜歡用React還是VUE状婶，還是React-native或ionic, 或者您直接用原生Javascript和Typescript意敛，都是可以輕松理解，全套代碼已經(jīng)放在github上了膛虫，下載后不需要搭建任何環(huán)境空闲，直接用瀏覽器打開，就可以用來聊天了走敌。

作為一名程序員碴倾，在編碼之前，首先要做的當(dāng)然是架構(gòu)設(shè)計(jì)掉丽！什么跌榔？確認(rèn)不是裝逼？當(dāng)然捶障，別忘了星爺?shù)哪蔷湓挘何沂且幻绦騿T僧须！沒有思想的程序員，跟咸魚有什么區(qū)別呢项炼？

首先我們代碼層將整個(gè)功能分為四層：

1、華麗的展示層（index.html）：你們負(fù)責(zé)功能優(yōu)雅強(qiáng)大锭部，我負(fù)責(zé)貌美如花暂论。展示層其實(shí)就是純靜態(tài)的html，顯示界面拌禾，高端點(diǎn)說取胎，就是負(fù)責(zé)人機(jī)交互的。

2湃窍、承上啟下的控制層（controller.js）: 控制層作用就是接受頁面操作的參數(shù)闻蛀，調(diào)用service層，根據(jù)頁面的操作指令或者service層的反饋您市，負(fù)責(zé)對(duì)頁面的展示做出控制觉痛。不可以編寫任何與展示邏輯無關(guān)的代碼，也就是不能侵入任何業(yè)務(wù)邏輯茵休。衡量這一層做的好不好的的標(biāo)準(zhǔn)薪棒，就是假設(shè)刪掉controller和view層，service能準(zhǔn)確完整的描述所有的業(yè)務(wù)邏輯泽篮。

3盗尸、運(yùn)籌帷幄的關(guān)鍵核心業(yè)務(wù)層（service.js）: 接受controller層的指令，實(shí)現(xiàn)業(yè)務(wù)邏輯帽撑，必要時(shí)候調(diào)用goeasy提供網(wǎng)絡(luò)通訊支持泼各，或調(diào)用restapi層完成數(shù)據(jù)的查詢和保存。這一層包含所有的業(yè)務(wù)邏輯亏拉，任何業(yè)務(wù)邏輯相關(guān)的代碼扣蜻，都不可以漏到其他層逆巍，確保只要service存在，整個(gè)項(xiàng)目的靈魂就存在莽使，確保service層完全是原生代碼實(shí)現(xiàn)業(yè)務(wù)邏輯锐极，而沒有類似于vue或者小程序前端框架的語法和代碼滲入，從而達(dá)到service層能夠在任何前端框架通用芳肌。

4灵再、神通廣大的服務(wù)器交互層（restapi.js）: 根據(jù)傳入的參數(shù)完成服務(wù)器端接口的調(diào)用，來實(shí)現(xiàn)數(shù)據(jù)查詢或亿笤、修改或保存翎迁，并且返回結(jié)果，不參與任何業(yè)務(wù)邏輯净薛。在實(shí)踐中大部分是負(fù)責(zé)發(fā)送http請(qǐng)求和服務(wù)器交互汪榔。

分層的目標(biāo)就是為了確保除了在核心業(yè)務(wù)層以外的其他層次能夠被輕易的替換。舉例：我們當(dāng)前的版本是使用html+jquery完成肃拜，如果希望再開發(fā)一個(gè)Uniapp實(shí)現(xiàn)的小程序或者app痴腌，只需要用Uniapp畫個(gè)新外殼，對(duì)controller層做一些修改燃领，就可輕松完成一個(gè)小程序或者APP版的IM聊天士聪，不需要對(duì)service和restapi做任何修改 。同理柿菩，如果服務(wù)器端發(fā)生變化戚嗅，或者更換了與服務(wù)器的交互方式，只需要對(duì)restapi做出修改枢舶，其他三層則不受任何影響。

OK, 有了如此清晰而優(yōu)秀的代碼結(jié)構(gòu)分層設(shè)計(jì)替久，就差一段優(yōu)雅的代碼來實(shí)現(xiàn)了凉泄。

Ready, Go! 編碼開始：

1、登錄頁面
這個(gè)最簡單蚯根，閉著眼睛畫個(gè)界面后众，用戶名密碼正確后，完成以下幾個(gè)步驟颅拦。
1.1. 根據(jù)用戶名查詢出來的用戶蒂誉，初始化全局變量：當(dāng)前用戶。
1.2. 將controller層的onNewMessage, onFriendOnline距帅，onFriendOffline賦值給service 右锨。
1.3. new goeasy建立長連接，記得要傳入userid碌秸。如需在subscriberPrencese用戶上下線提醒事件绍移，或者在調(diào)用HereNow獲取在線用戶列表時(shí)悄窃，能拿到userId以外，更多的信息蹂窖，可以在userdata里傳入轧抗。
1.4. 調(diào)用restapi，查詢?cè)撚脩舻暮糜蚜斜硭膊猓鶕?jù)結(jié)果初始化本地好友列表friendlist横媚。
1.5. 循環(huán)好友，以friendUUID為channel月趟，調(diào)用subscriberPrencense分唾，監(jiān)聽所有好友的上下線事件。
1.6. 以當(dāng)前用戶的uuid為channel狮斗，調(diào)用subscriber绽乔，監(jiān)聽來自所有好友發(fā)來的消息。
1.7. 顯示好友列表界面碳褒。
1.8. 初始化好友的在線狀態(tài)折砸，以數(shù)組形式傳入所有好友的userId，調(diào)用hereNowByUserIds沙峻，獲得當(dāng)前在線的好友列表睦授，根據(jù)結(jié)果將friendlist里屬于在線狀態(tài)的friend的在線狀態(tài)改為true，同時(shí)將界面上在線用戶的頭像改為彩色摔寨。

2去枷、顯示好友列表（1.7）
2.1. service層獲取當(dāng)前用戶信息，在頁面顯示當(dāng)前用戶的username和頭像是复。
2.2. service獲取本地好友列表删顶，然后controller將每個(gè)好友的頭像和名稱顯示到頁面上，對(duì)于當(dāng)前在線的用戶淑廊，旁邊顯示一個(gè)小綠點(diǎn)逗余，并且為每個(gè)好友綁定一個(gè)點(diǎn)擊事件，點(diǎn)擊好友時(shí)季惩，顯示聊天界面, 如果該好友有未讀消息的录粱，紅色小氣泡顯示未讀消息數(shù)量。

3画拾、點(diǎn)擊一個(gè)好友啥繁，進(jìn)入與其聊天的界面
3.1. 窗口頂部顯示聊天好友的名稱。
3.2. 調(diào)用restapi根據(jù)當(dāng)前用戶的UUID和好友的friendUUID青抛，查詢與該好友的聊天記錄旗闽，如果這個(gè)聊天記錄的sender是自己，就顯示在頁面的右邊，如果是朋友發(fā)的宪睹，則顯示在左邊愁茁。
3.3. 將該好友在本地?cái)?shù)據(jù)里未讀消息恢復(fù)為0。
3.4. 并且將聊天記錄滾動(dòng)到最下邊亭病。
3.5. 如果點(diǎn)擊返回鹅很，就直接調(diào)進(jìn)入第二步。

4罪帖、在聊天界面促煮，輸入消息后發(fā)送
4.1. 當(dāng)前用戶uuid作為senderUUID和消息內(nèi)容組成chatMessage。
4.2. 調(diào)用restapi將chatMessage發(fā)往“服務(wù)器”端整袁，我們建議的方式是所有的消息發(fā)往自己的服務(wù)器端菠齿，在服務(wù)器端先保存入庫，然后在服務(wù)端publish坐昙。具體做法是將chatMessage轉(zhuǎn)換為字符串绳匀，入庫，然后將該好友的channel作為channel調(diào)用GoEasy完成publish炸客。(當(dāng)然疾棵，你會(huì)發(fā)現(xiàn)在我們的示例代碼這個(gè)過程是在restapi里直接完成的，原因是為了demo的演示方便痹仙，我們模擬的服務(wù)器端行為是尔，相信你懂的）
4.3. 自己的消息發(fā)送成功后，顯示在聊天窗口的右邊开仰。

5拟枚、收到新消息
5.1. 在1.6定義了接收好友新消息的事件，當(dāng)收到一條好友的新消息時(shí)众弓。
5.2. 首先調(diào)用restapi保存到服務(wù)器恩溅。
5.3. 本地好友數(shù)據(jù)里的未讀消息加1。
5.4. 如果當(dāng)前界面是好友列表田轧，將來自該朋友的未讀消息的數(shù)字顯示在界面上暴匠。
5.5. 如果收到的消息就是來自當(dāng)前對(duì)話窗口，就將消息顯示到聊天窗口傻粘，并且調(diào)用service將本地?cái)?shù)據(jù)里該好友的未讀消息清0。

6帮掉、用戶上下線提醒
6.1. 在1.5監(jiān)聽了用戶上下線弦悉，當(dāng)收到一個(gè)用戶上線或下線的通知后（注意返回的是一個(gè)列表，一次事件有可能有多個(gè)好友都發(fā)生了狀態(tài)變化）蟆炊。
6.2. 修改將本地?cái)?shù)據(jù)里該好友對(duì)象在線狀態(tài),如果是上線事件就顯示彩色稽莉，如果是下線就顯示黑白色。

至此涩搓，整個(gè)聊天功能就完成了污秆，是不是很簡單呢劈猪。在整個(gè)demo中只用到了goeasy的四個(gè)API：subscriber（接收消息），subscriberPrencense（接受上下線通知）良拼，hereNowByUserIds(獲取當(dāng)前在線用戶列表）, publish(發(fā)送消息)战得。詳情可以參考goeasy官方文檔https://www.goeasy.io/cn/developers.html

哼！這難道不是紙上談兵嗎庸推？Talk is cheap, show me the code! 優(yōu)雅的代碼在哪里呢常侦？

別著急，當(dāng)然有全套代碼啦贬媒，如果放個(gè)zip文件的下載連接聋亡，顯得B格太低，老規(guī)矩际乘，github見: https://github.com/GoEasySupport/goeasy-chat-demo

注意事項(xiàng)：
1.在restapi.js 里 可以找到用戶名和密碼
2.在service.js里將appkey替換為您自己的common key
3.subscriberPrencense和hereNowByUserIds這兩個(gè)方法坡倔，默認(rèn)是關(guān)閉的，需要掃碼添加GoEasy客服開通哦~

將代碼與本文一起對(duì)照閱讀后脖含，要寫個(gè)IM罪塔，比畫個(gè)0還簡單，如果使用的是其他的前端技術(shù)框架如小程序和React-native器赞，只需要重新畫個(gè)外殼就好了垢袱！

彩彈在最后：
看了代碼的你，是不是發(fā)現(xiàn)我們的RESTAPI其實(shí)是個(gè)冒牌貨港柜，并不會(huì)真的和遠(yuǎn)程的某個(gè)服務(wù)器交互请契，這是為了方便演示，我們定義了兩個(gè)變量來幫助模擬遠(yuǎn)程數(shù)據(jù)的查詢夏醉，然后用localstorage來模擬服務(wù)器的保存爽锥，相信聰明的你，肯定已經(jīng)get到我們的代碼思路了畔柔。

GoEasy相關(guān)Demo推薦：
1氯夷、uniapp版本的直播間聊天室（支持打包成安卓/ios的app、微信小程序）：https://gitee.com/goeasy-io/GoEasyDemo-Uniapp-LiveChatRoom
2靶擦、uniapp版本的即時(shí)通訊IM（支持打包成安卓/ios的app腮考、微信小程序）：https://gitee.com/goeasy-io/GoEasyDemo-Uniapp-IM-Chat
3、微信小程序版本的即時(shí)通訊IM：https://gitee.com/goeasy-io/GoEasyDemo-wxapp-IM-Chat
4玄捕、VUE版本的即時(shí)通訊IM：https://gitee.com/goeasy-io/GoEasyDemo-Vue-IM-Chat
5踩蔚、H5版本的即時(shí)通訊IM：https://gitee.com/goeasy-io/GoEasyDemo-IM-Chat
6、H5版本的直播間聊天室：https://gitee.com/goeasy-io/GoEasyDemo-Live-Chatroom