vue 使用騰訊IM即時通信

最近在做商城類的項目，需要使用到客服系統， 用戶選擇的騰訊IM即時通信，文檔很。。。。 對Web很不友好， 弄了半天，總算出來。

1、 先安裝依賴

cnpm i cos-js-sdk-v5
cnpm i tim-js-sdk

2、 導入數據

import TIM from 'tim-js-sdk';
import COS from "cos-js-sdk-v5";
let options = {
  SDKAppID: XASDSADSA// 接入時需要將0替換爲您的即時通信 IM 應用的 SDKAppID
};
// 創建 SDK 實例，`TIM.create()`方法對於同一個 `SDKAppID` 只會返回同一份實例
let tim = TIM.create(options); // SDK 實例通常用 tim 表示
// 設置 SDK 日誌輸出級別，詳細分級請參見 setLogLevel 接口的說明
tim.setLogLevel(0); // 普通級別，日誌量較多，接入時建議使用
// tim.setLogLevel(1); // release 級別，SDK 輸出關鍵信息，生產環境時建議使用
// 註冊 COS SDK 插件
tim.registerPlugin({'cos-js-sdk': COS});
export default tim

在main的js導入

3、 因爲是無UI的，所以需要寫UI

  <div id="TimMessageTemplete">
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="handleClose"
    >
     <div class="header_box">
       <img :src="shopLogo" alt="" class="header_img">
       <span class="header_name">{{shopName}}</span>
     </div>
      <div class="box">
        <div id="box_hua">
        </div>
        <div class="button">
          <el-input
            style="border: none"
            type="textarea"
            :rows="5"
            placeholder="請輸入聊天內容"
            v-model="textarea">
          </el-input>
          <el-button type="primary" @click="sendMessage" size="mini" class="btn_send">發送</el-button>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>
  </div>


<style>
  #li_lists{
    list-style:none;
    float:left;
    clear:both;
    font-family:"arial,helvetica,sans-serif";
    font-size:12px;
    color:#F074A1;
    padding:8px 5px 8px 8px;
    margin:10px 20px 0px 35px;
    display:inline-block;
    max-width:150px;
    border:1px solid #F9B2D0;
    border-radius:5px;
    position:relative;
    top:0px;
    left:0px;
    word-wrap:break-word;
  }
  header{
    display:block;
    width:30px;
    height:30px;
    background:url(http://www.jq22.com/img/cs/500x500-1.png) no-repeat;
    background-size:30px 30px;
    position:absolute;
    left:-36px;
    top:0px;
    border-radius:50%;
    margin-left: 5px;
  }
  #ul_lists {
    font-family:"arial,helvetica,sans-serif";
    font-size:12px;
    color:#EC771D;
    padding:8px 5px 8px 8px;
    max-width:150px;
    margin:10px 5px 0px 0px;
    display:inline-block;
    float:right;
    clear:both;
    border:1px solid #69AB1F;
    border-radius:5px;
    position:relative;
    top:0px;
    left:0px;
    word-wrap:break-word;
  }
  seciton{
    display:block;
    width:30px;
    height:30px;
    background:url(http://www.jq22.com/img/cs/500x500-1.png) no-repeat;
    background-size:30px 30px;
    position:absolute;
    left:-36px;
    top:0px;
    border-radius:50%;
  }
</style>
<style scoped>
  .box {
    width: 100%;
    height: 430px;
  }

  #box_hua {
    width: 100%;
    height: 300px;
    border: 1px solid #C4C6CF;
    border-radius: 6px;
    position: relative;
    margin-bottom: 5px;
    overflow:auto;
  }
  .btn_send{
    position: absolute;
    right: 20px;
    bottom:  15px;
  }
  .header_box{
    width: 100%;
    height: 80px;
    margin-bottom: 10px;
    position: relative;
  }
  .header_img{
    width: 80px;
    height: 80px;
    background: rebeccapurple;
    border-radius: 50%;
    position: absolute;
    left: 10px;
    top: 0px;
  }
  .header_name{
    line-height: 80px;
    position: absolute;
    left: 100px;
    font-size: 22px;
    font-weight: 500;
  }
</style>

4、 發送消息

①打開對話框，先需要登錄。用戶簽名【userSig】後端生成返回，

//登錄
    loginMsg(){
        let res = tim.login({
          userID:this.UserID,
          userSig:this.userSig
        }).then(res=>{
          if (res.code === 0){
            return;
          }
        })
      },

//發送消息
sendMessage(){
  if (this.textarea == ""){
    return;
  }
 let message =  tim.createTextMessage({
    to:"yqcj_" + userId,
    conversationType: TIM.TYPES.CONV_C2C,
    payload: {
      text: this.textarea
    },
   onProgress: function(event) { console.log('返回的消息', event) }
  });
  let promise =  tim.sendMessage(message);
  promise.then(imResponse=>{
    if (imResponse.code === 0){
      this.writeMsg();
    }
  }).catch(imError=>{
    console.warn('sendMessage error:', imError);
  })
},
//渲染到頁面上
writeMsg(){
  var box_hua = document.getElementById('box_hua');
  var con = this.textarea;
  var new_L = document.createElement("li");
  new_L.setAttribute("id","li_lists");
  new_L.innerHTML = '<header></header>' + con;
  box_hua.appendChild(new_L);
  con = box_hua.innerHTML;
  this.textarea = "";
},

5、 接收返回的消息

①打開對話框，開始接收消息

// 接收消息
  recivedMsg(){
        tim.on(TIM.EVENT.MESSAGE_RECEIVED, function(event) {
            var box_hua = document.getElementById('box_hua');
            var con1 = event.data[0].payload.text;
            var new_U = document.createElement("ul");
            new_U.setAttribute("id", "ul_lists");
            new_U.innerHTML = "<seciton></seciton>" + con1;
            box_hua.appendChild(new_U);
            con1 = box_hua.innerHTML;
            box_hua.innerHTML = con1;
        });
      },