經常有朋友問起GoEasy如何實作IM，今天就手把手的帶大家從頭到尾用GoEasy實作一個完整IM聊天，全套代碼已經放在了gitee。
今日的前端技術發展可謂百花争鳴，為了確定本文能幫助到使用任何技術棧的前端工程師，Demo的源碼實作上選擇了最簡單的HTML+JQuery的方式，是以,不論您是準備用Uniapp開發移動APP，還是準備寫個小程式，不論你喜歡用React還是VUE，還是React-native或ionic, 或者您直接用原生Javascript和Typescript，都是可以輕松了解，全套代碼已經放在gitee上了，下載下傳後不需要搭建任何環境，直接用浏覽器打開，就可以用來聊天了。
咳咳咳，正文開始：
首先我們代碼層将整個功能分為四層：
-
華麗的展示層（index.html）：
你們負責功能優雅強大，我負責貌美如花。展示層其實就是純靜态的html，顯示界面，高端點說，就是負責人機互動的。
-
承上啟下的控制層（controller.js）:
控制層作用就是接受頁面操作的參數，調用service層，根據頁面的操作指令或者service層的回報，負責對頁面的展示做出控制。不可以編寫任何與展示邏輯無關的代碼，也就是不能侵入任何業務邏輯。衡量這一層做的好不好的的标準，就是假設删掉controller和view層，service能準确完整的描述所有的業務邏輯。
-
運籌帷幄的關鍵核心業務層（service.js）:
接受controller層的指令，實作業務邏輯，必要時候調用goeasy提供網絡通訊支援，或調用restapi層完成資料的查詢和儲存。這一層包含所有的業務邏輯，任何業務邏輯相關的代碼，都不可以漏到其他層，確定隻要service存在，整個項目的靈魂就存在，確定service層完全是原生代碼實作業務邏輯，而沒有類似于vue或者小程式前端架構的文法和代碼滲入，進而達到service層能夠在任何前端架構通用。
-
神通廣大的伺服器互動層（restapi.js）:
根據傳入的參數完成伺服器端接口的調用，來實作資料查詢或、修改或儲存，并且傳回結果，不參與任何業務邏輯。在實踐中大部分是負責發送http請求和伺服器互動。
分層的目标就是為了確定除了在核心業務層以外的其他層次能夠被輕易的替換。舉例：我們目前的版本是使用html+jquery完成，如果希望再開發一個Uniapp實作的小程式或者app，隻需要用Uniapp畫個新外殼，對controller層做一些修改，就可輕松完成一個小程式或者APP版的IM聊天，不需要對service和restapi做任何修改 。同理，如果伺服器端發生變化，或者更換了與伺服器的互動方式，隻需要對restapi做出修改，其他三層則不受任何影響。
OK, 有了如此清晰而優秀的代碼結構分層設計，就差一段優雅的代碼來實作了。
Ready, Go! 編碼開始：
-
登入頁面，這個最簡單，閉着眼睛畫個界面，使用者名密碼正确後，完成以下幾個步驟。
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，同時将界面上線上使用者的頭像改為彩色。
-
顯示好友清單（1.7）
2.1. service層擷取目前使用者資訊，在頁面顯示目前使用者的username和頭像。
2.2. service擷取本地好友清單，然後controller将每個好友的頭像和名稱顯示到頁面上，對于目前線上的使用者，旁邊顯示一個小綠點，并且為每個好友綁定一個點選事件，點選好友時，顯示聊天界面, 如果該好友有未讀消息的，紅色小氣泡顯示未讀消息數量。
-
點選一個好友，進入與其聊天的界面
3.1. 視窗頂部顯示聊天好友的名稱。
3.2. 調用restapi根據目前使用者的UUID和好友的friendUUID，查詢與該好友的聊天記錄，如果這個聊天記錄的sender是自己，就顯示在頁面的右邊，如果是朋友發的，則顯示在左邊。
3.3. 将該好友在本地資料裡未讀消息恢複為0。
3.4. 并且将聊天記錄滾動到最下邊。
3.5. 如果點選傳回，就直接調進入第二步。
-
在聊天界面，輸入消息後發送：
4.1. 目前使用者uuid作為senderUUID和消息内容組成chatMessage。
4.2. 調用restapi将chatMessage發往“伺服器”端，我們建議的方式是所有的消息發往自己的伺服器端，在伺服器端先儲存入庫，然後在服務端publish. 具體做法是将chatMessage轉換為字元串，入庫，然後将該好友的channel作為channel調用GoEasy完成publish。(當然，你會發現在我們的示例代碼這個過程是在restapi裡直接完成的，原因是為了demo的示範友善，我們模拟的伺服器端行為，相信你懂的）
4.3. 自己的消息發送成功後，顯示在聊天視窗的右邊。
-
收到新消息：
5.1. 在1.6定義了接收好友新消息的事件，當收到一條好友的新消息時。
5.2. 首先調用restapi儲存到伺服器。
5.3. 本地好友資料裡的未讀消息加1。
5.4. 如果目前界面是好友清單，将來自該朋友的未讀消息的數字顯示在界面上。
5.5. 如果收到的消息就是來自目前對話視窗，就将消息顯示到聊天視窗，并且調用service将本地資料裡該好友的未讀消息清0。
-
使用者上下線提醒
6.1. 在1.5監聽了使用者上下線，當收到一個使用者上線或下線的通知後（注意傳回的是一個清單，一次事件有可能有多個好友都發生了狀态變化）。
6.2. 修改将本地資料裡該好友對象線上狀态,如果是上線事件就顯示彩色，如果是下線就顯示黑白色。
至此，整個聊天功能就完成了，是不是很簡單呢。在整個demo中隻用到了goeasy的四個API
subscriber（接收消息），subscriberPrencense（接受上下線通知），hereNowByUserIds(擷取目前線上使用者清單）, publish(發送消息)，詳情可以參考goeasy官方文檔：
https://www.goeasy.io/cn/developers.html哼！這難道不是紙上談兵嗎？Talk is cheap, show me the code! 優雅的代碼在哪裡呢？
别着急，當然有全套代碼拉，如果放個zip檔案的下載下傳連接配接，顯得B格太低，老規矩，gitee見:
https://gitee.com/goeasy-io/GoEasyDemo-IM-Chat注意事項：
- 在restapi.js 裡 可以找到使用者名和密碼
- 在service.js裡将appkey替換為您自己的common key
- subscriberPrencense和hereNowByUserIds這兩個方法，預設是關閉的，需要掃碼添加GoEasy客服開通哦~
将代碼與本文一起對照閱讀後，要寫個IM，比畫個0還簡單，如果使用的是其他的前端技術架構如小程式和Reactnative，隻需要重新畫個外殼就好了！什麼,你不相信？如果覺得你被騙了，請掃碼添加微信好友，歡迎吐槽！沒有您暴風雨般的吐槽和春風一般的贊美，我如何進步呢？
彩彈在最後：
看了代碼的你，是不是發現我們的RESTAPI其實是個冒牌貨，并不會真的和遠端的某個伺服器互動，這是為了友善示範，我們定義了兩個變量來幫助模拟遠端資料的查詢，然後用localstorage來模拟伺服器的儲存，相信聰明的你，肯定已經get到我們的代碼思路了。
GoEasy簡介：
GoEasy是國内知名的第三方websocket推送服務，已經穩定運作了5年時間，支援千萬級消息并發，除了相容所有常見的浏覽器以外，同時也相容uni-app，各種小程式，以及vue、react-native等常見的前端架構。
GoEasy官網：
https://www.goeasy.io