腾讯im，视频语音，自定义消息，全解

Ftally

已于 2023-03-31 17:33:30 修改

阅读量1.4k

点赞数 1

文章标签： javascript 前端 vue.js

于 2023-03-31 17:27:10 首次发布

本文链接：https://blog.csdn.net/ftally/article/details/129884541

版权

app.vue 可直接复制,修改对应获取 sing的接口，和sdkAppid即可

<script>
	import TIM from 'tim-wx-sdk';
	import COS from 'cos-wx-sdk-v5';
	import permision from "js_sdk/wa-permission/permission.js"
	import TIMUploadPlugin from 'tim-upload-plugin';
	// const TIMS = require('./wxcomponents/TUICallKit/lib/tim-wx-sdk')
	// const { genTestUserSig } = require('./debug/GenerateTestUserSig.js');
	const TUICallKit = uni.requireNativePlugin('TencentCloud-TUICallKit');
	const TUICallingEvent = uni.requireNativePlugin('globalEvent');
	uni.$TUICallKit = TUICallKit; // 全局引入
	uni.$TUICalling = TUICallKit; // 全局引入

	console.log(TUICallKit, "TUICallKit ｜ ok ————————————————————————++++++++++++++++="); // 本地日志

	// const TUICallingEvent = uni.requireNativePlugin('globalEvent');
	import {
		genTestUserSig
	} from './debug/GenerateTestUserSig.js';
	// var jpushModule = uni.requireNativePlugin("JG-JPush");
	import imLogin from '@/api/im.js'; // 引入
	export default {
		data() {
			return {
				timer: 0
			}
		},
		onShow() {
			this.resTime()
		},
		onLaunch() {
			uni.setStorageSync('repeatLogin', 0)
			const SDKAppID = genTestUserSig('').sdkAppID //你的sdkAppID 
			uni.setStorageSync("SDKAppID", SDKAppID);
			uni.setStorageSync("islogin", true);
			// 重点注意： 为了 uni-app 更好地接入使用 tim，快速定位和解决问题，请勿修改 uni.$TUIKit 命名。
			// 如果您已经接入 tim ，请将 uni.tim 修改为 uni.$TUIKit。
			uni.$TUIKit = TIM.create({
				SDKAppID: Number(SDKAppID)
			});
			// if (uni.getSystemInfoSync().platform == 'ios') {
			// 	uni.$TUIKit.registerPlugin({
			// 		'cos-wx-sdk': COS
			// 	});
			// } else {
			// 	uni.$TUIKit.registerPlugin({
			// 		'tim-upload-plugin': TIMUploadPlugin
			// 	});
			// }
			// #endif
			uni.$TUIKitTIM = TIM;
			uni.$TUIKitEvent = TIM.EVENT;
			uni.$TUIKitVersion = TIM.VERSION;
			uni.$TUIKitTypes = TIM.TYPES; // 监听系统级事件
			uni.$resetLoginData = this.resetLoginData();
			uni.$TUIKit.on(uni.$TUIKitEvent.SDK_READY, this.onSDKReady);
			uni.$TUIKit.on(uni.$TUIKitEvent.SDK_NOT_READY, this.onSdkNotReady);
			uni.$TUIKit.on(uni.$TUIKitEvent.KICKED_OUT, this.onKickedOut);
			uni.$TUIKit.on(uni.$TUIKitEvent.ERROR, this.onTIMError);
			uni.$TUIKit.on(uni.$TUIKitEvent.NET_STATE_CHANGE, this.onNetStateChange);
			uni.$TUIKit.on(uni.$TUIKitEvent.SDK_RELOAD, this.onSDKReload);
			this.loginTim()
				},
				globalData: {
					// userInfo: userID userSig token phone
					userInfo: null,
					// 个人信息
					userProfile: null,
					isTUIKit: true,
					headerHeight: 0,
					statusBarHeight: 0,
					SDKAppID: genTestUserSig('').sdkAppID,
				},
				methods: {
			
					onTIMError() {
						this.loginTim()
					},
					onSDKReady({
						name
					}) {
						const isSDKReady = name === uni.$TUIKitEvent.SDK_READY ? true : false
						if (isSDKReady == true) {
							uni.setStorageSync('repeatLogin', 1)

						} else {
							uni.removeStorageSync('repeatLogin')
							uni.setStorageSync('repeatLogin', 2)
						}
						uni.$emit('isSDKReady', {
							isSDKReady: true
						});
					},
					setJYJPushAlias(userAlias) {
						setTimeout(() => {
							jpushModule.setAlias({
								'alias': userAlias
							})
						}, 5000)
					},
					async loginIimSp() {
						let that = this
                        // 通过 imid 拿签名的接口
						const [err, data] = await imLogin.getUsersig({
							identifier: uni.getStorageSync('userInfo').im_id
						})

						if (data.code == 200) {
							that.globalData.userInfo.userSigSp = data.data
							// #ifdef APP-PLUS
							// TUICallKit login
							uni.$TUICallKit.login({
								SDKAppID: genTestUserSig('').sdkAppID, // 开通实时音视频服务创建应用后分配的 SDKAppID
								userID: uni.getStorageSync('userInfo').im_id,
								userSig: that.globalData.userInfo.userSigSp
							}, (res) => {
								if (res.code === 0) {
									uni.$TUICallKit.enableFloatWindow(true); // 开启小浮窗
								} else {
									console.error(`login failed, error message = ${res.msg}`);
								}
							});
							// #endif
						}
					},
					async loginTim(id, sing) {
						let that = this
						if (uni.getStorageSync('Authorization')) {
							this.loginIimSp()
							const [err, data] = await imLogin.imUser({
								identifier: uni.getStorageSync('userInfo').im_id
							})
							if (data.code == 200) {
								that.globalData.SDKAppID = genTestUserSig('').sdkAppID
								that.globalData.userInfo.userID = uni.getStorageSync('userInfo').im_id
								that.globalData.userInfo.userSig = data.data
								// uni.$TUIKit.logout()
								// this.loginTim(res.data.data.userId, res.data.data.sign)
								// this.setJYJPushAlias(uni.getStorageSync('userInfo').im_id)
								uni.$TUIKit.logout().then(function() {
									uni.setStorageSync('repeatLogin', 0)
									uni.$TUIKit.login({
											userID: that.globalData.userInfo.userID,
											userSig: that.globalData.userInfo.userSig
										})
										.then(function(imResponse) {
											console.log("登录成功", ); // 登录成功
											if (imResponse.data.repeatLogin === true) {}
										}).catch(function(imError) {
											console.warn('login error:--------',
												imError); // 登录失败的相关信息
										});
									uni.$TUIKit.on(uni.$TUIKitEvent.CONVERSATION_LIST_UPDATED, that
										.onConversationListUpdated);
								}).catch(function() {
									uni.$TUIKit.login({
											userID: that.globalData.userInfo.userID,
											userSig: that.globalData.userInfo.userSig
										})
										.then(function(imResponse) {

											if (imResponse.data.repeatLogin === true) {
		
											}
										}).catch(function(imError) {
											console.warn('login error:', imError); // 登录失败的相关信息
										});
									uni.$TUIKit.on(uni.$TUIKitEvent.CONVERSATION_LIST_UPDATED, that
										.onConversationListUpdated);
								})

							}
						} 
					},
                    // 底部显示消息数量
					onConversationListUpdated(event) {
						let mdrList = uni.getStorageSync('mdrList') ? JSON.parse(uni.getStorageSync(
							'mdrList')) : []
						let num = 0
						event.data.map(item => {
							if (!mdrList.includes(item.userProfile.userID)) {
								num += item.unreadCount
							}
						})
						if (Number(num) > 0) {
							uni.setTabBarBadge({ //显示数字
								index: 2,
								text: num.toString()
							})

						}
						uni.setStorageSync('setInfoNum', num)
					},
					onNetStateChange(e) {
					},
					onSDKReload() {

					},
					onSdkNotReady() {

					},
					onKickedOut() {
						this.globalData.SDKAppID = genTestUserSig('').sdkAppID
						this.loginTim()
					},
				}
		};
</script>

2.发送自定义消息

		sendIm(){
				// 2. 创建消息实例，接口返回的实例可以上屏
				var params = {
					businessID:'recipe_view', //自定义消息列表查询唯一标识
					id:drugsArr.join(',')
				}		
				let message = uni.$TUIKit.createCustomMessage({
				  to: this.conversationID,
				  conversationType:"C2C",
				  payload:{
					  data:JSON.stringify(params)
				  } 
				});
				// 3. 发送消息
				let promise = uni.$TUIKit.sendMessage(message);
				promise.then(function(imResponse) {
				  // 发送成功
				  console.log(imResponse);
				   
				  clearInterval(that.liveCountTimes)
				}).catch(function(imError) {
				  // 发送失败
				  console.warn('sendMessage error:', imError);
				});
			},

3.列表展示自己发送的自定义消息

	<view v-if="renderDom[0].type == 'recipe_view'" :class="'custom-message ' + (isMine?'my-custom':'')">
		 <view>
             自己自定义为recipe_view 的消息
		</view>
</view>

js部分

	watch: {
			message: {
				handler: function(newVal) {
					this.renderDom = this.parseCustom(newVal)
				},
				immediate: true,
				deep: true
			}
		},





// 拿出自己要展示的参数
parseCustom(message) {
				
				if (JSON.parse(message.payload.data).businessID === 'recipe_view') {
					const extension = JSON.parse(message.payload.data);
					const renderDom = [{
						type: 'recipe_view',
						diagnosis: extension.diagnosis || '',
						name: extension.name || '',
						id: extension.id || '',
						prId: extension.prId || ''
					}];
					return renderDom;
				}
		}

语音视频全局搜索 handleCalling

// #ifdef APP-PLUS
				const options = {
					userID: userID,
					callMediaType: value, // 语音通话(callMediaType = 1)、视频通话(callMediaType = 2)
				};

				uni.$TUICallKit.call(options, (res) => {
					if (res.code === 0) {
						console.log('call success', res);
					} else {
						console.log(`call failed, error message = ${res.msg}`);
					}
				});

				// #endif