最近在做商城类的项目，需要使用到客服系统， 用户选择的腾讯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;
        });
      },