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

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);
  }
 });
};
 3/4   首页 上一页 1 2 3 4 下一页 尾页