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

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); } }); };

至此，一个聊天室就搞定了，是不是很简单？

（编辑：ASP站长网）