web端接入Tencent即时通信IM

1. 安装vue-cli

Vue init webpack my-project

按照需求选择下方的参数

cd my-project 进入项目文件夹下
npm run dev 启动项目

2. 下载腾讯云web相关依赖插件

官网地址：https://cloud.tencent.com/document/product/269/52962

腾讯云IM 项目创建 参考我的另一篇文章https://www.jianshu.com/p/14f5734a3d87的“第三部分：开始进入项目配置”

npm install tim-upload-plugin --save
npm install tim-js-sdk@latest --save

3. 引入并挂载

main.js页面内

// 即时通信IM
import TIM from 'tim-js-sdk';
import TIMUploadPlugin from 'tim-upload-plugin';
let options = {
  SDKAppID: xxxxxxx //替换为您的即时通信IM应用的 SDKAppID
};
// 创建 SDK 实例，TIM.create() 方法对于同一个 SDKAppID 只会返回同一份实例
let tim = TIM.create(options); // SDK 实例通常用 tim 表示
// 注册腾讯云即时通信IM上传插件
tim.registerPlugin({'tim-upload-plugin': TIMUploadPlugin});
Vue.prototype.$TIM = TIM;
Vue.prototype.$tim = tim;

注：此处的“tim-upload-plugin”为腾讯云即时通信IM上传插件。考虑到云服务器上的资源文件过期等问题，可能会使用开发者的资源服务器保存资源文件。在这种情况时，可不引入该组件。

4. 监听IM接口事件

官网地址：https://web.sdk.qcloud.com/im/doc/zh-cn//SDK.html#on

监听事件要在调用tim.login接口前调用，防止漏掉 SDK 派发的事件

// 监听初始化接口事件
tim.on(this.$TIM.EVENT.SDK_READY, function(event) {
  // 收到离线消息和会话列表同步完毕通知，接入侧可以调用 sendMessage 等需要鉴权的接口
  // event.name - TIM.EVENT.SDK_READY
});


// 监听新消息接口事件
tim.on(this.$TIM.EVENT.MESSAGE_RECEIVED, function(event) {
  // 收到推送的单聊、群聊、群提示、群系统通知的新消息，可通过遍历 event.data 获取消息列表数据并渲染到页面
  // event.name - TIM.EVENT.MESSAGE_RECEIVED
  // event.data - 存储 Message 对象的数组 - [Message]
});


// 监听掉线接口事件
tim.on(TIM.EVENT.KICKED_OUT, function(event) {
  // 收到被踢下线通知
  // event.name - TIM.EVENT.KICKED_OUT
  // event.data.type - 被踢下线的原因，例如 :
  //   - TIM.TYPES.KICKED_OUT_MULT_ACCOUNT 多实例登录被踢
  //   - TIM.TYPES.KICKED_OUT_MULT_DEVICE 多终端登录被踢
  //   - TIM.TYPES.KICKED_OUT_USERSIG_EXPIRED 签名过期被踢（v2.4.0起支持）。
});

......

5. 登陆IM

官网地址：https://cloud.tencent.com/document/product/269/37416

// userID 为用户ID userSig 为用户签名秘钥
loginIM(){
      let promise = this.$tim.login({userID: 'user1', userSig: 'eJyrVgrx************************************************************************************TvQwjw5INk12VapFgC30DGH'});
      promise.then((res) => {
        console.log("IM-登录成功",res)
      }).catch(err => {
        console.log("IM-登录失败",err)
      })
    },

6. 获取会话列表

官网地址：https://web.sdk.qcloud.com/im/doc/zh-cn//SDK.html#getConversationList

getCoverList(){
      // 拉取会话列表
      let promise = this.$tim.getConversationList();
      promise.then(imResponse => {
        this.coverList = imResponse.data.conversationList; // 会话列表，用该列表覆盖原有的会话列表
        console.log("获取会话列表成功",this.coverList)
      }).catch(imError => {
        console.warn('获取会话列表失败:', imError); // 获取会话列表失败的相关信息
      });
    },

7.其他

官方文档：https://web.sdk.qcloud.com/im/doc/zh-cn//SDK.html#login