Websocket IM聊天教程-教你用GoEasy快速實現IM聊天

本文會持續在OSChina碼雲上更新，最新版本請訪問https://gitee.com/goeasy-io/GoEasyDemo-IM-Chat

常常有朋友問起GoEasy如何實現IM，今天就手把手的帶你們從頭至尾用GoEasy實現一個完整IM聊天。

今日的前端技術發展可謂百家爭鳴，爲了確保本文能幫助到使用任何技術棧的前端工程師，Demo的源碼實現上選擇了最簡單的HTML+JQuery的方式，因此,不論您是準備用Uniapp開發移動APP，仍是準備寫個小程序，不論你喜歡用React仍是VUE，仍是React-native或ionic, 或者您直接用原生Javascript和Typescript，都是能夠輕鬆理解，全套代碼開源在OSCHINA碼雲（https://gitee.com/goeasy-io/GoEasyDemo-IM-Chat）上了，下載後不須要搭建任何環境，直接用瀏覽器打開，就能夠用來聊天了。

做爲一名程序員，在編碼以前，首先要作的固然是架構設計！什麼？確認不是裝逼？固然，別忘了星爺的那句話：我是一名程序員！沒有思想的程序員，跟鹹魚有什麼區別呢？

咳咳咳，正文開始：

首先咱們代碼層將整個功能分爲四層：

1. 華麗的展現層（index.html）：大家負責功能優雅強大，我負責貌美如花。展現層其實就是純靜態的html，顯示界面，高端點說，就是負責人機交互的。
2. 承上啓下的控制層（controller.js）: 控制層做用就是接受頁面操做的參數，調用service層，根據頁面的操做指令或者service層的反饋，負責對頁面的展現作出控制。不能夠編寫任何與展現邏輯無關的代碼，也就是不能侵入任何業務邏輯。衡量這一層作的好很差的的標準，就是假設刪掉controller和view層，service能準確完整的描述全部的業務邏輯。 
3. 指揮若定的關鍵核心業務層（service.js）: 接受controller層的指令，實現業務邏輯，必要時候調用goeasy提供網絡通信支持，或調用restapi層完成數據的查詢和保存。這一層包含全部的業務邏輯，任何業務邏輯相關的代碼，都不能夠漏到其餘層，確保只要service存在，整個項目的靈魂就存在，確保service層徹底是原生代碼實現業務邏輯，而沒有相似於vue或者小程序前端框架的語法和代碼滲入，從而達到service層可以在任何前端框架通用。
4. 神通廣大的服務器交互層（restapi.js）: 根據傳入的參數完成服務器端接口的調用，來實現數據查詢或、修改或保存，而且返回結果，不參與任何業務邏輯。在實踐中大部分是負責發送http請求和服務器交互。

分層的目標就是爲了確保除了在覈心業務層之外的其餘層次可以被輕易的替換。舉例：咱們當前的版本是使用html+jquery完成，若是但願再開發一個Uniapp實現的小程序或者app，只須要用Uniapp畫個新外殼，對controller層作一些修改，就可輕鬆完成一個小程序或者APP版的IM聊天，不須要對service和restapi作任何修改 。同理，若是服務器端發生變化，或者更換了與服務器的交互方式，只須要對restapi作出修改，其餘三層則不受任何影響。

OK, 有了如此清晰而優秀的代碼結構分層設計，就差一段優雅的代碼來實現了。

對歷來沒有使用過GoEasy的朋友來講，直接往下讀，可能感受稍微有點陡，能夠先花3分鐘瞭解一下GoEasy的快速入門：https://www.goeasy.io/cn/get-start.html

但對於已經對GoEasy有所瞭解的朋友來講，那就是輕車熟路了，再結合着咱們的開源Demo來讀本文，就更是能夠垂手可得的快速的作一個IM出來了~

Ready, Go! 編碼開始：

1.登陸界面：
這個最簡單，閉着眼睛畫個界面，用戶名密碼正確後，完成如下幾個步驟：
1.1.根據用戶名查詢出來的用戶，初始化全局變量：當前用戶
1.2.將controller層的onNewMessage, onFriendOnline，onFriendOffline賦值給service
1.3.new goeasy創建長鏈接，記得要傳入userid。如需在subscriberPrencese用戶上下線提醒事件，或者在調用HereNow獲取在線用戶列表時，能拿到userId之外，更多的信息，能夠在userdata裏傳入。
1.4.調用restapi，查詢該用戶的好友列表，根據結果初始化本地好友列表friendlist。
1.5.將須要監聽的好友的friendUUID放入一個數組，調用subscriberPrencense，監聽好友的上下線事件
1.6.以當前用戶的uuid爲channel，調用subscriber，監聽來自全部好友發來的消息。
1.7.顯示好友列表界面。
1.8.初始化好友的在線狀態，以數組形式傳入全部好友的userId，調用hereNowByUserIds，得到當前在線的好友列表，根據結果將friendlist裏屬於在線狀態的friend的在線狀態改成true，同時將界面上在線用戶的頭像改成彩色。

2.顯示好友列表（1.7）：
2.1.service層獲取當前用戶信息，在頁面顯示當前用戶的username和頭像。
2.2.service獲取本地好友列表，而後controller將每一個好友的頭像和名稱顯示到頁面上，對於當前在線的用戶，旁邊顯示一個小綠點，而且爲每一個好友綁定一個點擊事件，點擊好友時，顯示聊天界面, 若是該好友有未讀消息的，紅色小氣泡顯示未讀消息數量。

3.點擊一個好友，進入與其聊天的界面：
3.1.窗口頂部顯示聊天好友的名稱。
3.2.調用restapi根據當前用戶的UUID和好友的friendUUID，查詢與該好友的聊天記錄，若是這個聊天記錄的sender是本身，就顯示在頁面的右邊，若是是朋友發的，則顯示在左邊。
3.3.將該好友在本地數據裏未讀消息恢復爲0。
3.4.而且將聊天記錄滾動到最下邊。
3.5.若是點擊返回，就直接進入第二步。

4.在聊天界面，輸入消息後發送：
4.1.當前用戶uuid做爲senderUUID和消息內容組成chatMessage。
4.2.調用restapi將chatMessage發往「服務器」端，咱們建議的方式是全部的消息發往本身的服務器端，在服務器端先保存入庫，而後在服務端publish。具體作法是將chatMessage轉換爲字符串，入庫，而後將該好友的channel做爲channel調用GoEasy完成publish。(固然，你會發如今咱們的示例代碼這個過程是在restapi裏直接完成的，緣由是爲了demo的演示方便，咱們模擬的服務器端行爲，相信你懂的）
4.3.本身的消息發送成功後，顯示在聊天窗口的右邊。

5.收到新消息：
在1.6定義了接收好友新消息的事件，當收到一條好友的新消息時：
5.1.首先調用restapi保存到服務器。
5.2.本地好友數據裏的未讀消息加1。
5.3.若是當前界面是好友列表，未來自該朋友的未讀消息的數字顯示在界面上。
5.4.若是收到的消息就是來自當前對話窗口，就將消息顯示到聊天窗口，而且調用service將本地數據裏該好友的未讀消息清0。

6.用戶上下線提醒：
在1.5監聽了用戶上下線，當收到一個用戶上線或下線的通知後（注意返回的是一個列表，一次事件有可能有多個好友都發生了狀態變化）：
6.1.修改將本地數據裏該好友對象在線狀態,若是是上線事件就顯示彩色，若是是下線就顯示黑白色。

至此，整個聊天功能就完成了，是否是很簡單呢。在整個demo中只用到了goeasy的四個API：
subscriber（接收消息），subscriberPrencense（接受上下線通知），hereNowByUserIds(獲取當前在線用戶列表）, publish(發送消息)，詳情能夠參考goeasy官方文檔：https://www.goeasy.io/cn/developers.html

哼！這難道不是紙上談兵嗎？Talk is cheap, show me the code! 優雅的代碼在哪裏呢？

彆着急，全套代碼都開源在OSCHINA碼雲上， https://gitee.com/goeasy-io/GoEasyDemo-IM-Chat

注意事項：
1.在restapi.js裏能夠找到用戶名和密碼
2.在service.js裏將appkey替換爲您本身的common key
3.subscriberPrencense和hereNowByUserIds這兩個方法，默認是關閉的，須要掃碼添加GoEasy客服開通哦~

將代碼與本文一塊兒對照閱讀後，要寫個IM，比畫個0還簡單，若是使用的是其餘的前端技術框架如小程序和Reactnative，只須要從新畫個外殼就行了！什麼,你不相信？若是以爲你被騙了，請掃碼添加微信好友，歡迎吐槽！沒有您暴風雨般的吐槽和春風通常的讚美，我如何進步呢？

彩彈在最後： 看了代碼的你，是否是發現咱們的RESTAPI實際上是個冒牌貨，並不會真的和遠程的某個服務器交互，這是爲了方便演示，咱們定義了兩個變量來幫助模擬遠程數據的查詢，而後用localstorage來模擬服務器的保存，相信聰明的你，確定已經get到咱們的代碼思路了。