web vue+IM即时通讯

小杨小杨、努力变强！

已于 2023-05-30 10:16:15 修改

阅读量616

点赞数

分类专栏：软件开发文章标签：腾讯云 vue Powered by 金山文档

于 2023-02-24 18:07:14 首次发布

本文链接：https://blog.csdn.net/qq_42717015/article/details/129206085

版权

本文介绍了如何在Web应用中利用Vue结合腾讯云的即时通讯服务进行集成，主要涉及在main.js中引入SDK，以及在需要的页面中使用相关文件的步骤。

摘要由CSDN通过智能技术生成

1.web即时通讯

https://cloud.tencent.com/document/product/269/75319（文档）

https://web.sdk.qcloud.com/im/doc/zh-cn/TIM.html（API）

2.main中引入


// 从v2.11.2起，SDK 支持了 WebSocket，推荐接入；v2.10.2及以下版本，使用 HTTP
// v2.24.0起，SDK 支持使用本地审核插件
import TIM from 'tim-js-sdk';
import TIMUploadPlugin from 'tim-upload-plugin';
import TIMProfanityFilterPlugin from 'tim-profanity-filter-plugin';

let options = {
  SDKAppID: 1400793822 // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
};
// 创建 SDK 实例，`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例
let tim = TIM.create(options); // SDK 实例通常用 tim 表示

// 设置 SDK 日志输出级别，详细分级请参见 setLogLevel https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html#setLogLevel 接口的说明</a>
tim.setLogLevel(0); // 普通级别，日志量较多，接入时建议使用
// tim.setLogLevel(1); // release 级别，SDK 输出关键信息，生产环境时建议使用

// 注册腾讯云即时通信 IM 上传插件
tim.registerPlugin({'tim-upload-plugin': TIMUploadPlugin});

// 注册腾讯云即时通信 IM 本地审核插件
tim.registerPlugin({'tim-profanity-filter-plugin': TIMProfanityFilterPlugin});

Vue.prototype.TIM = TIM
Vue.prototype.tim = tim

3.引入下载好debug

4.在需要的页面

import { genTestUserSig } from '@/debug/GenerateTestUserSig'

首先要登录  
login(){
    let userSig=genTestUserSig(this.userName).userSig
    let promise = this.tim.login({userID: this.userName, userSig: userSig});
    promise.then(function(imResponse) {
    console.log(imResponse.data); // 登录成功
    if (imResponse.data.repeatLogin === true) {
        // 标识帐号已登录，本次登录操作为重复登录。v2.5.1 起支持
        console.log(imResponse.data.errorInfo);
        
    }
    }).catch(function(imError) {
    console.warn('login error:', imError);
    });
},

登录成功后需要加入群组

joinGrop(){
    let promise = this.tim.joinGroup({ groupID: '10012345' });
    promise.then(function(imResponse) {
    console.log(imResponse.data.status) 
    switch (imResponse.data.status) {
        case this.TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL: // 等待管理员同意
        break;
        case this.TIM.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
        console.log(imResponse.data.group); // 加入的群组资料
        break;
        case this.TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
        break;
        default:
        break;
    }
    }).catch(function(imError){
    console.warn('joinGroup error:', imError); // 申请加群失败的相关信息
    });
},

发送文字

sendMessage(){
    let message = this.tim.createTextMessage({
        to: '10012345',
        conversationType: this.TIM.TYPES.CONV_GROUP,
        payload: {
            text: this.message
        },
        needReadReceipt: true
    });
    let promise = this.tim.sendMessage(message);
    let _this=this
    promise.then(function(imResponse) {
        _this.message=''
       _this.msglist=[..._this.msglist,...[imResponse.data.message]]
    }).catch(function(imError) {});
},

然后就是监听

 mounted() {
    let onMessageReceived = function(event) {
        this.msglist=[...this.msglist,...event.data]
    };
    this.tim.on(this.TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived,this);
},

<template>
    <div class="detail">
        <div class="box_title">
            <div class="box_title_left">
                {
   { name }}
            </div>
            <div class="box_title_right">
                <div class="title">
                    <span class="el-icon-location-outline" style="color:#E23430"></span> 当前位置:  
                    <router-link :to&#