300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 腾讯云即时通讯IM前端使用步骤简述

腾讯云即时通讯IM前端使用步骤简述

时间:2022-11-09 23:05:45

相关推荐

腾讯云即时通讯IM前端使用步骤简述

注:本文主要演示通过uniapp为开发的微信小程序接入 IM 的步骤:

准备工作:首先建议您在尝试接入 IM 前先将您的项目 git 到远程仓库保存一份(做最坏的打算,后续好恢复);

下面第一步便是要接入 IM 到项目,如果要通过 npm 的方式导入相应的 包 文件,则一定要先检查目前项目中是否有package.json即项目的包管理配置文件。如果没有则 通过npm init -y自动初始化出该文件。

一、为项目接入腾讯云即时通信 IM SDK:

教程链接:即时通信 IM 集成 SDK 上传插件(Web & 小程序) - 自实现 UI 集成方案 - 文档中心 - 腾讯云

核心:

通过 npm 安装如下两个包

// 下载依赖npm i tim-upload-plugin --save// tim-js-sdk 或 tim-wx-sdk的版本请使用 v2.9.2 或更高版本才能集成 tim-upload-plugin// npm i tim-js-sdk@latest --save // web环境使用npm i tim-wx-sdk@latest --save // 小程序环境使用

二、尝试登录 IM

教程链接:SDK - Documentation

登录的业务一般配合着项目根据项目业务逻辑在适当的时候进行登录。

大致代码示例如下:

测试时,如果后端没有提供userIDuserSig则自己可以模拟一个:

首先在该登录即时通讯 IM 的页面<script></script> 标签的顶部引入如下代码

// 在项目脚本里引入模块,并初始化// import TIM from 'tim-js-sdk'; // web环境使用import TIM from 'tim-wx-sdk'; // 小程序环境使用import TIMUploadPlugin from 'tim-upload-plugin';// 引入生成 IM userSig 的文件——来自于 debug 文件夹import { genTestUserSig } from '@/debug/GenerateTestUserSig.js';let options = {SDKAppID: 0 // 接入时需要将 0 替换为您的云通信应用的 SDKAppID};// 创建 SDK 实例,`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例let tim = TIM.create(options); // SDK 实例通常用 tim 表示

注意:这段代码中最主要的核心是要将自己的SDKAppID填入进去,这里的SDKAppID 一般可向项目服务器端获取。同时也引入了生成 IM userSig 的文件——来自于debug文件夹,该文件夹来自于 IM Demo uniapp 版(更多 SDK & Demo 源码),下载了uniapp 版的 Demo之后 打开TUIKit文件 即可看到debug文件夹。(测试时将该文件夹放置到自己项目的根目录下,再按路径引入即可)

注意:引入了debug文件夹后需要在该文件夹中的GenerateTestUserSig.js文件中将SDKAPPIDSECRETKEY修改成自己的,该值一般由后端提供

// 这里的 userID 和 userSig 后期是由服务器接口返还的const userID = '001' // 这里测试于是就随便写了一个const userSig = genTestUserSig(userID).userSigconst promise = await tim.login({userID: userID,userSig: userSig});if (promise.code) return falseconsole.log('IM登陆成功', promise);return true

注意:代码里的 userID 和 userSig 后期应该都是由服务器通过 api 返回到前端的,所以这里的主要代码是从const promise = await tim.login() ... 开始的,另外注意这里使用了await关键字,所以要在这段代码的函数名前面搭配上async关键字,不然运行会报错哦!

登录IM,示例如下:

// 调用函数登录 IMasync imLogin() {// 页面加载就登陆 IM 即时通讯// 这里的 userID 和 userSig 后期是由服务器接口返还的const userID = '001' // 这里测试于是就随便写了一个const userSig = genTestUserSig(userID).userSigconst promise = await tim.login({userID: userID,userSig: userSig});if (promise.code) return falseconsole.log('IM登陆成功', promise);// 设置 SDK 日志输出级别,详细分级请参见 setLogLevel 接口的说明// tim.setLogLevel(0); // 普通级别,日志量较多,接入时建议使用tim.setLogLevel(1); // release级别,SDK 输出关键信息,生产环境时建议使用return true}

登录成功的截图:

登录成功后即可开启后续业务流程,如:获取会话列表、获取历史消息、发送消息、接收消息(onMessageReceived)等...更多即时通信 IM SDK 基本概念。

发送图片、语音、视频等消息

如果需要发送图片、语音、视频等消息需要安装、注册 cos-wx-sdk-v5 上传插件,步骤如下:

安装:

npm i cos-wx-sdk-v5@1.0.10 --save

注册:在聊天页面的<script></script> 标签顶部引入如下代码:

// 在项目脚本里引入模块,并初始化import TIM from 'tim-wx-sdk'; // 小程序环境使用import TIMUploadPlugin from 'tim-upload-plugin';let options = {SDKAppID: 0 // 接入时需要将 0 替换为您的云通信应用的 SDKAppID};let tim = TIM.create(options); // SDK 实例通常用 tim 表示// 注册腾讯云即时通信IM上传插件tim.registerPlugin({'tim-upload-plugin': TIMUploadPlugin});

程序运行截图:

因为博主目前的项目只需要发送文本和图片,暂时没有涉及到更复杂的消息类型,希望此文能帮助到您,更多请访问 腾讯云即时通讯 IM 官方文档 。

补充:

如果小程序要发布为测试版或提交审核那需要把涉及到IM的相关域名配置到小程序管理后台的域名白名单中。主要内容如下:

小程序接入,更改受信域名

小程序使用前,需要将以下域名设为受信域名(已有的 im 受信域名可以都删掉):

wss://wss.wss://wss.https://web.https://webim.

添加到 downloadFile 合法域名:

https://cos.ap-

IM官方文档直通车

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。