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);
        }
    });
};

至此，一個聊天室就搞定了，是否是很簡單？

若是閱讀本文或開發中有任何問題，也歡迎在GoEasy官網添加GoEasy爲好友，來得到更多技術支持。