使用融云 IM SDK 实现 H5 直播聊天
当我拿到这个需求,脑子里出现了淘宝各大直播场景,尤为印象深刻的李佳琪的 ‘我的妈呀!’,’买它买它买它!‘,‘Oh my god!’。然后默默点开了直播。好吧,有点跑题,其实我就是想去了解下,之前都是作为看直播的人在看直播,当自己接到了这样的需求当然还要再进去看看,果然心情不一样了。
。。。。此处不赘述心路历程了。。。。第一波体验完成。静静等待公司的详细需求。
需求评估时公司提出来需要用融云的 SDK,让我们先了解下聊天室场景的相关内容。带着我之前的体验,去看文档目的还是挺明确的。融云的文档会有场景介绍,这点还是不错的,配上需求和之前体验的心得,很容易找到了我想要的东西。
抽离出的功能:
- 首先我需要一个聊天室
- 其次我需要发送消息,嗯消息分的很明确,当时看到的文本和表情都有。
- 我的礼物怎么办?
- 我的点赞怎么办?
- 人员加入退出我要如何显示?
虽然带有问题,但是个人觉得还是先上手体验下会又不一样的感受。查看到有 Demo 正好可以参考借鉴下。
参考文档: https://docs.rongcloud.cn/v2/views/im/noui/guide/chatroom/setting/include/web.html
参考 Demo:https://github.com/rongcloud/websdk-demo/tree/master/chatroom-h5
效果图可查看融云 demo 的线上体验地址:https://rongcloud.github.io/websdk-demo/chatroom-h5/demo.html?id=11
这样我的大部分需求都实现了,加入,发消息,点赞等。看 Demo 后发现我的担心解决了很多,比如说人员加入和点赞,看 Demo 中直接使用了自定义消息,这点还是很不错的。点个赞~
上一部分核心代码
初始化连接
RongIMLib.RongIMClient.init(appKey);
registerMessageType();
RongIMClient.connect(token, {
onSuccess: function (userId) {
RongIM.ready = true;
RongIM.userInfo = {
data: {
userId: userId },
status: "ok",
info: "链接成功"
};
callbacks.onConnected && callbacks.onConnected(RongIM