vue 使用腾讯IM即时通信

最近在做商城类的项目,需要使用到客服系统, 用户选择的腾讯IM即时通信,文档很。。。。 对Web很不友好, 弄了半天,总算出来。

vue 使用腾讯IM即时通信

 

 

 先记录,防止后期忘记

 

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;
        });
      },

 

上一篇:2021-6-25


下一篇:当当网首页——CSS代码