Recently, the company has a project that needs chat function for customer service, so we chose Tencent’S IM. It is very easy to control for the front end, and the front end only needs to send corresponding parameters, which is mostly controlled by the back end. Baidu did not find a lot of tutorials they wanted, so they wrote down the practice of referring to IM. Function:

1. One-to-one chat 2. Group chat 3. Default selected dialogue 4Copy the code
  • Official demo download address: github.com/tencentyun/…
  • The official SDK documentation: web.sdk.qcloud.com/im/doc/zh-c…
  • Project structure see Gitee address: gitee.com/jiangxingji…

Download IM and configure SDKAppID and SECRETKEY. IM is written by Vue, so you can see the changes for yourself.

Second, the default selected dialogue, all chat conversations are generated by the back end, the front end has a one-to-many situation, so we through the back end of the way to get the value to activate the session is selected by default. The checkoutConversation method in vuex is selected by default. Note: The checkoutConversation method must be isSDKReady before it is initialized, otherwise an error will be reported because it is not initialized.

onReadyStateUpdate({ name }) { const isSDKReady = name === this.TIM.EVENT.SDK_READY ? true : false; this.$store.commit("toggleIsSDKReady", isSDKReady); if (isSDKReady) { this.tim .getMyProfile() .then(({ data }) => { this.$store.commit("updateCurrentUserProfile", data); }) .catch((error) => { this.$store.commit("showMessage", { type: "error", message: error.message, }); }); this.$store.dispatch("getBlacklist"); TRTC calling this.trtccalling. Login ({sdkAppID: this.sdkappId, userID: this.userid, userSig: this.usersig,}); TRTC calling this.trtccalling. Log (this.groupID, 'this is the default group to communicate with ') this.$store. Dispatch ("checkoutConversation", This. GroupID // ID); }},Copy the code

3. Introduce projects with iframe

HTML part

<! -- iframedialog --> <base-dialog class="dialog-IM" width="1000px" :visible.sync="TimShow" height="800px"> <iframe :src="TimSrc" height="100%" width="100%"></iframe> </base-dialog>Copy the code

Arouse the IMdialog

async toTIM(groupId){
	const res =  await imMsgClear()
		if(res.success){
		     this.ImMessage = 0
		     this.TimSrc=process.env.IM_URL+'userId='+this.userInfo.id+'&userSig='+this.userInfo.imSign+'&groupId='+groupId
		     this.TimShow = true
		}

  }
Copy the code

Since the same ID cannot be used for multiple IM logins, the IM exit API will be called once every time the Dialog is closed. We will transfer the IM project to the parent page and call the logout method in Vuex in the IM project to add iframe to the method to transfer the value to the parent page

Logout (context) {// If there is a current session, Have read the report if when log out (context. RootState. Conversation. CurrentConversation. ConversationID) {Tim. SetMessageRead ({conversationID:  context.rootState.conversation.currentConversation.conversationID }) } tim.logout().then(() => { window.parent.postMessage('logout',"*"); context.commit('toggleIsLogin') context.commit('stopComputeCurrent') context.commit('reset') }) }Copy the code

The parent page accepts values

mounted() { let that = this; // Accept the value of the iframe page window.addEventListener("message", function (e) { // console.log(e.data) if(e.data=='logout'){ that.TimSrc = '' that.TimShow = false } }); }Copy the code

Tencent IM official vUE project, familiar with vUE should be very convenient to change. 2021-07-12 Added router, more convenient to get parameters.