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

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

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

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

对于登录界面，我们期望：

登录界面的实现，不用多说，因为真的是So Easy! 一个简单的界面，只包含三个简单的逻辑：

下边重点讲一下聊天室的实现。

聊天室（直播间）

//页面切换到聊天室界面
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为好友，来获得更多技术支持。
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