怎么用GoEasy快速實現(xiàn)IM聊天

本篇內(nèi)容主要講解“怎么用GoEasy快速實現(xiàn)IM聊天”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用GoEasy快速實現(xiàn)IM聊天”吧!

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

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

2. 承上啟下的控制層（controller.js）:  控制層作用就是接受頁面操作的參數(shù)，調(diào)用service層，根據(jù)頁面的操作指令或者service層的反饋，負(fù)責(zé)對頁面的展示做出控制。不可以編寫任何與展示邏輯無關(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層的指令，實現(xiàn)業(yè)務(wù)邏輯，必要時候調(diào)用goeasy提供網(wǎng)絡(luò)通訊支持，或調(diào)用restapi層完成數(shù)據(jù)的查詢和保存。這一層包含所有的業(yè)務(wù)邏輯，任何業(yè)務(wù)邏輯相關(guān)的代碼，都不可以漏到其他層，確保只要service存在，整個項目的靈魂就存在，確保service層完全是原生代碼實現(xiàn)業(yè)務(wù)邏輯，而沒有類似于vue或者小程序前端框架的語法和代碼滲入，從而達(dá)到service層能夠在任何前端框架通用。

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

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

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

Ready, Go! 編碼開始：

1. 登錄頁面，這個最簡單，閉著眼睛畫個界面，用戶名密碼正確后，完成以下幾個步驟。
   1.1. 根據(jù)用戶名查詢出來的用戶，初始化全局變量：當(dāng)前用戶。
   1.2. 將controller層的onNewMessage, onFriendOnline，onFriendOffline賦值給service 。
   1.3. new goeasy建立長連接，記得要傳入userid。如需在subscriberPrencese用戶上下線提醒事件，或者在調(diào)用HereNow獲取在線用戶列表時，能拿到userId以外，更多的信息，可以在userdata里傳入。
   1.4. 調(diào)用restapi，查詢該用戶的好友列表，根據(jù)結(jié)果初始化本地好友列表friendlist。
   1.5. 將所有有監(jiān)聽的好友的friendUUID放入一個數(shù)組，調(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，同時將界面上在線用戶的頭像改為彩色。

2. 顯示好友列表（1.7）
   2.1. service層獲取當(dāng)前用戶信息，在頁面顯示當(dāng)前用戶的username和頭像。
   2.2. service獲取本地好友列表，然后controller將每個好友的頭像和名稱顯示到頁面上，對于當(dāng)前在線的用戶，旁邊顯示一個小綠點，并且為每個好友綁定一個點擊事件，點擊好友時，顯示聊天界面, 如果該好友有未讀消息的，紅色小氣泡顯示未讀消息數(shù)量。

3. 點擊一個好友，進(jìn)入與其聊天的界面
   3.1. 窗口頂部顯示聊天好友的名稱。
   3.2. 調(diào)用restapi根據(jù)當(dāng)前用戶的UUID和好友的friendUUID，查詢與該好友的聊天記錄，如果這個聊天記錄的sender是自己，就顯示在頁面的右邊，如果是朋友發(fā)的，則顯示在左邊。
   3.3. 將該好友在本地數(shù)據(jù)里未讀消息恢復(fù)為0。
   3.4. 并且將聊天記錄滾動到最下邊。
   3.5. 如果點擊返回，就直接調(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)然，你會發(fā)現(xiàn)在我們的示例代碼這個過程是在restapi里直接完成的，原因是為了demo的演示方便，我們模擬的服務(wù)器端行為，相信你懂的）
   4.3. 自己的消息發(fā)送成功后，顯示在聊天窗口的右邊。

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

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

至此，整個聊天功能就完成了，是不是很簡單呢。在整個demo中只用到了goeasy的四個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)然有全套代碼拉，如果放個zip文件的下載連接，顯得B格太低，老規(guī)矩，gitee見: https://gitee.com/goeasy-io/GoEasyDemo-IM-Chat

注意事項：      

1. 在restapi.js 里 可以找到用戶名和密碼

2. 在service.js里將appkey替換為您自己的common key

3. subscriberPrencense和hereNowByUserIds這兩個方法，默認(rèn)是關(guān)閉的

到此，相信大家對“怎么用GoEasy快速實現(xiàn)IM聊天”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！