當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

【腾讯云IM】即时通讯的登录，登出，用户列表，私聊，图片发送

發(fā)布時(shí)間：2024/1/18 编程问答 45 豆豆

生活随笔收集整理的這篇文章主要介紹了【腾讯云IM】即时通讯的登录，登出，用户列表，私聊，图片发送小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

uniapp即時(shí)通訊

- - 1，初始化（剛開(kāi)始就緊跟著文檔走）
  - 2，App.vue中項(xiàng)目引入騰訊云，（附上賬號(hào)在其他地方登陸的監(jiān)聽(tīng)）
  - 3，登錄前必需
  - - 3.1，獲取登錄id
    - 3.2，生成userSig，獨(dú)立封裝一下
    - - 3.2.1，文檔下載生成UserSig的內(nèi)容
      - 3.2.2，新建GenerateTestUserSig.js
      - 3.2.3，頁(yè)面使用生成Usersig
    - 3.3，App.vue中的onshow要監(jiān)聽(tīng)登錄，因?yàn)镮M的sdk會(huì)在app重新進(jìn)入的時(shí)候登出
    - 3.4，登錄完，你可以獲取用戶(hù)信息來(lái)更新IM的用戶(hù)信息，為將來(lái)用戶(hù)列表的頭像和昵稱(chēng)做鋪墊
  - 4，用戶(hù)模塊，先給看一下成品的消息推送的截圖
  - - 4.0，先上一下HTMl截圖
    - 4.1，先發(fā)送消息，然后才能獲取用戶(hù)列表
    - 4.2，滾動(dòng)到底部的代碼
    - 4.3，發(fā)送圖片
    - 4.4，歷史聊天記錄
    - 4.5，監(jiān)聽(tīng)對(duì)面發(fā)來(lái)的消息
    - 4.5，向上拉到獲取舊歷史記錄
    - 4.6，向上拉到獲取舊歷史記錄
    - 4.7，當(dāng)用戶(hù)列表展示未讀數(shù)量的時(shí)候，進(jìn)來(lái)聊天頁(yè)面需要將消息已讀
  - 5，用戶(hù)列表展示，先看一下HTML截圖
  - 5，嘿嘿，提供思路~

附上騰訊云文檔鏈接：https://cloud.tencent.com/document/product/269/75285

1，初始化（剛開(kāi)始就緊跟著文檔走）

// 從v2.11.2起，SDK 支持了 WebSocket，推薦接入；v2.10.2及以下版本，使用 HTTP npm install tim-wx-sdk --save // 發(fā)送圖片、文件等消息需要騰訊云即時(shí)通信 IM 上傳插件 npm install tim-upload-plugin --save // 攔截或替換敏感詞需要本地審核插件 npm install tim-profanity-filter-plugin --save

2，App.vue中項(xiàng)目引入騰訊云，（附上賬號(hào)在其他地方登陸的監(jiān)聽(tīng)）

3，登錄前必需

3.1，獲取登錄id

這個(gè)id相當(dāng)于用戶(hù)標(biāo)識(shí)，一般采用用戶(hù)id，但注意，傳的時(shí)候要轉(zhuǎn)成字符串格式

3.2，生成userSig，獨(dú)立封裝一下

3.2.1，文檔下載生成UserSig的內(nèi)容

點(diǎn)擊去下載：

3.2.2，新建GenerateTestUserSig.js

import LibGenerateTestUserSig from '@/common/lib-generate-test-usersig-es.min.js' const _SECRETKEY = ''; /** Module: GenerateTestUserSig** Function: 用于生成測(cè)試用的 UserSig，UserSig 是騰訊云為其云服務(wù)設(shè)計(jì)的一種安全保護(hù)簽名。* 其計(jì)算方法是對(duì) SDKAppID、UserID 和 EXPIRETIME 進(jìn)行加密，加密算法為 HMAC-SHA256。** Attention: 請(qǐng)不要將如下代碼發(fā)布到您的線上正式版本的 App 中，原因如下：** 本文件中的代碼雖然能夠正確計(jì)算出 UserSig，但僅適合快速調(diào)通 SDK 的基本功能，不適合線上產(chǎn)品，* 這是因?yàn)榭蛻?hù)端代碼中的 SECRETKEY 很容易被反編譯逆向破解，尤其是 Web 端的代碼被破解的難度幾乎為零。* 一旦您的密鑰泄露，攻擊者就可以計(jì)算出正確的 UserSig 來(lái)盜用您的騰訊云流量。** 正確的做法是將 UserSig 的計(jì)算代碼和加密密鑰放在您的業(yè)務(wù)服務(wù)器上，然后由 App 按需向您的服務(wù)器獲取實(shí)時(shí)算出的 UserSig。* 由于破解服務(wù)器的成本要高于破解客戶(hù)端 App，所以服務(wù)器計(jì)算的方案能夠更好地保護(hù)您的加密密鑰。** Reference：https://cloud.tencent.com/document/product/647/17275#Server*/ function genTestUserSig(userID) {//調(diào)用的時(shí)候，傳入userID/*** 騰訊云 SDKAppId，需要替換為您自己賬號(hào)下的 SDKAppId。** 進(jìn)入騰訊云實(shí)時(shí)音視頻[控制臺(tái)](https://console.cloud.tencent.com/rav ) 創(chuàng)建應(yīng)用，即可看到 SDKAppId，* 它是騰訊云用于區(qū)分客戶(hù)的唯一標(biāo)識(shí)。*/var SDKAPPID = xxxx;//替換為您自己賬號(hào)下的 SDKAppId/*** 簽名過(guò)期時(shí)間，建議不要設(shè)置的過(guò)短* <p>* 時(shí)間單位：秒* 默認(rèn)時(shí)間：7 x 24 x 60 x 60 = 604800 = 7 天*/var EXPIRETIME = 604800;/*** 計(jì)算簽名用的加密密鑰，獲取步驟如下：** step1. 進(jìn)入騰訊云實(shí)時(shí)音視頻[控制臺(tái)](https://console.cloud.tencent.com/rav )，如果還沒(méi)有應(yīng)用就創(chuàng)建一個(gè)，* step2. 單擊“應(yīng)用配置”進(jìn)入基礎(chǔ)配置頁(yè)面，并進(jìn)一步找到“帳號(hào)體系集成”部分。* step3. 點(diǎn)擊“查看密鑰”按鈕，就可以看到計(jì)算 UserSig 使用的加密的密鑰了，請(qǐng)將其拷貝并復(fù)制到如下的變量中** 注意：該方案僅適用于調(diào)試Demo，正式上線前請(qǐng)將 UserSig 計(jì)算代碼和密鑰遷移到您的后臺(tái)服務(wù)器上，以避免加密密鑰泄露導(dǎo)致的流量盜用。* 文檔：https://cloud.tencent.com/document/product/647/17275#Server*/var SECRETKEY = 'xxxxx';//填入秘鑰哦var generator = new LibGenerateTestUserSig(SDKAPPID, SECRETKEY, EXPIRETIME);var userSig = generator.genTestUserSig(userID);return {sdkappid: SDKAPPID,userSig: userSig}; } export {genTestUserSig }

3.2.3，頁(yè)面使用生成Usersig

import {genTestUserSig } from "@/common/GenerateTestUserSig.js"

getlogin() {let that = thisthat.POST('/login', {mobile: this.form.mobile,password: this.form.password,}).then(res => {console.log(res)if (res.code == 1) {let userid = String(res.data.userinfo.id)//拿到idlet UserSig = genTestUserSig(userid).userSig //生成UserSigconsole.log(UserSig, "")let getlogin = that.$tim.login({userID: userid,userSig: UserSig});getlogin.then(function(imResponse) {console.log(imResponse, "登陸成功"); // 登錄成功uni.setStorageSync('userinfo', res.data.userinfo)uni.setStorageSync('token', res.data.userinfo.token)if (imResponse.data.repeatLogin === true) {// 標(biāo)識(shí)帳號(hào)已登錄，本次登錄操作為重復(fù)登錄。v2.5.1 起支持console.log(imResponse.data.errorInfo);that.myuserinfo()} else {that.myuserinfo()}}).catch(function(imError) {console.warn('重復(fù)登錄', imError); // 登錄失敗的相關(guān)信息});} else {uni.showToast({title: res.msg,icon: "none"})}}).catch(err => {console.log(err)})

3.3，App.vue中的onshow要監(jiān)聽(tīng)登錄，因?yàn)镮M的sdk會(huì)在app重新進(jìn)入的時(shí)候登出

onShow: function() {console.log('App Show')if (uni.getStorageSync('token')) {let that = thislet userinfo = uni.getStorageSync('userinfo')let userid = String(userinfo.id)let UserSig = genTestUserSig(userid).userSig //生成UserSiglet getlogin = that.$tim.login({userID: userid,userSig: UserSig});getlogin.then(function(imResponse) {console.log(imResponse, "登陸成功"); // 登錄成功if (imResponse.data.repeatLogin === true) {// 標(biāo)識(shí)帳號(hào)已登錄，本次登錄操作為重復(fù)登錄。v2.5.1 起支持console.log(imResponse.data.errorInfo);} else {}}).catch(function(imError) {console.warn('重復(fù)登錄', imError); // 登錄失敗的相關(guān)信息});} },

3.4，登錄完，你可以獲取用戶(hù)信息來(lái)更新IM的用戶(hù)信息，為將來(lái)用戶(hù)列表的頭像和昵稱(chēng)做鋪墊

//個(gè)人信息 myuserinfo() {let that = thisthat.GET('/uInfo').then((res) => {if (res.code == 1) {let user;user = res.datasetTimeout(() => {console.log(user)// 修改個(gè)人標(biāo)配資料let promise = that.$tim.updateMyProfile({nick: user.shop_name ? user.shop_name : user.nickname,avatar: user.avatar,gender: that.$TIM.TYPES.GENDER_UNKNOWN,selfSignature: user.shop_name ? user.shop_name : '用戶(hù)',allowType: that.$TIM.TYPES.ALLOW_TYPE_ALLOW_ANY});promise.then(function(imResponse) {console.log(imResponse.data, "更新成功"); // 更新資料成功uni.switchTab({url: "/pages/index/index"})}).catch(function(imError) {console.warn('updateMyProfile error:',imError); // 更新資料失敗的相關(guān)信息})}, 500)} else {uni.showToast({title: res.msg,icon: "none"})}}) },

4，用戶(hù)模塊，先給看一下成品的消息推送的截圖

4.0，先上一下HTMl截圖

4.1，先發(fā)送消息，然后才能獲取用戶(hù)列表

//發(fā)送消息 Go() {// 發(fā)送文本消息，Web 端與小程序端相同// 1. 創(chuàng)建消息實(shí)例，接口返回的實(shí)例可以上屏let that = thislet message = that.$tim.createTextMessage({to: that.To_user_id,//接受者IDconversationType: 'C2C',//c2c代表單聊payload: {text: that.Keyword,//要發(fā)送的內(nèi)容},cloudCustomData:"",//needReadReceipt: true});// 2. 發(fā)送消息let promise = that.$tim.sendMessage(message);promise.then(function(imResponse) {// 發(fā)送成功.輸入框清空that.Keyword = ""//消息列表push當(dāng)前消息that.chatlist.push(imResponse.data.message)//列表滾動(dòng)到底部that.scrollToBottom()}).catch(function(imError) {// 發(fā)送失敗console.warn('sendMessage error:', imError);}); }

4.2，滾動(dòng)到底部的代碼

//滾動(dòng)至聊天底部 scrollToBottom() {let that = thisthat.$nextTick(() => {that.intoindex = "text" + Number(that.chatlist.length - 1)}) },

4.3，發(fā)送圖片

//發(fā)送圖片 GoImage() {let that = thisuni.chooseImage({count: 2,sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有sourceType: ['album'], // 從相冊(cè)選擇success: (res) => {console.log(res)let message = that.$tim.createImageMessage({// to: '5MYfeMTrSEvmAF1cLct',to: that.To_user_id,conversationType: 'C2C',payload: {file: res},onProgress: function(event) {console.log('file uploading:', event)}});// 3. 發(fā)送圖片let promise = that.$tim.sendMessage(message);promise.then(function(imResponse) {// 發(fā)送成功console.log(imResponse);that.chatlist.push(imResponse.data.message)that.scrollToBottom()}).catch(function(imError) {// 發(fā)送失敗console.warn('sendMessage error:', imError);});}}); },

4.4，歷史聊天記錄

// 拉取歷史消息 GetMessageList(groupid) {let that = this// 根據(jù) sequence 拉群漫游消息，direction 0 向上拉，拉更舊的消息，direction 1 向下拉，拉更新的消息let promise = this.$tim.getMessageListHopping({conversationID: 'C2C' + that.To_user_id,count: 15,direction: 0});promise.then(function(imResponse) {console.log(imResponse, '歷史消息')const messageList = imResponse.data.messageList; // 消息列表。that.nextReqMessageID = imResponse.data.messageList[0].ID; // 用于續(xù)拉，分頁(yè)續(xù)拉時(shí)需傳入該字段。console.log(that.nextReqMessageID)that.chatlist = messageListconsole.log(that.chatlist[that.chatlist.length - 1].type == "TIMImageElem")that.scrollToBottom()}); },

4.5，監(jiān)聽(tīng)對(duì)面發(fā)來(lái)的消息

// 接收消息監(jiān)聽(tīng) function accentmiss(event) {vue.accentmiss(event) } export default {data() {return {};},onLoad(options) {this.To_user_id = String(options.To_user_id)// 接收消息監(jiān)聽(tīng)this.$tim.on(this.$TIM.EVENT.MESSAGE_RECEIVED, accentmiss);}methods:{// 接收消息accentmiss(event) {console.log(event, "收到消息了")//由于收到是所有的監(jiān)聽(tīng)消息，所以，這里應(yīng)該區(qū)分一下，如果是本次聊天的，push。不是，則不pushif(event.data[0].from==this.To_user_id){this.chatlist.push(event.data[0])}this.readmiss()this.scrollToBottom()}},// 頁(yè)面卸載,關(guān)閉監(jiān)聽(tīng)onUnload() {this.$tim.off(this.$TIM.EVENT.MESSAGE_RECEIVED, accentmiss);}, },

4.5，向上拉到獲取舊歷史記錄

上面第一次獲取歷史記錄的時(shí)候，拿到了歷史記錄的第一條歷史記錄ID，nextReqMessageID
接下來(lái)，pages.json,開(kāi)啟為true

onPullDownRefresh() {// 下拉查看更多消息let that = thislet promise = this.$tim.getMessageList({conversationID: 'C2C' + that.To_user_id,//c2c是必要的nextReqMessageID: that.nextReqMessageID,direction: 0,//0向上，1向下count: 15,//拉取數(shù)量});promise.then(function(imResponse) {console.log(imResponse)setTimeout(function() {uni.stopPullDownRefresh();}, 1000);that.nextReqMessageID = imResponse.data.messageList[0].ID; // 用于續(xù)拉，分頁(yè)續(xù)拉時(shí)需傳入該字段。that.chatlist = [...imResponse.data.messageList, ...that.chatlist]//通過(guò)擴(kuò)展運(yùn)算符，向前拼接}); },

4.6，向上拉到獲取舊歷史記錄

//聊天圖片放大功能 openimg(index) {console.log(index)let that = thislet list = []list.push(that.chatlist[index].payload.imageInfoArray[0].url)uni.previewImage({urls: list,current: 1,longPressActions: {// itemList: ['發(fā)送給朋友', '保存圖片', '收藏'],success: function(data) {console.log('選中了第' + (data.tapIndex + 1) + '個(gè)按鈕,第' + (data.index + 1) + '張圖片');},fail: function(err) {console.log(err.errMsg);}}}); },

4.7，當(dāng)用戶(hù)列表展示未讀數(shù)量的時(shí)候，進(jìn)來(lái)聊天頁(yè)面需要將消息已讀

//消息已讀 readmiss() {// 將某會(huì)話(huà)下所有未讀消息已讀上報(bào)let that = thislet promise = that.$tim.setMessageRead({conversationID: 'C2C' + that.To_user_id});promise.then(function(imResponse) {console.log("已讀成功")// 已讀上報(bào)成功，指定 ID 的會(huì)話(huà)的 unreadCount 屬性值被置為0}).catch(function(imError) {// 已讀上報(bào)失敗console.warn('setMessageRead error:', imError);}); },

5，用戶(hù)列表展示，先看一下HTML截圖

//獲取會(huì)話(huà)列表 getchatlist() {let that = thisthat.userlist = []let promise = that.$tim.getConversationList();promise.then(function(imResponse) {that.conversationList = imResponse.data.conversationList; // 全量的會(huì)話(huà)列表，用該列表覆蓋原有的會(huì)話(huà)列表that.conversationList.forEach(item => {item.lastMessage.lastTime1 = that.stampTime(item.lastMessage.lastTime * 1000)//最新消息的時(shí)間})console.log(that.conversationList)const isSyncCompleted = imResponse.data.isSyncCompleted; // 從云端同步會(huì)話(huà)列表是否完成}).catch(function(imError) {console.warn('getConversationList error:', imError); // 獲取會(huì)話(huà)列表失敗的相關(guān)信息}); },

5，嘿嘿，提供思路~

總結(jié)

以上是生活随笔為你收集整理的【腾讯云IM】即时通讯的登录，登出，用户列表，私聊，图片发送的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：【TypeScript入门】TypeSc
下一篇：快一起来看看如何把音频转化为文字吧