Websocket直播間聊天室教程 GoEasy快速實現聊天室

最近兩年直播那個火啊，真的是無法形容！經常有朋友問起，我想實現一個直播間聊天或者我想開發一個聊天室, 要如何開始呢？
今天小編就手把手的教你用GoEasy做一個聊天室，當然也可以用於直播間內的互動。全套原始碼已經開源，git地址： https://gitee.com/goeasy-io/GoEasyDemo-Live-Chatroom.git
本教程主要目的是為大家介紹實現思路，為了確保本教程能幫助到使用不同前端技術的朋友，採用了HTML + JQuery的方式，後續還會推出Uniapp(vue/nvue)和小程式版本，大家可以持續關注。
我們這次要實現的聊天室，有兩個介面，分別是：
登入介面
聊天室介面
登入
對於登入介面，我們期望：
使用者可以輸入自己的暱稱
使用者可以選擇自己喜歡的頭像
使用者可以選擇進入不同的聊天室（直播間）
實現步驟
登入介面的實現，不用多說，因為真的是So Easy! 一個簡單的介面，只包含三個簡單的邏輯：
驗證是否輸入暱稱
驗證是否選擇一個頭像
根據選擇進入相應的聊天室
下邊重點講一下聊天室的實現。
聊天室（直播間）
當我們進入一個聊天室後，我們期望：
使用者能看到當前有多少使用者線上，這個數字能夠實時的更新
使用者能看到當前線上使用者們的頭像，而且能夠實時的更新
如果有使用者進入或離開聊天室
a. 聊天室會有「XXX進來了"或"XXX離開了"的提示
b. 線上使用者的數字和使用者的頭像列表會隨之自動更新
使用者可以在聊天裡發言
使用者可以傳送道具：火箭或者比心
實現步驟
第一步：聊天室介面顯示
1. 初始化：
當使用者選擇了一個聊天室，顯示聊天室介面之前，我們首先要進行以下初始化工作：
初始化當前使用者currentUser，使用者id，暱稱，頭像
初始化當前聊天室ID: currentRoomId
初始化GoEasy物件，注意一定要加上userId引數（可以是該使用者的uuid或id等唯一標識，只有設定了userId的客戶端在上下線時，才會觸發上下線提醒）。同時需要將頭像和暱稱放入userData，當我們收到一個使用者上線提醒的時候，我們需要知道這個使用者的頭像和暱稱。
初始化onlineUsers，onlineUsers是用來存放當前聊天室線上使用者數和線上使用者列表。 將當前聊天室Id (currentRoomId)作為channel,執行goEasy.hereNow查詢此刻聊天室線上使用者數和使用者列表，賦值給onlineUsers。除了在進入聊天室的時候初始化onlineUsers，當有使用者進入或離開時，也會動態的更新onlineUsers。
以當前聊天室的id(currentRoomId)作為channel，執行subscriber方法監聽和接收聊天室新訊息。
以當前聊天室的id(currentRoomId)作為channel，執行subscriberPresence監聽使用者進入和離開事件。
參考程式碼：service.js
//初始化聊天室 this.joinRoom = function(userId,nickName, avatar, roomID) { //初始化當前使用者 this.currentUser = new User(userId, nickName, avatar); //初始化當前聊天室id this.currentRoomId = roomID; //初始化goeasy，建立長連線 this.goeasy = new GoEasy({ host: "hangzhou.goeasy.io", appkey: "您的appkey", userId: this.currentUser.id, userData: '{"nickname":"' + this.currentUser.nickname + '","avatar":"' + this.currentUser.avatar + '"}', onConnected: function () { console.log( "GoEasy connect successfully.") }, onDisconnected: function () { console.log("GoEasy disconnected.") } }); //查詢當前線上使用者列表，初始化onlineUsers物件 this.initialOnlineUsers(); //監聽使用者上下線提醒，實時更新onlineUsers物件 this.subscriberPresence(); //監聽和接收新訊息 this.subscriberNewMessage(); };
2. 頁面展示：
完成初始化之後，就跳轉到直播間介面，在頁面上顯示以下資料：
當前聊天室的名稱
聊天記錄，並且顯示聊天室介面
展示聊天室介面
參考程式碼：controller.js
//頁面切換到聊天室介面 function showChatRoom() { //更新房間名 $("#chatRoom-header").find(".current-chatRoom-name").text(loginCommand.roomName); //載入聊天曆史 var chatHistory = service.loadChatHistory(); chatHistory.forEach(function (item) { //展示傳送的訊息 var otherPerson = createCurrentChatRoomPerson(item.senderNickname + ":", item.content) $(".chatRoom-content-box").append($(otherPerson)); }); //隱藏登入介面 $(".chat-login-box").hide(); // //顯示聊天介面 $(".chatRoom-box").show(); // //滑動到最後一行 scrollBottom(); }
至此，我們已經完成了goeasy長連線的初始化，和一個聊天室靜態展示。接下來，我們一起來看看如何讓這個聊天室能夠動起來。
第二步：聊天室互動
1. 實時更新線上使用者數和頭像列表
之前在service.initialOnlineUsers方法已經初始化onlineUsers物件，但聊天室隨時都有使用者進進出出，所以我們接下來還需要能夠在有使用者上線或下線的時候能夠實時的更新onlineUsers，並且實時顯示在頁面上。 當我們收到一個使用者上線提醒，我們將新上線的使用者的資訊存入線上使用者物件onlineUsers裡，當有使用者離開時，在本地線上使用者列表裡刪除。
參考程式碼：service.js
//監聽使用者上下線時間，維護onlineUsers物件 this.subscriberPresence = function() { var self = this; this.goeasy.subscribePresence({ channel: this.currentRoomId, onPresence: function(presenceEvents) { presenceEvents.events.forEach(function(event) { var userId = event.userId; var count = presenceEvents.clientAmount; //更新onlineUsers線上使用者數 self.onlineUsers.count = count; //如果有使用者進入聊天室 if (event.action == "join" || event.action == "online") { var userData = JSON.parse(event.userData); var nickName = userData.nickname; var avatar = userData.avatar; var user = new User(userId, nickName, avatar); //將新使用者加入onlineUsers列表 self.onlineUsers.users.push(user); //觸發介面的更新 self.onJoinRoom(user.nickname, user.avatar); } else { for (var i = 0; i < self.onlineUsers.users.length; i++) { var leavingUser = self.onlineUsers.users[i]; if (leavingUser.id == userId) { var nickName = leavingUser.nickname; var avatar = leavingUser.avatar; //將離開的使用者從onlineUsers中刪掉 self.onlineUsers.users.splice(i, 1); //觸發介面的更新 self.onLeaveRoom(nickName, avatar); } } } }); }, onSuccess : function () { console.log("監聽成功") }, onFailed : function () { console.log("監聽失敗") } }); };
2. 傳送訊息
初始化一個chatMessage物件，包含傳送方id，暱稱，訊息內容，訊息型別為chat
將chatMessage轉換為一個Json格式的字串
呼叫GoEasy的Publish方法，完成訊息的傳送
參考程式碼（service.js)
this.sendMessage = function(content) { var message = new ChatMessage(this.currentUser.id,this.currentUser.nickname, MessageType.CHAT, content); var self = this; this.goeasy.publish({ channel: self.currentRoomId, message: JSON.stringify(message), onSuccess: function() { console.log("訊息釋出成功。"); }, onFailed: function(error) { console.log("訊息傳送失敗，錯誤編碼：" + error.code + " 錯誤資訊：" + error.content); } }); };
3. 接收和顯示新訊息/道具
之前我們已經在初始化頁面的時候執行了service.subscriberNewMessage()，當我們收到一條訊息時：
根據訊息型別判斷是一條聊天訊息，還是一個道具
如果收到的是一條聊天訊息，直接顯示到介面
如果是道具，就播放動畫
參考程式碼（service.js）
//監聽訊息或道具 this.subscriberNewMessage = function() { var self = this; this.goeasy.subscribe({ channel: this.currentRoomId, //替換為您自己的channel onMessage: function(message) { var chatMessage = JSON.parse(message.content); //todo:事實上不推薦在前端收到時儲存, 一個使用者開多個視窗，會導致重複儲存, 建議所有訊息都是都在傳送時在伺服器端儲存，這裡只是為了演示 self.restapi.saveChatMessage(self.currentRoomId, chatMessage); //如果收到的是一個訊息，就顯示為訊息 if (chatMessage.type == MessageType.CHAT) { var selfSent = chatMessage.senderUserId == self.currentUser.id; var content = JSON.parse(message.content); self.onNewMessage(chatMessage.senderNickname, content, selfSent); } //如果收到的是一個道具，就播放道具動畫 if (chatMessage.type == MessageType.PROP) { if (chatMessage.content == Prop.ROCKET) { self.onNewRocket(chatMessage.senderNickname); } if (chatMessage.content == Prop.HEART) { self.onNewHeart(chatMessage.senderNickname); } } } }); };
4. 傳送和接收並展示道具
其實和傳送訊息的實現幾乎是一樣的，具體程式碼請參考service.js的sendProp方法，controller.js的onNewHeart()方法。動畫的播放，使用了TweenMax這個庫，主要是為了展示一個實現思路，小編也不知道這個庫是否有很好的相容性，以及是否能夠用在Uniapp和小程式下，知道的朋友可以留言分享給大家。
this.sendProp = function(prop) { var self = this; var message = new ChatMessage(this.currentUser.id,this.currentUser.nickname, MessageType.PROP, prop); this.goeasy.publish({ channel: self.currentRoomId, message: JSON.stringify(message), onSuccess: function() { console.log("道具釋出成功。"); }, onFailed: function(error) { console.log("道具傳送失敗，錯誤編碼：" + error.code + " 錯誤資訊：" + error.content); } }); };
至此，一個聊天室就搞定了，是不是很簡單？