最近两年直播那个火啊，真的是无法形容！经常有朋友问起，我想实现一个直播间聊天或者我想开发一个聊天室, 要如何开始呢？

今天小编就手把手的教你用GoEasy做一个聊天室，当然也可以用于直播间内的互动。全套源码已经开源，git地址：https://gitee.com/goeasy-io/GoEasyDemo-html-LiveChatroom

本教程主要目的是为大家介绍实现思路，为了确保本教程能帮助到使用不同前端技术的朋友，采用了HTML + JQuery的方式，后续还会推出Uniapp(vue/nvue)和小程序版本，大家可以持续关注。

我们这次要实现的聊天室，有两个界面，分别是：

登录界面
聊天室界面

聊天室（直播间）

当我们进入一个聊天室后，我们期望：

用户能看到当前有多少用户在线，这个数字能够实时的更新
用户能看到当前在线用户们的头像，而且能够实时的更新
如果有用户进入或离开聊天室
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);//初始化当前聊天室idthis.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, //替换为您自己的channelonMessage: 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为好友，来获得更多技术支持。

GoEasy相关Demo推荐：
1、uniapp版本的直播间聊天室（支持打包成安卓/ios的app、微信小程序）：https://gitee.com/goeasy-io/GoEasyDemo-Uniapp-LiveChatRoom
2、uniapp版本的即时通讯IM（支持打包成安卓/ios的app、微信小程序）：https://gitee.com/goeasy-io/GoEasyDemo-Uniapp-IM-Chat
3、微信小程序版本的即时通讯IM：https://gitee.com/goeasy-io/GoEasyDemo-wxapp-IM-Chat
4、VUE版本的即时通讯IM：https://gitee.com/goeasy-io/GoEasyDemo-Vue-IM-Chat
5、H5版本的即时通讯IM：https://gitee.com/goeasy-io/GoEasyDemo-IM-Chat
6、H5版本的直播间聊天室：https://gitee.com/goeasy-io/GoEasyDemo-html-LiveChatroom

Websocket直播间聊天室教程 - GoEasy快速实现聊天室相关推荐

AI虚拟主播软件系统搭建24小时不间断运营的数字人直播间的操作教程分享
现在直播都必须真人直播,没法做到24小时不间断直播.虚拟人直播系统,一天24小时在线直播,不要吃饭,也不要工资,每时每刻都在赚音浪,带货,那么具体AI虚拟主播软件是怎么操作的呢?今天给大家分享下相关操 ...
php 聊天室教程,基于PHP的聊天室编程思想-PHP教程,PHP基础
1 页面登陆的基本要素你可以在我的竹叶看到登陆的表单,这里提供了最基本的登陆表单项 (1)登陆表单 (a)聊天表单的名字为chatform,我使用action=enter作为进入聊天室的入口,如果 ...
iOS直播间聊天室遇到的问题
Question: 1.刷新直播间消息机制该用哪种方法?哪一种更加合适? 2.聊天室该如何图文混排? 3.聊天室出现特殊字符临界点不换行?高度计算错误? 4.聊天室该如何加载网络图片? 5.聊天室如何 ...
全栈开发——动手打造属于自己的直播间（Vue+SpringBoot+Nginx）
前言大学的学习时光临近尾声,感叹时光匆匆,三年一晃而过.同学们都忙着找工作,我也在这里抛一份简历吧,欢迎各位老板和猎手诚邀.我们进入正题.直播行业是当前火热的行业,谁都想从中分得一杯羹,直播养活了一 ...
动手打造属于自己的直播间（Vue+SpringBoot+Nginx）
前言大学的学习时光临近尾声,感叹时光匆匆,三年一晃而过.同学们都忙着找工作,我也在这里抛一份简历吧,欢迎各位老板和猎手诚邀.我们进入正题.直播行业是当前火热的行业,谁都想从中分得一杯羹,直播养活了一 ...
抖音直播间挂人气协议工具
1.多账号登陆:即,可以选择导入账号,批量登陆,也可以选择不登录以未注册用户身份进入,并实现进入某房间后挂机功能(同时挂机号越多越好). 2.登陆的每账号实现独立IP:即每一个账号对应一个代理IP,A ...
抖音直播间带货最新玩法和运营技巧
现在几乎所有的品牌.商家.创业者都在探索直播带货之路,但是大多数人的直播之路走得并不顺利. 一场成功的直播,涉及到的运营细节太多了.如果没有前期的准备和策划,动不动就长达4~6个小时直播,根本无法顺利 ...
融云「聊天室属性」: 语聊房、直播间有序运行和丝滑体验的绝技
信息技术的发展一日千里,但当技术照进现实,转变为让娱乐.生活更丰富,让工作更方便的实用能力,这个过程并非一日之功,也不是一成不变. 比如,IM 即时通讯中聊天室产品的聊天室属性,表面"其貌不 ...
【php】基于Xajax的在线聊天室、直播间
关于php的Xajax到底是什么,这里不再介绍,详情可以看我<[php]Xajax Helloworld>(点击打开链接)与<[php]注册系统和使用Xajax即时验证用户名是否被占 ...

Websocket直播间聊天室教程 - GoEasy快速实现聊天室

登录

聊天室（直播间）

实现步骤

第一步：聊天室界面显示

第二步：聊天室互动

Websocket直播间聊天室教程 - GoEasy快速实现聊天室相关推荐

最新文章

热门文章