web端已有项目集成含UI腾讯IM

通过 npm 方式下载 TUIKit 组件,将 TUIKit 组件复制到自己工程的 src 目录下:

npm i @tencentcloud/chat-uikit-vue
mkdir -p ./src/TUIKit && rsync -av --exclude={'node_modules','package.json','excluded-list.txt'} ./node_modules/@tencentcloud/chat-uikit-vue/ ./src/TUIKit

js 工程如何接入 TUIKit 组件?

vue add typescript

在需要使用的页面

<template><TUIKit></TUIKit>
</template>
<script setup lang="ts">
import { ref} from "vue";
import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine";
const currentConversationID = ref<string>("");
TUIStore.watch(StoreName.CONV, {currentConversationID: (id: string) => {currentConversationID.value = id;},
});
</script>

使用pinia,定义一个tim store  @/store/tim.js

import { defineStore } from 'pinia'
import store from '@/store'
import { useUserStore } from '@/store/user'
import TencentCloudChat from '@tencentcloud/chat';
import { genTestUserSig, TUIChatKit } from '../TUIKit'
import router from '@/router'
import {TUIChatService, TUIUserService
} from '@tencentcloud/chat-uikit-engine'
import { TUILogin } from '@tencentcloud/tui-core'
export const useTimStore = defineStore('useTimStore', () => {let userStore = useUserStore();const SDKAppID = process.env.NODE_ENV === 'development' ? 123 :234 // Your SDKAppIDconst secretKey = process.env.NODE_ENV === 'development' ? 'rr' : 'kk' // Your secretKey// tim登录async function BLKTIMLogin() {//进行IM登录之前首先验证tokenif (!localStorage.getItem('token_blk')) {// 没有token 跳转登录页router.push('/login')} else {// 验证token是否有效userStore.getInfo().then(async res => {if (res && res.code == 200) {let userInfo = res.data.info;console.log("userInfo->", userInfo)await TUILogin.login({SDKAppID,userID: userInfo.name,userSig: genTestUserSig({SDKAppID,secretKey,userID: userInfo.name,}).userSig,useUploadPlugin: true,framework: 'vue3'}).then(res => {setTimeout(() => {TUIUserService.updateMyProfile({nick: userInfo.name,avatar: userInfo.avatar,profileCustomField: [{key: "Tag_Profile_Custom_ID",value: userInfo.id}, {key: "Tag_Profile_Custom_Email",value: userInfo.email}, {key: "Tag_Profile_Custom_Phone",value: userInfo.phone}]})}, 2000);}).catch(err => {console.error("loginIm-error->", err)})} else if (res && res.code == 401) {router.push('/login')localStorage.removeItem('token_blk')} else {router.push('/login')}}).catch(err => {router.push('/login')})}}// tim登出function TIMLoginOut() {TUILogin.logout();}//   to:消息接收方的 userID 或 groupID,// conversationType:会话类型,取值TencentCloudChat.TYPES.CONV_C2C(端到端会话) 或 TencentCloudChat.TYPES.CONV_GROUP  // type:自定义常量// extension:消息内容 json字符串格式function TIMSendCustomMessage(to, type, extension, conversationType, description) {const options = {to: to,conversationType: conversationType ? conversationType : TencentCloudChat.TYPES.CONV_GROUP,payload: {data: type,description: description,extension: extension},}return new Promise((resolve, reject) => {TUIChatService.sendCustomMessage(options).then(res => {console.log('im发送成功->', res);resolve('success')}).catch(err => {console.warn('im发送失败->', err);reject('error')})})}let keyword = '';return { isLoginIM, SDKAppID, secretKey, BLKTIMLogin, TIMLoginOut, TIMSendCustomMessage, keyword }
})// 非setup
export function useTimStoreHook() {return useTimStore(store)
}

main.ts/main.js 中引入登录模块,并进行登录

import { createApp } from 'vue'
import App from './App.vue'
import { useTimStore } from '@/store/tim'
import { TUIComponents, TUIChatKit } from './TUIKit'const app = createApp(App)let TimStore = useTimStore();TUIChatKit.components(TUIComponents, app)
TUIChatKit.init()
TimStore.BLKTIMLogin();

腾讯IM sdk文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/868766.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

tensorflow学习笔记(二)

矩阵运算 .transpose(X): 矩阵转置运算 .matmul(X, Y): 矩阵乘法 X * Y .matrix_determinant(X): 求矩阵行列式 .matrix_inverse(X): 求矩阵的逆 .matrix_solve(X, [[m], [n], [p], [q]])&#xff1a;求以矩阵 X 为系数矩阵&#xff0c;m、n、p、q 为常数的解

操作系统---进程的同步和互斥(易错知识点梳理)

目录 1.S.value() 2.互斥机制要遵循的原则 3.Peterson算法 4.互斥信号量与同步信号量 5.可重入代码 6.P/V操作和管程 7.并发进程的执行 本节对应知识点&#xff1a; 进程的同步与互斥 1.S.value() S.value()出现在记录型信号量中&#xff0c;用来记录资源的数目&…

LLM - Transformer 的 多头自注意力(MHSA) 理解与源码

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/140281680 免责声明:本文来源于个人知识与公开资料,仅用于学术交流,欢迎讨论,不支持转载。 在 Transformer 中,多头自注意力机制 (MHSA, Multi-Head Self-Attenti…

java System类介绍

Java 的 System 类是 java.lang 包的一部分,提供了一些有用的类字段和方法,可以访问与系统相关的信息和资源。System 类的成员都是静态的,可以直接通过类名进行调用。以下是 System 类的主要功能和常用方法介绍。 1. 标准输入、输出、错误流 System 类提供了标准输入、输出…

C语言 | Leetcode C语言题解之第224题基本计算器

题目&#xff1a; 题解&#xff1a; int calculate(char* s) {int n strlen(s);int ops[n], top 0;int sign 1;ops[top] sign;int ret 0;int i 0;while (i < n) {if (s[i] ) {i;} else if (s[i] ) {sign ops[top - 1];i;} else if (s[i] -) {sign -ops[top - 1…

猫咪浮毛满天飞怎么办?希喂、352、米家养猫空气净化器对比测试

作为一名资深铲屎官&#xff0c;表现掉毛季又来了&#xff0c;猫咪的毛发满天飞&#xff0c;怎么办&#xff1f;我家里的猫咪一到换毛季就掉满地的毛发&#xff0c;尤其喜欢在家里奔跑打闹&#xff0c;结果整个房间都是毛。家里的猫掉毛特别严重&#xff0c;感觉随便咳两下就能…

java-反射 1

## Java 中的反射机制详解 ### 1. 引言 Java 反射机制&#xff08;Reflection&#xff09;是一种非常强大的特性&#xff0c;它允许程序在运行时检查和操作对象的内部结构&#xff0c;包括类、方法、字段和构造函数等。反射机制提供了一种动态操作对象的方法&#xff0c;使得…

编写一个定时任务脚本,每两个小时杀死某进程,并重新启动带有指定参数的命令脚本

需求 编写一个定时任务脚本&#xff0c;实现每2个小时杀死名为aleo-miner的进程&#xff0c;并重新启动带有指定参数的./aleo.sh脚本 实现方案 使用cron作业结合一个shell脚本来完成这个任务。 操作步骤 第一步&#xff1a;编写Shell脚本 首先&#xff0c;你需要编写一个…

mysql在linux系统下重置root密码

mysql在linux系统下重置root密码 登录服务器时候mysql密码忘记了&#xff0c;没办法只能重置&#xff0c;找了一圈&#xff0c;把行之有效的方法介绍在这里。 错误展示&#xff1a; 我还以为yes就可以了呢&#xff0c;这是不行的意思。 关掉mysql服务 sudo systemctl stop …

C++ 类和对象 构造 / 析构函数

一 类的6个默认成员函数&#xff1a; 如果一个类中什么成员都没有&#xff0c;简称为空类。 例&#xff1a; #include <iostream> class Empty {// 空类&#xff0c;什么成员都没有 }; 空类中真的什么都没有吗&#xff1f;并不是&#xff0c;任何类在什么都不写时&a…

Day60 动态规划part13

LC647回文子串&#xff08;未掌握&#xff09; 暴力&#xff1a;两层for循环&#xff0c;遍历区间起始位置和终止位置&#xff0c;然后还需要一层遍历判断这个区间是不是回文。所以时间复杂度&#xff1a;O(n^3)dp数组含义 常规dp数组&#xff1a;题目求什么&#xff0c;我们…

Spring Boot集成rmi快速入门demo

1.什么是rmi&#xff1f; RMI&#xff08;Remote Method Invocation&#xff09;即远程方法调用&#xff0c;是分布式编程中的一个基本思想。实现远程方法调用的技术有很多&#xff0c;比如CORBA、WebService&#xff0c;这两种都是独立于各个编程语言的。 而Java RMI是专为Ja…

RedHat运维-Linux存储管理基础4-LVM的相关减小操作

1. /dev/sda1这个物理卷属于卷组vg1&#xff0c;并且卷组vg1有足够的物理卷成员&#xff0c;来承接/dev/sda1中的数据。现在要想将/dev/sda1移出卷组vg1&#xff0c;应该如何操作呢&#xff1f; 2. /dev/sda3这个物理卷属于卷组vg2&#xff0c;并且卷组vg2有足够的物理卷成员&a…

DNS隧道

dnscat2是一个DNS隧道工具&#xff0c;通过DNS协议创建加密的命令和控制通道&#xff0c;它的一大特色就是服务端会有一个命令行控制台&#xff0c;所有的指令都可以在该控制台内完成。包括:文件上传、下载、反弹Shell 目录 Dnscat2安装 解决bundle instal1特别慢问题 客户…

红外光气体检测:1.分子振动与红外吸收、检测系统的基本模型和红外敏感元件

分子振动与红外吸收 分子偶极矩的变化频率与分子内原子振动状态有关&#xff1a;μqd&#xff0c;其中μ是偶极矩&#xff0c;q是电荷&#xff0c;d是正负电荷中心距离。 分子在…

办公必备——ONLYOFFICE8.1版本桌面编辑器

一、介绍ONLYOFFICE ONLYOFFICE是一款免费的开源办公软件&#xff0c;它可以让你创建、编辑和分享文档、表格和演示文稿。就像微软的Office一样&#xff0c;但它是完全免费的&#xff0c;而且可以在多种设备上使用&#xff0c;包括电脑和手机。它还支持多人同时在线编辑文档&am…

7.8洛谷 字符串

P5650 基础字符串练习题 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路 如果 S[i] 0&#xff0c;则 dp[i] max(dp[i-1] 1, 1)&#xff08;因为增加了 0&#xff0c;减少了 1&#xff09;。如果 S[i] 1&#xff0c;则 dp[i] max(dp[i-1] - 1, -1)&#xff08;因为减…

进程 VS 线程(javaEE篇)

&#x1f341; 个人主页&#xff1a;爱编程的Tom&#x1f4ab; 本篇博文收录专栏&#xff1a;JavaEE初阶&#x1f449; 目前其它专栏&#xff1a;c系列小游戏 c语言系列--万物的开始_ 等 &#x1f389; 欢迎 &#x1f44d;点赞✍评论⭐收藏&#x1f496;三连支…

在Openresty中将字符串按照下划线 _ ,分隔成两部分

在 OpenResty 中&#xff0c;可以使用 Lua 提供的字符串操作函数 string.match 或 ngx.re.match 来将字符串按照下划线 _ 分隔成两部分。下面是一个示例代码&#xff0c;展示如何实现这一功能&#xff1a; 使用 string.match 实现 http {server {listen 80;server_name local…