uniapp使用腾讯im

鲤小圈

已于 2022-12-27 10:33:52 修改

阅读量7k

点赞数 2

文章标签： uni-app

于 2022-12-07 17:12:04 首次发布

本文链接：https://blog.csdn.net/liyu_ya/article/details/128219625

版权

前端时间在我们网页端实现了一个很low的腾讯im有点不爽，用的是无集成方案，这是为什么呢，这还要从react说起，真是命苦，什么都没，不过咱们的vue小伙伴就不得了了，有ui集成方案，很简单，废话不多我们按个来看，携带源码

腾讯im有两种使用方案，一种是有ui集成方案，一种是无ui集成方案，我们就逐一去看

从零开始逐步去看

腾讯im是什么？用来做什么？

即时通信 IM（Instant Messaging）基于 QQ 底层 IM 能力开发，仅需植入 SDK 即可轻松集成聊天、会话、群组、资料管理和直播弹幕能力，也支持通过信令消息与白板等其他产品打通，全面覆盖您的业务场景，支持各大平台小程序接入使用，全面满足通信需要。

gitee地址

一、有ui集成方案

有ui集成文档直通车

（1-1）搭建一个基础的项目

然后配置package.json, 项目刚创建的时候是没有这个文件的，需要我们去创建一个配置文件

npm init  /   yarn init

接下来配置ui

（1-1-1）下载（电脑那个系统用哪个）

# macOS
npm i @tencentcloud/chat-uikit-uniapp

# windows
npm i @tencentcloud/chat-uikit-uniapp

（1-1-2）配置（电脑那个系统用哪个）

# macOS
mkdir -p ./pages/TUIKit && cp -r ./node_modules/@tencentcloud/chat-uikit-uniapp/ ./pages/TUIKit

# windows
xcopy .\node_modules\@tencentcloud\chat-uikit-uniapp .\pages\TUIKit /i /e

到这就基本配置完毕了，这事我们就发现我们的page文件下多了一个文件，这就是im的ui组件库

（1-2）修改项目中的配置

配置项目以及修改配置项目中的错误地方，有一些东西是真不对，需要自己去编写一下

（1-2-1）修改文件

① App.vue

<script>
import { genTestUserSig, aegisID } from "./pages/TUIKit/debug/index.js";
import { TIM, TIMUploadPlugin, Aegis } from './pages/TUIKit/debug/tim.js';
const aegis = new Aegis({
    id: aegisID, // 项目key
    reportApiSpeed: true, // 接口测速
});
uni.$aegis = aegis;

const config = {
  userID: "", //User ID                                 1. 用户的账号
  SDKAppID: 0, // Your SDKAppID                         2. 腾讯im的SDKAppId
  secretKey: "", // Your secretKey                      3. 你腾讯im的秘钥
};
uni.$chat_SDKAppID = config.SDKAppID;
const userSig = genTestUserSig(config).userSig;
// 创建 sdk 实例
uni.$TUIKit = TIM.create({
  SDKAppID: uni.$chat_SDKAppID,
});
uni.$TIM = TIM;
// 注册文件上传插件
// #ifdef MP-WEIXIN || H5
uni.$TUIKit.registerPlugin({
  "tim-upload-plugin": TIMUploadPlugin,
});
// #endif
// #ifdef APP-PLUS
uni.$TUIKit.registerPlugin({
  "cos-wx-sdk": TIMUploadPlugin,
});
// #endif
export default {
  onLaunch: function () {
    this.bindTIMEvent();
    this.login();
  },
  methods: {
    login() {
      // login TUIKit
      uni.$TUIKit.login({ userID: config.userID, userSig }).then((res) => {
        // sdk 初始化，当 sdk 处于ready 状态，才可以使用API，文档
        uni.showLoading({
          title: "初始化...",
        });
      });
    },
    bindTIMEvent() {
      uni.$TUIKit.on(uni.$TIM.EVENT.SDK_READY, this.handleSDKReady);
      uni.$TUIKit.on(uni.$TIM.EVENT.SDK_NOT_READY,this.handleSDKNotReady);
      uni.$TUIKit.on(uni.$TIM.EVENT.KICKED_OUT, this.handleKickedOut);
    },
    // sdk ready 以后可调用 API
    handleSDKReady(event) {
      uni.setStorageSync('$chat_SDKReady', true);
      uni.hideLoading();
    },
    handleSDKNotReady(event) {
      uni.showToast({
        title: "SDK 未完成初始化",
      });
    },

    handleKickedOut(event) {
      uni.clearStorageSync();
      uni.showToast({
        title: `${this.kickedOutReason(event.data.type)}被踢出，请重新登录。`,
        icon: "none",
      });
    },

    kickedOutReason(type) {
      switch (type) {
        case uni.$TIM.TYPES.KICKED_OUT_MULT_ACCOUNT:
          return "由于多实例登录";
        case uni.$TIM.TYPES.KICKED_OUT_MULT_DEVICE:
          return "由于多设备登录";
        case uni.$TIM.TYPES.KICKED_OUT_USERSIG_EXPIRED:
          return "由于 userSig 过期";
        case uni.$TIM.TYPES.KICKED_OUT_REST_API:
          return "由于 REST API kick 接口踢出";
        default:
          return "";
      }
    },
  },
};
</script>

<style>
/*每个页面公共css */
</style>

一共就需要三个参数：

                1. 用户的账号
                2. 腾讯im的SDKAppId
                3. 你腾讯im的秘钥

② pages.json 配置

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		// {
		// 	"path": "pages/index/index",
		// 	"style": {
		// 		"navigationBarTitleText": "uni-app"
		// 	}
		// },
		{
			"path": "pages/TUIKit/TUIPages/TUIConversation/index",
			"style": {
				"navigationBarTitleText": "云通信 IM"
			}
		},
		{
			"path": "pages/TUIKit/TUIPages/TUIConversation/create",
			"style": {
				"navigationBarTitleText": "选择联系人",
				"app-plus": {
					"scrollIndicator": "none"
				}
			}
		},
		{
			"path": "pages/TUIKit/TUIPages/TUIChat/index",
			"style": {
				"navigationBarTitleText": "云通信 IM",
				"app-plus": {
					"scrollIndicator": "none", // 当前页面不显示滚动条
					"softinputNavBar": "none", // App平台在iOS上，webview中的软键盘弹出时，默认在软键盘上方有一个横条，显示着：上一项、下一项和完成等按钮
					"bounce": "none" // 页面回弹
				}
			}
		},
		{
			"path": "pages/TUIKit/TUIPages/TUIChat/components/message-elements/video-play",
			"style": {
				"navigationBarTitleText": "云通信 IM",
				"app-plus": {}
			}
		},
		{
			"path": "pages/TUIKit/TUIPages/TUIGroup/index",
			"style": {
				"navigationBarTitleText": "群管理",
				"app-plus": {
					"scrollIndicator": "none"
				}
			}
		},
		{
			"path": "pages/TUIKit/TUIPages/TUIGroup/memberOperate"
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

到这就基本上就结束了，接下来我们启动项目去看界面

因为我之前这个账号已经使用过了，然后就有消息了

我们再去发个消息

二、无ui集成方案

IM的api文档

这个不是重点我就不一一说明了，感兴趣的可以逐一看文档。

提前说明： 不能在浏览器下正常展示，我没有去看原因，只有在真机测试是好的

SDKAppID， userSig ，userID 三个值需要去腾讯im中去寻找

SDKAppID

userSig ，userID 这两个参数，需要通过秘钥来生成

（2-1）首先下来依赖

//初始化
npm init
// IM Web SDK
// 从v2.11.2起，SDK 支持了 WebSocket，推荐接入；v2.10.2及以下版本，使用 HTTP
npm install tim-js-sdk --save
// 发送图片、文件等消息需要腾讯云即时通信 IM 上传插件
npm install tim-upload-plugin --save
// 拦截或替换敏感词需要本地审核插件
npm install tim-profanity-filter-plugin --save

（2-2）使用

<script>
	// 从v2.11.2起，SDK 支持了 WebSocket，推荐接入；v2.10.2及以下版本，使用 HTTP
	// v2.24.0起，SDK 支持使用本地审核插件
	import TIM from 'tim-wx-sdk';
	import TIMUploadPlugin from 'tim-upload-plugin';
	// import TIMProfanityFilterPlugin from 'tim-profanity-filter-plugin';
	export default {
		onLaunch: function() {
			console.log('App onLaunch')
			let options = {
				SDKAppID: {
					SDKAppID: 0 //1. 你的SDKAppID
				}, // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
				userSig: , // 2. 你的userSig,
				userID: // 3. 你的userID
			};
			// 创建 SDK 实例，`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例
			let tim = TIM.create(options.SDKAppID); // SDK 实例通常用 tim 表示
			// 设置 SDK 日志输出级别，详细分级请参见 <a href="https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html#setLogLevel">setLogLevel 接口的说明</a>
			// tim.setLogLevel(0); // 普通级别，日志量较多，接入时建议使用
			tim.setLogLevel(0); // release 级别，SDK 输出关键信息，生产环境时建议使用
			// 注册腾讯云即时通信 IM 上传插件
			tim.registerPlugin({
				'tim-upload-plugin': TIMUploadPlugin
			});
			// 注册腾讯云即时通信 IM 本地审核插件
			// tim.registerPlugin({
			// 	'tim-profanity-filter-plugin': TIMProfanityFilterPlugin
			// });

			tim.login({
				userID: options.userID,
				userSig: options.userSig
			}).then((imResponse) => {
				console.log("登录成功", imResponse.data);
				if (imResponse.data.repeatLogin === true) {
					// 标识帐号已登录，本次登录操作为重复登录。v2.5.1 起支持
					console.log("登录成功重复", imResponse.data.errorInfo);
				}
			}).catch(function(imError: any) {
				console.warn('login error 登录失败:', imError); // 登录失败的相关信息

			});

		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
</style>

在控制台不难发现我们已经登录成功了

登出功能

 tim.logout().then(function (imResponse: { data: any; }) {
      console.log(imResponse.data, "退出成功"); // 登出成功
    }).catch(function (imError: any) {
      console.warn('logout error:', imError);
    });

接收消息，每当来一个消息，就会触发这个函数

tim.on(TIM.EVENT.MESSAGE_RECEIVED, function(event: any) {
				console.log(event, "来消息了")
})

好了，到这就基本结束了，我就不一一列举了，上面有api接口文档，感兴趣的可以自己研究

完美结束，完结撒花

鲤小圈

关注

2
点赞
踩
42

收藏

觉得还不错? 一键收藏
16
评论
uniapp使用腾讯im

前端时间在我们网页端实现了一个很low的腾讯im有点不爽，用的是无集成方案，这是为什么呢，这还要从react说起，真是命苦，什么都没，不过咱们的vue小伙伴就不得了了，有ui集成方案，很简单，废话不多我们按个来看腾讯im有两种使用方案，一种是有ui集成方案，一种是无ui集成方案，我们就逐一去看从零开始逐步去看有ui集成文档直通车然后配置package.json, 项目刚创建的时候是没有这个文件的，需要我们去创建一个配置文件接下来配置ui （1-1-1）下载（电脑那个系统用哪个）（1-1-2）
复制链接

扫一扫