这两年的直播真的是难以形容！经常有朋友问，我想实现实时聊天或者开发聊天室，如何入手？
GoEasy Live Room 聊天室示例
今天小编就教大家如何使用GoEasy制作聊天室，当然也可以用来在直播间进行互动。全套源码已经开源小程序聊天室源码，git地址：
本教程的主要目的是向大家介绍实现思路。为了保证本教程能够对使用不同前端技术的朋友有所帮助，采用了HTML+JQuery的方式。敬请关注。
这次我们要实现的聊天室有两个接口，分别是：
登录
登录页面
对于登录界面，我们期望：
实施步骤
登录界面的实现，不用多说，因为真的是So Easy！一个简单的界面，只包含三个简单的逻辑：
下面重点介绍聊天室的实现。
聊天室（直播间）
聊天室页面
当我们进入聊天室时，我们期望：
实施步骤步骤一：聊天室界面展示
1. 初始化：
当用户选择聊天室并显示聊天室界面时，我们首先需要进行如下初始化：
参考代码：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. 发送消息
参考代码（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);
}
});
};至此小程序聊天室源码，一个聊天室就完成了，是不是很简单？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 欧资源网
