2. 页面展示：
完成初始化之后，就跳转到直播间界面，在页面上显示以下数据：
当前聊天室的名称 聊天记录，并且显示聊天室界面 展示聊天室界面参考代码：controller.js
至此，我们已经完成了goeasy长连接的初始化，和一个聊天室静态展示。接下来，我们一起来看看如何让这个聊天室能够动起来。
第二步：聊天室互动 1. 实时更新在线用户数和头像列表
之前在service.initialOnlineUsers方法已经初始化onlineUsers对象，但聊天室随时都有用户进进出出，所以我们接下来还需要能够在有用户上线或下线的时候能够实时的更新onlineUsers，并且实时显示在页面上。 当我们收到一个用户上线提醒，我们将新上线的用户的信息存入在线用户对象onlineUsers里，当有用户离开时，在本地在线用户列表里删除。
参考代码：service.js
2. 发送消息
初始化一个chatMessage对象，包含发送方id，昵称，消息内容，消息类型为chat 将chatMessage转换为一个Json格式的字符串 调用GoEasy的Publish方法，完成消息的发送参考代码（service.js)
3. 接收和显示新消息/道具
之前我们已经在初始化页面的时候执行了service.subscriberNewMessage()，当我们收到一条消息时：
根据消息类型判断是一条聊天消息，还是一个道具 如果收到的是一条聊天消息，直接显示到界面 如果是道具，就播放动画参考代码（service.js）
4. 发送和接收并展示道具
其实和发送消息的实现几乎是一样的，具体代码请参考service.js的sendProp方法，controller.js的onNewHeart()方法。动画的播放，使用了TweenMax这个库，主要是为了展示一个实现思路，小编也不知道这个库是否有很好的兼容性，以及是否能够用在Uniapp和小程序下，知道的朋友可以留言分享给大家。
至此，一个聊天室就搞定了，是不是很简单？
总结
到此这篇关于Websocket直播间聊天室教程 GoEasy快速实现聊天室的文章就介绍到这了,更多相关Websocket聊天室内容请搜索七叶笔记以前的文章或继续浏览下面的相关文章希望大家以后多多支持七叶笔记！
