vue2.0 + 腾讯实时通信IM、无UISDK方案

前言

• vue2.0如何引用腾讯IM实时通信，无UISDK方案，实现web通话，聊天，实时客服等功能。有UI方案需要支持ts语法以及component api引用形式。VUE3.0 用 有UI SDK更加友好

web如何接入IM

第一步 安装插件

npm install @tencentcloud/chat
// 发送图片、文件等消息需要腾讯云即时通信 IM 上传插件
npm install tim-upload-plugin --save
// 拦截或替换敏感词需要本地审核插件
npm install tim-profanity-filter-plugin --save

第二步 需要用到的地方展示

比如我需要的是查看消息列表 this.chat.getMessageList 登陆后 就可以用SDK 提供的方法了。

<script>
import TencentCloudChat from '@tencentcloud/chat'
import TIMUploadPlugin from 'tim-upload-plugin'
import TIMProfanityFilterPlugin from 'tim-profanity-filter-plugin'

export default {
  name: 'IMDetail',
  data () {
    return {
      chat:null,
      chatTypes:''
    }
  },
  mounted() {
    let options = {
      SDKAppID: 0 // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
    };
    // 创建 SDK 实例，`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例
    let chat = TencentCloudChat.create(options); // SDK 实例通常用 chat 表示

    chat.setLogLevel(0); // 普通级别，日志量较多，接入时建议使用

   // 注册腾讯云即时通信 IM 上传插件
    chat.registerPlugin({'tim-upload-plugin': TIMUploadPlugin});

    // 注册腾讯云即时通信 IM 本地审核插件
    chat.registerPlugin({'tim-profanity-filter-plugin': TIMProfanityFilterPlugin});
    this.chat = chat
    this.chatTypes = TencentCloudChat.TYPES
  },
  methods:{
 
    imLogin(row){
      let userSig = '' //签名声明
      let promise = this.chat.login({userID: 'DOCTOR1691333249166045186', userSig: userSig});
      promise.then(function(imResponse) {
        console.log(imResponse.data); // 登录成功
        if (imResponse.data.repeatLogin === true) {
          // 标识账号已登录，本次登录操作为重复登录。
          console.log(imResponse.data.errorInfo);
        }
      }).catch(function(imError) {
        console.warn('login error:', imError); // 登录失败的相关信息
      });
      this.chat.on(TencentCloudChat.EVENT.SDK_READY, this.onMessageReceived);
    },
    //拿消息列表
    onMessageReceived(){
      let that = this
      this.chat.getMessageList({
        conversationID: `1232456`,
      }).then( res =>{
        this.visible = true
        if (res.data.messageList.length >= 15) {
          that.nextReqMessageID = res.data.nextReqMessageID;
        }
        that.msgList = [...res.data.messageList, ...that.msgList];
      })
    }
  }
}
</script>
<template>
</template>