When I got this demand, taobao’s major live scenes appeared in my mind, especially impressed by Li Jiaqi’s ‘My mother! Buy it buy it buy it! ‘ ‘Oh my God! ‘. And then quietly turned on the live stream. Ok, a little off topic, in fact, I just want to know, before I was watching the live broadcast as a person watching the live broadcast, when I received such a demand, of course, I have to go back to have a look, sure enough, the mood is different.

. There is no need to repeat the journey here… The first wave of experience is complete. Wait quietly for the detailed requirements of the company.

During the demand assessment, the company raised the need to use the SDK of Rongyun. Let’s first understand the relevant content of the chat room scene. With my previous experience, the purpose of looking at the document is quite clear. Rongyun’s document will have a scene introduction, which is good, with the needs and previous experience experience, it is easy to find what I want.

Extraction of functions:

  1. First I need a chat room

  2. Secondly, I need to send a message. Well, the message is clearly divided, including the text and expressions I saw at that time.

  3. What about my present?

  4. What about my likes?

  5. How do I display personnel joining and exiting?

Although there are problems, I personally think it will be different to experience it first. Check out the Demo can be used for reference.

Reference: docs. Rongcloud. Cn/v2 / views/im…

See Demo: github.com/rongcloud/w…

Rendering to view combines cloud demo online experience address: rongcloud. Making. IO/websdk – demo…

This has fulfilled most of my needs, joining, texting, liking, etc. After looking at the Demo, I found that many of my concerns were solved, such as people joining and liking, and I saw that the Demo directly used custom messages, which was good. Point a ~

The last part of the core code

Initializing a connection

RongIMLib.RongIMClient.init(appKey); registerMessageType(); RongIMClient.connect(token, { onSuccess: function (userId) { RongIM.ready = true; Rongim. userInfo = {data: {userId: userId}, status: "OK ", info:" link successful "}; 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++) { onConnectList[i](RongIM.instance, RongIM.userInfo); }}}); 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); }Copy the code

Chat room join

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); }});Copy the code

Messaging in chat rooms

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(" failed to send chat message ", errorCode); }});Copy the code

Only part of the key operation code in the code, details can refer to the implementation of the Demo, here only part of the code can not directly run through oh!!

The overall demo experience is still good, but demo does not have any framework, the reference process is enough, but to embed in their own projects or need to do a change. Small advice, if the cloud can be a few open – to – use Demo better. Good sense of body continue to optimize ~~~

If have similar demand everybody can refer to oh.