共计 2854 个字符,预计需要花费 8 分钟才能阅读完成。
当我拿到这个需要,脑子里呈现了淘宝各大直播场景,尤为印象粗浅的李佳琪的‘我的妈呀!’,’买它买它买它!‘,‘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.instance, RongIM.userInfo);
},
onError: function (errorCode) {
RongIM.ready = false;
RongIM.userInfo = {
data: {},
status: “fail”,
info: errorCode
};
for (var i = 0, len = onConnectList.length; i < len; i++) {
onConnectListi;
}
}
});
function registerMessageType() {
var messageName = ‘PersonMessage’;
var objectName = ‘s:person’;
var isCounted = true;
var isPersited = true;
var mesasgeTag = new RongIMLib.MessageTag(isCounted, isPersited);
var prototypes = [‘name’, ‘portrait’, ‘id’];
RongIMClient.registerMessageType(messageName, objectName, mesasgeTag, prototypes);
var messageName = ‘LikerMessage’;
var objectName = ‘s:liker’;
var isCounted = false;
var isPersited = false;
var mesasgeTag = new RongIMLib.MessageTag(isCounted, isPersited);
var prototypes = [‘likerNum’];
RongIMClient.registerMessageType(messageName, objectName, mesasgeTag, prototypes);
}
聊天室退出
IM.joinChatRoom(chatRoomId, count, {
onSuccess: function () {
var chatRoom = {
id: chatRoomId,
currentUser: userInfo.data,
getInfo: function (params, callbacks) {
var order = params.order;
var memberCount = params.memberCount;
IM.getChatRoomInfo(chatRoomId, memberCount, order, callbacks);
},
quit: function (callbacks) {
IM.quitChatRoom(chatRoomId, callbacks);
},
sendMessage: function (msg, callbacks) {
var conversationType = RongIMLib.ConversationType.CHATROOM;
IM.sendMessage(conversationType, chatRoomId, msg, callbacks);
}
};
callbacks.onSuccess && callbacks.onSuccess(chatRoom);
},
onError: function (error) {
callbacks.onError && callbacks.onError(error);
}
});
聊天室发消息
let messageValue = textMessageInfo = {
content: content,
user: getUserInfo(RongIMLib.chatRoom.currentUser.userId)
}
var msg = new RongIMLib.TextMessage(messageValue);
RongIMLib.chatRoom.sendMessage(msg, {
onSuccess: function (message) {
updateMessage(message);
},
onError: function (errorCode, message) {
console.log(“ 发送聊天室音讯失败 ”, errorCode);
}
});
代码中仅有要害操作的局部代码,详细情况可参考 Demo 中的实现,此处仅提供局部代码不可间接跑通哦!!!
整体 demo 体验还是不错的,不过 Demo 没有任何框架,参考流程够用了,然而要嵌入到本人的我的项目中还是须要做一翻改变的。小倡议,要是融云能够出几款开包即用的 Demo 就更好了。体感不错后续持续优化~~~
如有相似需要的大家能够参考哦。