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-dialogtitle="":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-inputstyle="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;});},

vue 使用腾讯IM即时通信相关推荐

对腾讯云即时通信 IM快速入门（Web H5）TUIKit的改造
快速入门组件非常容易上手,然后对于初学者,我对官方例子有个疑惑,例子中用户登录写在main.ts中,我想通过用户自主输入用户id的方式登录,无法在main.ts加载前,用vue实现一个输入框. imp ...
[Web端接入经验分享] 腾讯云即时通信TIM、实时音视频TRTC
[Web端接入经验分享] 腾讯云即时通信TIM.实时音视频TRTC 即时通信TIM官网地址即时通信TIM SDK API文档地址实时音视频TRTC官网地址实时音视频TRTC SDK API文档地 ...
微信小程序集成腾讯云即时通信IM
这里写自定义目录标题腾讯云即时通信IM 新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定 ...
微信小程序-腾讯云即时通信 IM 小程序直播(一)
一.这里我们先讲讲使用腾讯云直播流程请先将1.2.3的都去简单的过一遍就是组件的参数了解一下 1.准备推流跟拉流地址 (登录腾讯云在控制台在直播工具箱找到创建推流跟拉流)推流跟拉流的地址是不 ...
Android Studio-unity腾讯TiM(即时通信)使用
腾讯TIM插件的使用 unity版本注意事项 1 newtonjson版本问题 2 和项目里已经有的json工具包的类名起了冲突 3 项目已经做到一定程度不建议使用安卓版本导入初始化客户端, ...
andorid 腾讯IM即时通信集成 (一）
使用环境: 需要集成到腾讯IM的聊天功能使用方法: 注意: 本篇讲述的是集成IMSDK的方法,而且用的是全套资源文件以依赖包的形式加入项目,有复制简单明了的有点. 项目地址:https://gite ...
腾讯云-即时通信 IM uni-app 和 java 整合过程
流程初始化登录(登录需要seggin授权) 获取genSig的代码 pom.xml 引入工具类: import com.tencentyun.TLSSigAPIv2;public class I ...
腾讯TIM实现即时通信 v3+ts实践
目录初始化sdk 功能描述初始化准备 SDKAppID 调用初始化接口监听事件发送消息创建消息创建文本消息登录登出功能描述登录登出销毁登录设置获取会话列表功能描述获取会 ...
腾讯云轻量应用服务器搭建即时通信 IM系统
我们如果想要搭建一个自己的即时通信系统,实现与好友的单聊或者创建群聊,这里推荐大家使用腾讯云的即时通信IM产品,部署十分简单,并且提供了免费版套餐可供试用.下面为大家介绍如何使用腾讯云轻量应用服务器搭 ...

vue 使用腾讯IM即时通信

1、先安装依赖

2、导入数据

3、因为是无UI的，所以需要写UI

4、发送消息

5、接收返回的消息

vue 使用腾讯IM即时通信相关推荐

最新文章

热门文章

vue 使用腾讯IM即时通信

1、 先安装依赖

2、 导入数据

3、 因为是无UI的，所以需要写UI

4、 发送消息

5、 接收返回的消息

vue 使用腾讯IM即时通信相关推荐

最新文章

热门文章

1、先安装依赖

2、导入数据

3、因为是无UI的，所以需要写UI

4、发送消息

5、接收返回的消息