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

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

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

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

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

登录界面 聊天室界面

登录

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

用户可以输入自己的昵称 用户可以选择自己喜欢的头像 用户可以选择进入不同的聊天室（直播间）

实现步骤

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

验证是否输入昵称

验证是否选择一个头像

根据选择进入相应的聊天室

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

聊天室（直播间）

当我们进入一个聊天室后，我们期望：

用户能看到当前有多少用户在线，这个数字能够实时的更新 用户能看到当前在线用户们的头像，而且能够实时的更新 如果有用户进入或离开聊天室 a. 聊天室会有“XXX进来了"或"XXX离开了"的提示 b. 在线用户的数字和用户的头像列表会随之自动更新 用户可以在聊天里发言 用户可以发送道具：火箭或者比心

实现步骤

第一步：聊天室界面显示

1. 初始化：

当用户选择了一个聊天室，显示聊天室界面之前，我们首先要进行以下初始化工作：

初始化当前用户currentUser，用户id，昵称，头像 初始化当前聊天室ID: currentRoomId 初始化GoEasy对象，注意一定要加上userId参数（可以是该用户的uuid或id等唯一标识，只有设置了userId的客户端在上下线时，才会触发上下线提醒）。同时需要将头像和昵称放入userData，当我们收到一个用户上线提醒的时候，我们需要知道这个用户的头像和昵称。 初始化onlineUsers，onlineUsers是用来存放当前聊天室在线用户数和在线用户列表。 将当前聊天室Id (currentRoomId)作为channel,执行goEasy.hereNow查询此刻聊天室在线用户数和用户列表，赋值给onlineUsers。除了在进入聊天室的时候初始化onlineUsers，当有用户进入或离开时，也会动态的更新onlineUsers。 以当前聊天室的id(currentRoomId)作为channel，执行subscriber方法监听和接收聊天室新消息。 以当前聊天室的id(currentRoomId)作为channel，执行subscriberPresence监听用户进入和离开事件。

 1/4    1 2 3 4 下一页 尾页