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

参考代码：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/4   首页 上一页 1 2 3 4 下一页 尾页