經常有朋友問起GoEasy如何實現IM，今天就手把手的帶大家從頭到尾用GoEasy實現一個完整IM聊天，全套程式碼已經放在了github。

今日的前端技術發展可謂百花爭鳴，為了確保本文能幫助到使用任何技術棧的前端工程師，Demo的原始碼實現上選擇了最簡單的HTML+JQuery的方式，所以,不論您是準備用Uniapp開發移動APP，還是準備寫個小程式，不論你喜歡用React還是VUE，還是React-native或ionic, 或者您直接用原生Javascript和Typescript，都是可以輕鬆理解，全套程式碼已經放在github上了，下載後不需要搭建任何環境，直接用瀏覽器開啟，就可以用來聊天了。

GoEasy IM示例

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

咳咳咳，正文開始：

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

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, 有了如此清晰而優秀的程式碼結構分層設計，就差一段優雅的程式碼來實現了。

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為channel，呼叫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.1. 視窗頂部顯示聊天好友的名稱。

3.2. 呼叫restapi根據當前使用者的UUID和好友的friendUUID，查詢與該好友的聊天記錄，如果這個聊天記錄的sender是自己，就顯示在頁面的右邊，如果是朋友發的，則顯示在左邊。

3.3. 將該好友在本地資料裡未讀訊息恢復為0。

3.4. 並且將聊天記錄滾動到最下邊。

4、在聊天介面，輸入訊息後傳送

4.1. 當前使用者uuid作為senderUUID和訊息內容組成chatMessage。

4.2. 呼叫restapi將chatMessage發往“伺服器”端，我們建議的方式是所有的訊息發往自己的伺服器端，在伺服器端先儲存入庫，然後在服務端publish。具體做法是將chatMessage轉換為字串，入庫，然後將該好友的channel作為channel呼叫GoEasy完成publish。(當然，你會發現在我們的示例程式碼這個過程是在restapi裡直接完成的，原因是為了demo的演示方便，我們模擬的伺服器端行為，相信你懂的）

4.3. 自己的訊息傳送成功後，顯示在聊天視窗的右邊。

5、收到新訊息

5.1. 在1.6定義了接收好友新訊息的事件，當收到一條好友的新訊息時。

5.2. 首先呼叫restapi儲存到伺服器。

5.3. 本地好友資料裡的未讀訊息加1。

5.4. 如果當前介面是好友列表，將來自該朋友的未讀訊息的數字顯示在介面上。

5.5. 如果收到的訊息就是來自當前對話視窗，就將訊息顯示到聊天視窗，並且呼叫service將本地資料裡該好友的未讀訊息清0。

6、使用者上下線提醒

6.1. 在1.5監聽了使用者上下線，當收到一個使用者上線或下線的通知後（注意返回的是一個列表，一次事件有可能有多個好友都發生了狀態變化）。

6.2. 修改將本地資料裡該好友物件線上狀態,如果是上線事件就顯示彩色，如果是下線就顯示黑白色。

至此，整個聊天功能就完成了，是不是很簡單呢。在整個demo中只用到了goeasy的四個API：subscriber（接收訊息），subscriberPrencense（接受上下線通知），hereNowByUserIds(獲取當前線上使用者列表）, publish(傳送訊息)。詳情可以參考goeasy官方文件。

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

注意事項：

1.在restapi.js 裡 可以找到使用者名稱和密碼

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

3.subscriberPrencense和hereNowByUserIds這兩個方法，預設是關閉的，需要聯絡GoEasy客服開通哦~

將程式碼與本文一起對照閱讀後，要寫個IM，比畫個0還簡單，如果使用的是其他的前端技術框架如小程式和React-native，只需要重新畫個外殼就好了！什麼,你不相信？如果覺得你被騙了，請聯絡GoEasy客服，歡迎吐槽！沒有您暴風雨般的吐槽和春風一般的讚美，我如何進步呢？

彩彈在最後：

看了程式碼的你，是不是發現我們的RESTAPI其實是個冒牌貨，並不會真的和遠端的某個伺服器互動，這是為了方便演示，我們定義了兩個變數來幫助模擬遠端資料的查詢，然後用localstorage來模擬伺服器的儲存，相信聰明的你，肯定已經get到我們的程式碼思路了。