最新公告
  • 欢迎您光临欧资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 第二步聊天室聊天室做一个聊天室实时更新在线用户数和头像列表

    这两年的直播真的是难以形容!经常有朋友问,我想实现实时聊天或者开发聊天室,如何入手?

    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介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    欧资源网
    一个高级程序员模板开发平台

    发表评论