Project introduction

The project uses VUE as the front-end framework and IM SDK to provide a strong backing for instant messaging. The main functions are as follows:

  1. Single chat: send text, picture, file, expression, display unread message, audio and video invitation (invite pop-up box and ringtone prompt)
  2. Group chat: send text, picture, file, expression, show unread message, @ someone, group audio and video invitation (invite pop-up box and ring tone prompt)

A brief introduction to some of rongyun’s more important SDKS

  1. Text and emoticons are introduced first
< script SRC = "https://cdn.ronghub.com/RongIMLib-2.9.latest.js" > < / script > < script SRC = "https://cdn.ronghub.com/RongEmoji-2.2.7.js" > < / script > -- >Copy the code

After IM initialization, public cloud users can apply for appkeys on the official website

import { Message } from 'view-design' import { appConfig } from '.. /appConfig'; export default function init(userInfo, callbacks) { if (! userInfo.token) { return false; } const options = {navi: appconfig. appImNav, // logLevel: 0} const config = {size: 25, url: "/ / f2e.cn.ronghub.com/sdk/emoji-48.png," lang: "en", the extension: {dataSource: {u1F914: {/ / custom u1F914 corresponding expressions en: "Thinking face", // 英文名称 : "thinking face", // 英文名称 : "🤔", // native Emoji position: "0 0", // background position coordinates},}, url: "/ / cdn.ronghub.com/thinking-face.png", / / new Emoji background url},}; RongIMLib.RongIMEmoji.init(config); / / private cloud initialization RongIMLib. RongIMClient. Init (appConfig appKey, null, options); var instance = RongIMClient.getInstance(); / / connection status listener RongIMClient. SetConnectionStatusListener ({onChanged: function (status) { switch (status) { case RongIMLib.ConnectionStatus.CONNECTED: callbacks.CONNECTED && callbacks.CONNECTED(instance); break; Case RongIMLib. ConnectionStatus. CONNECTING: Message. The info (' IM are links'); break; Case RongIMLib. ConnectionStatus. DISCONNECTED: the Message. The info (DISCONNECTED 'IM'); break; Case RongIMLib. ConnectionStatus. KICKED_OFFLINE_BY_OTHER_CLIENT: Message. The info (' login other devices'); break; Case RongIMLib. ConnectionStatus. DOMAIN_INCORRECT: Message. The info (' domain name is not correct); break; Case RongIMLib.ConnectionStatus.NET WORK_UNAVAILABLE: Message. The info (' network is not available); break; }}}); RongIMClient. SetOnReceiveMessageListener ({/ / messages received onReceived: function (message) { console.log('rongcloud-message'+ message) callbacks.Received && callbacks.Received(message); }}); // start rongimClient.connect (userinfo.token, {onSuccess: function (id) {callbacks.success && callbacks.success (id); }, onTokenIncorrect: function () {message. warning('token is invalid '); }, onError: function (errorCode) { var info = ''; The switch (errorCode) {case RongIMLib. ErrorCode. TIMEOUT: info = 'TIMEOUT'; break; Case RongIMLib. ErrorCode. UNKNOWN_ERROR: info = 'unknown error; break; Case RongIMLib. ErrorCode. UNACCEPTABLE_PaROTOCOL_VERSION: info = 'unacceptable protocol version; break; Case RongIMLib. ErrorCode. IDENTIFIER_REJECTED: info = 'appkey is not correct; break; Case RongIMLib. ErrorCode. SERVER_UNAVAILABLE: info = 'server is unavailable; break; } Message.warning(errorCode) } }); }Copy the code

You can then introduce the init method on the main page and pass in the callback

CONNECTED: function () {console.log('im link ')}, Success: Function (id) {console.log('IM connection successful ') //}, Received: Async function (message) {console.log(' new message received ') // Logic processing when received},}; init(userInfo, callbacks);Copy the code
  1. Send text messages or emoticons.
// About emojis, after introducing the SDK above, you can get the list of emojis directly in the page. <div class="emoji-item" v-for="(item, index) in emojList" :key="index" v-html="item.node.outerHTML" @click="checkedEmoji(item.symbol)" ></div> // Initialization gets emojiList enclosing emojList = RongIMLib. RongIMEmoji. List / / click checkedEmoji expression package for some elements (symbol) {this. Stat. SendMsgVal + =  RongIMLib.RongIMEmoji.symbolToEmoji(symbol); / / expressions package need RongIMLib. RongIMEmoji. SymbolToEmoji parsing enclosing emojiShow = false; }, // const text = 'here is the input expression' // this.state.sendMsgVal let MSG = new rongimlib.textMessage ({ Content: RongIMLib. RongIMEmoji. SymbolToEmoji (text), extra: "additional information"}); Rongimclient.getinstance ().sendMessage(conversationType, // session type 1 single chat 3 private chat targetId, // send target MSG, // send content {onSuccess: Async function (message) {console.log(' sent successfully ')},},);Copy the code
  1. Upload pictures or files (need to introduce upload SDK separately, I am a private cloud, the public cloud can see the corresponding documents)
    <script src="./js/up/rc.js"></script>
    <script src="./js/up/upload.js"></script>
    <script src="./js/up/init.js"></script>
Copy the code

Method for uploading files File is the stream of uploaded binary files Type is the difference between images and files

uploadFile(file, type) { let _this = this; let fileType, size = 0; if (type === "img") { fileType = RongIMLib.FileType.IMAGE; } else if (type === "file") { fileType = RongIMLib.FileType.FILE; size = file.size; } let config = {domain: '${appconfig. appImUpload}', function (callback) { let caback = { onSuccess: function (data) { console.log(data, 'data token') callback(data.token); }, onError: function (error) { _this.$Message.warning("get file token error"); }}; RongIMClient.getInstance().getFileToken(fileType, caback, undefined); }}; Let uploadCallbacks = {onProgress: function (loaded, total) {// uploadCallbacks completed: Function (data) {if (type === "img") {let MSG = new rongimlib.imagemessage ({content: data.thumbnail, imageUri: `${appConfig.appImUpload}${data.rc_url.path}`, extra: "", }); _this.sendMsg(msg); } else if (type === "file") {// Let dataArr = data.rcurl.path && data.rc_url.path.split("/"); const name = dataArr[dataArr.length - 1]; const type = dataArr[dataArr.length - 1].split(".")[1]; let fileContent = { name: decodeURI(name), size: (size / 1024).toFixed(1) + "kB", type: type, fileUrl: `${appConfig.appImUpload}${data.rc_url.path}`, }; Let MSG = new rongimlib.filemessage (fileContent); _this.sendMsg(msg); }}, onError: function (error) {// upload failed},}; if (type === "img") { UploadClient.initImage(config, function (uploadFile) { uploadFile.upload(file, uploadCallbacks); }); } else if (type === "file") { UploadClient.initFile(config, function (uploadFile) { uploadFile.upload(file, uploadCallbacks); }); }},Copy the code

At this point, a simple chat has been implemented, the rest of the time to write, if you have any questions can be private chat me or comment.