uni-app vue2 集成TIM

1.安装依赖包

"cos-wx-sdk-v5": "^1.0.10",
"tim-wx-sdk": "^2.16.1"

2.界面资源集成

2.1界面和组件

复制 tim 到src 下,和pages 同目录下,作为子包引入

2.2 注入服务

/**
     * 初始化TIM
     */
    initTIM(){
      uni.$TUIKit = TIM.create({
        SDKAppID: '1你的tim appid'
      })
      uni.$TUIKitEvent =TIM.EVENT
    },

2.2 增加路由信息

pages.json

 "subPackages": [
    {
      "root": "TIM",
      "pages": [
        {
          "path": "pages/Conversation/conversation",
          "style": {
            "navigationBarTitleText": "会话列表",
            "navigationStyle": "custom"
          }
        },
        {
          "path": "pages/Chat/chat",
          "style": {
            "navigationBarTitleText": "会话",
            "navigationStyle": "custom"
          }
        },
        {
          "path": "pages/TUI-Conversation/create-conversation/create",
          "style": {
            "navigationBarTitleText": "发起会话",
            "navigationStyle": "custom"
          }
        }
      ]
    }
  ],

2.4 main,js

// 腾讯TIM 即时通讯
// 全局mixins,用于实现setData等功能';
import Mixin from './TIM/polyfill/mixins';
Vue.mixin(Mixin);

app 启动注入服务

登录IM

 // 获取用户信息
    GetInfo({ commit, state,dispatch }) {
      return new Promise((resolve, reject) => {
        getInfo().then(res => {
          const user = res.user
       
          commit('SET_NAME', username)
          ......
          // TIM 登录
          // #ifdef MP-WEIXIN || APP-PLUS
          dispatch("TIMLogin",res.user)
          // #endif
     
          resolve(res)
        })
        .catch(error => {
          reject(error)
        })
      })
    },

在 vuex 登录后注册信息

// 及时通讯登录
    TIMLogin({},user){
      // 更新时调用
      if(uni.$TUIKit.SDK_READY){
        uni.$TUIKit.updateMyProfile({
          nick: user.nickName,
          avatar: user.avatar||'',
        }).then(res=> {
          console.log('TIM 更新资料成功',res.data);
        }).catch(err=> {
          console.warn('TIM 更新资料失败1:', err);
        });
        return
      }

      console.info('TIM-Login 开始',user)
      let sig = genTestUserSig(user.memberId)
      uni.$TUIKit.login({userID: user.memberId, userSig: sig.userSig})
      .then(imResponse=> {
        console.log('TIM登录成功',imResponse.data);
      })
      .catch(imError=>{
        console.warn('TIM登录失败:', imError);
      });
      
      // 登录成功后更新个人资料
      uni.$TUIKit.on(uni.$TUIKitEvent.SDK_READY , e=>{
        uni.$TUIKit.SDK_READY = true // 记录状态
        uni.$TUIKit.updateMyProfile({
          nick: user.nickName,
          avatar: user.avatar||'',
        }).then(res=> {
          console.log('TIM 更新资料成功',res.data);
        }).catch(err=> {
          console.warn('TIM 更新资料失败2:', err);
        });
      });
    },

事件

import TIM from 'tim-js-sdk';
// import TIM from 'tim-wx-sdk'; // 微信小程序环境请取消本行注释,并注释掉 import TIM from 'tim-js-sdk';
import TIMUploadPlugin from 'tim-upload-plugin'; // 使用前请将 IM SDK 升级到v2.9.2或更高版本
import TIMProfanityFilterPlugin from 'tim-profanity-filter-plugin'; // 使用前请将 IM SDK 升级到v2.24.0或更高版本
 
// 创建 SDK 实例,TIM.create() 方法对于同一个 SDKAppID 只会返回同一份实例
let options = {
  SDKAppID: 0 // 接入时需要将0替换为您的即时通信应用的 SDKAppID
};
let tim = TIM.create(options); // SDK 实例通常用 tim 表示
// 设置 SDK 日志输出级别,详细分级请参见 setLogLevel 接口的说明
tim.setLogLevel(0); // 普通级别,日志量较多,接入时建议使用
// tim.setLogLevel(1); // release级别,SDK 输出关键信息,生产环境时建议使用
 
// 注册腾讯云即时通信 IM 上传插件,即时通信 IM SDK 发送图片、语音、视频、文件等消息需要使用上传插件,将文件上传到腾讯云对象存储
tim.registerPlugin({'tim-upload-plugin': TIMUploadPlugin});
 
// 注册腾讯云即时通信 IM 本地审核插件
tim.registerPlugin({'tim-profanity-filter-plugin': TIMProfanityFilterPlugin});
 
// 监听事件,如:
tim.on(TIM.EVENT.SDK_READY, function(event) {
  // 收到离线消息和会话列表同步完毕通知,接入侧可以调用 sendMessage 等需要鉴权的接口
  // event.name - TIM.EVENT.SDK_READY
});
 
tim.on(TIM.EVENT.MESSAGE_RECEIVED, function(event) {
  // 收到推送的单聊、群聊、群提示、群系统通知的新消息,可通过遍历 event.data 获取消息列表数据并渲染到页面
  // event.name - TIM.EVENT.MESSAGE_RECEIVED
  // event.data - 存储 Message 对象的数组 - [Message]
});
 
tim.on(TIM.EVENT.MESSAGE_MODIFIED, function(event) {
  // 收到消息被第三方回调修改的通知,消息发送方可通过遍历 event.data 获取消息列表数据并更新页面上同 ID 消息的内容(v2.12.1起支持)
  // event.name - TIM.EVENT.MESSAGE_MODIFIED
  // event.data - 存储被第三方回调修改过的 Message 对象的数组 - [Message]
});
 
tim.on(TIM.EVENT.MESSAGE_REVOKED, function(event) {
  // 收到消息被撤回的通知。使用前需要将SDK版本升级至v2.4.0或更高版本
  // event.name - TIM.EVENT.MESSAGE_REVOKED
  // event.data - 存储 Message 对象的数组 - [Message] - 每个 Message 对象的 isRevoked 属性值为 true
});
 
tim.on(TIM.EVENT.MESSAGE_READ_BY_PEER, function(event) {
  // SDK 收到对端已读消息的通知,即已读回执。使用前需要将SDK版本升级至v2.7.0或更高版本。仅支持单聊会话
  // event.name - TIM.EVENT.MESSAGE_READ_BY_PEER
  // event.data - event.data - 存储 Message 对象的数组 - [Message] - 每个 Message 对象的 isPeerRead 属性值为 true
});
 
tim.on(TIM.EVENT.CONVERSATION_LIST_UPDATED, function(event) {
  // 收到会话列表更新通知,可通过遍历 event.data 获取会话列表数据并渲染到页面
  // event.name - TIM.EVENT.CONVERSATION_LIST_UPDATED
  // event.data - 存储 Conversation 对象的数组 - [Conversation]
});
 
tim.on(TIM.EVENT.GROUP_LIST_UPDATED, function(event) {
  // 收到群组列表更新通知,可通过遍历 event.data 获取群组列表数据并渲染到页面
  // event.name - TIM.EVENT.GROUP_LIST_UPDATED
  // event.data - 存储 Group 对象的数组 - [Group]
});
 
tim.on(TIM.EVENT.PROFILE_UPDATED, function(event) {
  // 收到自己或好友的资料变更通知
  // event.name - TIM.EVENT.PROFILE_UPDATED
  // event.data - 存储 Profile 对象的数组 - [Profile]
});
 
tim.on(TIM.EVENT.BLACKLIST_UPDATED, function(event) {
  // 收到黑名单列表更新通知
  // event.name - TIM.EVENT.BLACKLIST_UPDATED
  // event.data - 存储 userID 的数组 - [userID]
});
 
tim.on(TIM.EVENT.ERROR, function(event) {
  // 收到 SDK 发生错误通知,可以获取错误码和错误信息
  // event.name - TIM.EVENT.ERROR
  // event.data.code - 错误码
  // event.data.message - 错误信息
});
 
tim.on(TIM.EVENT.SDK_NOT_READY, function(event) {
  // 收到 SDK 进入 not ready 状态通知,此时 SDK 无法正常工作
  // event.name - TIM.EVENT.SDK_NOT_READY
});
 
tim.on(TIM.EVENT.KICKED_OUT, function(event) {
  // 收到被踢下线通知
  // event.name - TIM.EVENT.KICKED_OUT
  // event.data.type - 被踢下线的原因,例如 :
  //   - TIM.TYPES.KICKED_OUT_MULT_ACCOUNT 多实例登录被踢
  //   - TIM.TYPES.KICKED_OUT_MULT_DEVICE 多终端登录被踢
  //   - TIM.TYPES.KICKED_OUT_USERSIG_EXPIRED 签名过期被踢(v2.4.0起支持)。
});
 
tim.on(TIM.EVENT.NET_STATE_CHANGE, function(event) {
  // 网络状态发生改变(v2.5.0 起支持)
  // event.name - TIM.EVENT.NET_STATE_CHANGE
  // event.data.state 当前网络状态,枚举值及说明如下:
  //   - TIM.TYPES.NET_STATE_CONNECTED - 已接入网络
  //   - TIM.TYPES.NET_STATE_CONNECTING - 连接中。很可能遇到网络抖动,SDK 在重试。接入侧可根据此状态提示“当前网络不稳定”或“连接中”
  //   - TIM.TYPES.NET_STATE_DISCONNECTED - 未接入网络。接入侧可根据此状态提示“当前网络不可用”。SDK 仍会继续重试,若用户网络恢复,SDK 会自动同步消息
});
 
tim.on(TIM.EVENT.FRIEND_LIST_UPDATED, function(event) {
  // 收到好友列表更新通知(v2.13.0起支持)
  // event.name - TIM.EVENT.FRIEND_LIST_UPDATED
  // event.data - 存储 Friend 对象的数组 - [Friend]
});
 
tim.on(TIM.EVENT.FRIEND_APPLICATION_LIST_UPDATED, function(event) {
  // 收到好友申请列表更新通知(v2.13.0起支持)
  // event.name - TIM.EVENT.FRIEND_APPLICATION_LIST_UPDATED
  // friendApplicationList - 好友申请列表 - [FriendApplication]
  // unreadCount - 好友申请的未读数
  // const { friendApplicationList, unreadCount } = event.data;
  // 发送给我的好友申请(即别人申请加我为好友)
  // const applicationSentToMe = friendApplicationList.filter((friendApplication) => friendApplication.type === TIM.TYPES.SNS_APPLICATION_SENT_TO_ME);
  // 我发送出去的好友申请(即我申请加别人为好友)
  // const applicationSentByMe = friendApplicationList.filter((friendApplication) => friendApplication.type === TIM.TYPES.SNS_APPLICATION_SENT_BY_ME);
});
 
tim.on(TIM.EVENT.FRIEND_GROUP_LIST_UPDATED, function(event) {
  // 收到好友分组列表更新通知(v2.13.0起支持)
  // event.name - TIM.EVENT.FRIEND_GROUP_LIST_UPDATED
  // event.data - 存储 FriendGroup 对象的数组 - [FriendGroup]
});
 
// 开始登录
tim.login({userID: 'your userID', userSig: 'your userSig'});
上一篇
下一篇