這篇文章主要介紹“怎么用HTML+JQuery的方式實(shí)現(xiàn)直播間聊天室”，在日常操作中，相信很多人在怎么用HTML+JQuery的方式實(shí)現(xiàn)直播間聊天室問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么用HTML+JQuery的方式實(shí)現(xiàn)直播間聊天室”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！
創(chuàng)新互聯(lián)公司于2013年開始，先為平?jīng)龅确?wù)建站，平?jīng)龅鹊仄髽I(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為平?jīng)銎髽I(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
我們這次要實(shí)現(xiàn)的聊天室，有兩個(gè)界面，分別是：
登錄界面
聊天室界面
對(duì)于登錄界面，我們期望：
用戶可以輸入自己的昵稱
用戶可以選擇自己喜歡的頭像
用戶可以選擇進(jìn)入不同的聊天室（直播間）
實(shí)現(xiàn)步驟
登錄界面的實(shí)現(xiàn)，不用多說，因?yàn)檎娴氖荢o Easy! 一個(gè)簡(jiǎn)單的界面，只包含三個(gè)簡(jiǎn)單的邏輯：
驗(yàn)證是否輸入昵稱
驗(yàn)證是否選擇一個(gè)頭像
根據(jù)選擇進(jìn)入相應(yīng)的聊天室
下邊重點(diǎn)講一下聊天室的實(shí)現(xiàn)。
當(dāng)我們進(jìn)入一個(gè)聊天室后，我們期望：
用戶能看到當(dāng)前有多少用戶在線，這個(gè)數(shù)字能夠?qū)崟r(shí)的更新
用戶能看到當(dāng)前在線用戶們的頭像，而且能夠?qū)崟r(shí)的更新
如果有用戶進(jìn)入或離開聊天室
a. 聊天室會(huì)有“XXX進(jìn)來了”或”XXX離開了”的提示
b. 在線用戶的數(shù)字和用戶的頭像列表會(huì)隨之自動(dòng)更新
用戶可以在聊天里發(fā)言
用戶可以發(fā)送道具：火箭或者比心
1. 初始化：
當(dāng)用戶選擇了一個(gè)聊天室，顯示聊天室界面之前，我們首先要進(jìn)行以下初始化工作：
初始化當(dāng)前用戶currentUser，用戶id，昵稱，頭像
初始化當(dāng)前聊天室ID: currentRoomId
初始化GoEasy對(duì)象，注意一定要加上userId參數(shù)（可以是該用戶的uuid或id等唯一標(biāo)識(shí)，只有設(shè)置了userId的客戶端在上下線時(shí)，才會(huì)觸發(fā)上下線提醒）。同時(shí)需要將頭像和昵稱放入userData，當(dāng)我們收到一個(gè)用戶上線提醒的時(shí)候，我們需要知道這個(gè)用戶的頭像和昵稱。
初始化onlineUsers，onlineUsers是用來存放當(dāng)前聊天室在線用戶數(shù)和在線用戶列表。 將當(dāng)前聊天室Id (currentRoomId)作為channel,執(zhí)行g(shù)oEasy.hereNow查詢此刻聊天室在線用戶數(shù)和用戶列表，賦值給onlineUsers。除了在進(jìn)入聊天室的時(shí)候初始化onlineUsers，當(dāng)有用戶進(jìn)入或離開時(shí)，也會(huì)動(dòng)態(tài)的更新onlineUsers。
以當(dāng)前聊天室的id(currentRoomId)作為channel，執(zhí)行subscriber方法監(jiān)聽和接收聊天室新消息。
以當(dāng)前聊天室的id(currentRoomId)作為channel，執(zhí)行subscriberPresence監(jiān)聽用戶進(jìn)入和離開事件。
參考代碼：service.js
重慶分公司
重慶分公司
//初始化聊天室
this.joinRoom = function(userId,nickName, avatar, roomID) {
//初始化當(dāng)前用戶
this.currentUser = new User(userId, nickName, avatar);
//初始化當(dāng)前聊天室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.")
}
});
//查詢當(dāng)前在線用戶列表，初始化onlineUsers對(duì)象
this.initialOnlineUsers();
//監(jiān)聽用戶上下線提醒，實(shí)時(shí)更新onlineUsers對(duì)象
this.subscriberPresence();
//監(jiān)聽和接收新消息
this.subscriberNewMessage();
};2. 頁面展示：
完成初始化之后，就跳轉(zhuǎn)到直播間界面，在頁面上顯示以下數(shù)據(jù)：
當(dāng)前聊天室的名稱
聊天記錄，并且顯示聊天室界面
展示聊天室界面
參考代碼：controller.js
//頁面切換到聊天室界面
function showChatRoom() {
//更新房間名
$("#chatRoom-header").find(".current-chatRoom-name").text(loginCommand.roomName);
//加載聊天歷史
var chatHistory = service.loadChatHistory();
chatHistory.forEach(function (item) {
//展示發(fā)送的消息
var otherPerson = createCurrentChatRoomPerson(item.senderNickname + ":", item.content)
$(".chatRoom-content-box").append($(otherPerson));
});
//隱藏登錄界面
$(".chat-login-box").hide();
// //顯示聊天界面
$(".chatRoom-box").show();
// //滑動(dòng)到最后一行
scrollBottom();
}至此，我們已經(jīng)完成了goeasy長連接的初始化，和一個(gè)聊天室靜態(tài)展示。接下來，我們一起來看看如何讓這個(gè)聊天室能夠動(dòng)起來。
1. 實(shí)時(shí)更新在線用戶數(shù)和頭像列表
之前在service.initialOnlineUsers方法已經(jīng)初始化onlineUsers對(duì)象，但聊天室隨時(shí)都有用戶進(jìn)進(jìn)出出，所以我們接下來還需要能夠在有用戶上線或下線的時(shí)候能夠?qū)崟r(shí)的更新onlineUsers，并且實(shí)時(shí)顯示在頁面上。
當(dāng)我們收到一個(gè)用戶上線提醒，我們將新上線的用戶的信息存入在線用戶對(duì)象onlineUsers里，當(dāng)有用戶離開時(shí)，在本地在線用戶列表里刪除。
參考代碼：service.js
//監(jiān)聽用戶上下線時(shí)間，維護(hù)onlineUsers對(duì)象
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在線用戶數(shù)
self.onlineUsers.count = count;
//如果有用戶進(jìn)入聊天室
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);
//觸發(fā)界面的更新
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);
//觸發(fā)界面的更新
self.onLeaveRoom(nickName, avatar);
}
}
}
});
},
onSuccess : function () {
console.log("監(jiān)聽成功")
},
onFailed : function () {
console.log("監(jiān)聽失敗")
}
});
};2. 發(fā)送消息
初始化一個(gè)chatMessage對(duì)象，包含發(fā)送方id，昵稱，消息內(nèi)容，消息類型為chat
將chatMessage轉(zhuǎn)換為一個(gè)Json格式的字符串
調(diào)用GoEasy的Publish方法，完成消息的發(fā)送
參考代碼（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("消息發(fā)布成功。");
},
onFailed: function(error) {
console.log("消息發(fā)送失敗，錯(cuò)誤編碼：" + error.code + " 錯(cuò)誤信息：" + error.content);
}
});
};3. 接收和顯示新消息/道具
之前我們已經(jīng)在初始化頁面的時(shí)候執(zhí)行了service.subscriberNewMessage()，當(dāng)我們收到一條消息時(shí)：
根據(jù)消息類型判斷是一條聊天消息，還是一個(gè)道具
如果收到的是一條聊天消息，直接顯示到界面
如果是道具，就播放動(dòng)畫
參考代碼（service.js）
//監(jiān)聽消息或道具
this.subscriberNewMessage = function() {
var self = this;
this.goeasy.subscribe({
channel: this.currentRoomId, //替換為您自己的channel
onMessage: function(message) {
var chatMessage = JSON.parse(message.content);
//todo:事實(shí)上不推薦在前端收到時(shí)保存, 一個(gè)用戶開多個(gè)窗口，會(huì)導(dǎo)致重復(fù)保存, 建議所有消息都是都在發(fā)送時(shí)在服務(wù)器端保存，這里只是為了演示
self.restapi.saveChatMessage(self.currentRoomId, chatMessage);
//如果收到的是一個(gè)消息，就顯示為消息
if (chatMessage.type == MessageType.CHAT) {
var selfSent = chatMessage.senderUserId == self.currentUser.id;
var content = JSON.parse(message.content);
self.onNewMessage(chatMessage.senderNickname, content, selfSent);
}
//如果收到的是一個(gè)道具，就播放道具動(dòng)畫
if (chatMessage.type == MessageType.PROP) {
if (chatMessage.content == Prop.ROCKET) {
self.onNewRocket(chatMessage.senderNickname);
}
if (chatMessage.content == Prop.HEART) {
self.onNewHeart(chatMessage.senderNickname);
}
}
}
});
};4. 發(fā)送和接收并展示道具
其實(shí)和發(fā)送消息的實(shí)現(xiàn)幾乎是一樣的，具體代碼請(qǐng)參考service.js的sendProp方法，controller.js的onNewHeart()方法。動(dòng)畫的播放，使用了TweenMax這個(gè)庫，主要是為了展示一個(gè)實(shí)現(xiàn)思路，小編也不知道這個(gè)庫是否有很好的兼容性，以及是否能夠用在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("道具發(fā)布成功。");
},
onFailed: function(error) {
console.log("道具發(fā)送失敗，錯(cuò)誤編碼：" + error.code + " 錯(cuò)誤信息：" + error.content);
}
});
};到此，關(guān)于“怎么用HTML+JQuery的方式實(shí)現(xiàn)直播間聊天室”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
