vue接入腾讯IM

一、测试demo

登录平台
网址：https://cloud.tencent.com/

创建应用

后续会使用到appid和密钥

IM产品文档
网址：https://cloud.tencent.com/document/product/269

测试腾讯pc的demo（非必须）
下载左侧的体验demo或点击链接https://gitee.com/cloudtencent/TIMSDK/tree/master

1. 打开web项目
   
2. 进入src/TUIKit目录中安装依赖，在src/TUIKit目录中打开cmd输入cnpm i
   
3. 回到web根目录(回到1部分)，安装依赖cnpm i
   
4. 启动项目
   在web根目录运行：npm run serve

***注意：运行前需要配置一下IM的key和密码
A：打开web_im根目录找到debug文件夹
B：打开GenerateTestUserSig.js填写对应key和密钥
然后会打开一个这样的页面，测试成功

二、vue接入（H5端）

1. 集成SDK
   网址：https://cloud.tencent.com/document/product/269/75285

1.1 在vue的项目中安装依赖
npm install tim-js-sdk --save
npm install tim-upload-plugin --save

1.2 打开vue项目的main.js
import TIM from 'tim-js-sdk';
import TIMUploadPlugin from 'tim-upload-plugin';

let options = {
  SDKAppID: 1400759574
};

let tim = TIM.create(options);
tim.setLogLevel(0); 
tim.registerPlugin({'tim-upload-plugin': TIMUploadPlugin});

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

2. 要做腾讯IM的账号登录
   网址：https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html#login

点击登录按钮，执行下面代码：

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

let userSig = genTestUserSig(this.userId).userSig;
let promise = this.tim.login({
   userID: this.userId, 
   userSig: userSig
});
    
promise.then(function(imResponse) {
    if (imResponse.data.repeatLogin === true) {
      console.log('调用login=>登录成功',imResponse.data.errorInfo);
    }
}).catch(function(imError) {
    console.warn('login error:', imError); // 登录失败的相关信息
});

***userId就是当前谁(zhangsan)发的消息
*userSig需要去生成：建议直接使用官方debug文件就可以了,步骤:

1.打开web文件，找到debug文件，进行复制
2.复制到vue项目的src目录中
3.打开GenerateTestUserSig.js文件确定appid和密钥填写是否一致
4.导出需要修改一下

3. 发送文字消息
网址：https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html#createTextMessage

let message = this.tim.createTextMessage({
  to: 'lisi',
  conversationType: this.TIM.TYPES.CONV_C2C,
  payload: {
    text: this.msg
  },
  needReadReceipt: true
});

let promise = this.tim.sendMessage(message);
promise.then(function(imResponse) {
  console.log('发送成功',imResponse);
}).catch(function(imError) {
  console.warn('sendMessage error:', imError);
});

4. 接收消息

created(){
      
let onMessageReceived = function(event) {
console.log('消息过来了',event)
};
this.tim.on(this.TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived,this);

},

<template>
  <div class="home">
    <input type="text" v-model="userId" />
    <button @click="login">登录</button>

    <input type="text" v-model="msg" />
    <button @click="sendMsg">发送</button>
  </div>
</template>

<script>
// @ is an alias to /src
import { genTestUserSig } from '@/debug/GenerateTestUserSig.js'
export default {
  name: "Home",
  data(){
    return {
      userId:'',
      msg:'',
    }
  },
  components: {
  },
  created(){
    // 接收到的消息
    let onMessageReceived = function(event) {
    console.log('消息过来了',event)
    };
    this.tim.on(this.TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived,this);

  },
  methods: {
    login() {
      let userSig = genTestUserSig(this.userId).userSig;

      let promise = this.tim.login({
        userID: this.userId,
        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); // 登录失败的相关信息
      });
    },
    sendMsg() {
      let message = this.tim.createTextMessage({
        to: '小明', // 发给谁
        conversationType: this.TIM.TYPES.CONV_C2C,
        payload: {
          text: this.msg
        },
        needReadReceipt: true
      });

      let promise = this.tim.sendMessage(message);
      promise.then(function(imResponse) {
        console.log('发送成功',imResponse);
      }).catch(function(imError) {
        console.warn('sendMessage error:', imError);
      });
    }
  },
};
</script>