vue 使用腾讯IM即时通信

2020-06-22 19:01:35 阅读：393 来源： 互联网

标签：box vue hua tim IM 腾讯 position 0px border

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

标签：box,vue,hua,tim,IM,腾讯,position,0px,border
来源： https://www.cnblogs.com/0520euv/p/13178525.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue 使用腾讯IM即时通信