当前位置: 首页>移动开发>正文

uniapp集成zookeeper uniapp集成腾讯im

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

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

从零开始逐步去看

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

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

gitee地址

一、有ui集成方案

有ui集成文档直通车

(1-1)搭建一个基础的项目

uniapp集成zookeeper uniapp集成腾讯im,uniapp集成zookeeper uniapp集成腾讯im_uniapp集成zookeeper,第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组件库

uniapp集成zookeeper uniapp集成腾讯im,uniapp集成zookeeper uniapp集成腾讯im_uni-app_02,第2张

(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的秘钥

uniapp集成zookeeper uniapp集成腾讯im,uniapp集成zookeeper uniapp集成腾讯im_uni-app_03,第3张

②   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": {}
}

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

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

uniapp集成zookeeper uniapp集成腾讯im,uniapp集成zookeeper uniapp集成腾讯im_App_04,第4张

 我们再去发个消息

uniapp集成zookeeper uniapp集成腾讯im,uniapp集成zookeeper uniapp集成腾讯im_即时通信_05,第5张

二、无ui集成方案

IM的api文档

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

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

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

SDKAppID

uniapp集成zookeeper uniapp集成腾讯im,uniapp集成zookeeper uniapp集成腾讯im_uni-app_06,第6张

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

 

uniapp集成zookeeper uniapp集成腾讯im,uniapp集成zookeeper uniapp集成腾讯im_uni-app_07,第7张

(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>

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

uniapp集成zookeeper uniapp集成腾讯im,uniapp集成zookeeper uniapp集成腾讯im_uni-app_08,第8张

 登出功能

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接口文档,感兴趣的可以自己研究

完美结束,完结撒花


https://www.xamrdz.com/mobile/49e1961900.html

相关文章: