前端运用腾讯云即时通讯IM进行会话聊天

本文仅给新接触即时通讯的新手们,并且看文档没有方向的朋友们提供一个清晰的思路,大佬们轻喷。

不管你是想在html、vue项目、微信小程序中哪里想运用腾讯云即时通讯IM,都可以很好的实现,现在给大家介绍下大概实现步骤:

1、初始化

实现即时通讯首先要进行的是初始化,以web项目为例子:

import TIM from 'tim-js-sdk';
// 发送图片、文件等消息需要的 COS SDK
import COS from "cos-js-sdk-v5";

let options = {
  SDKAppID: xxx // 接入时需要将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});

以上引入文件如果是微信小程序或者普通web项目,则需要下载对应js文件,然后引入,如果是vue项目,可以cnpm/npm安装对应依赖包;SDKAppID是你腾讯云即时通讯项目里的对应项目id,去你的控制台获得;

2、登录

实现即时通讯首先要进行的是登录,至于登录所需要的id,token之类的就不一一介绍了,官方文档中有关于服务端生成,这就需要你的后台老哥去研究啦。

let promise = tim.login({userID: 'your userID', userSig: 'your userSig'});
promise.then(function(imResponse) {
  console.log(imResponse.data); // 登录成功
}).catch(function(imError) {
  console.warn('login error:', imError); // 登录失败的相关信息
});

以上对应userID、userSig是你这个账号在注册或者微信授权登录时,后台所生成然后返回给你的信息,从个人信息提取即可。
在这里插入图片描述
以上提示就是你登录成功啦,下面开始下一步,获取会话列表,因为我是做的单聊(私聊),所以说给大家说一下单聊的实现例子;

3、获取会话列表

let promise = tim.getConversationList();
promise.then(function(imResponse) {
	var conversationList = imResponse.data.conversationList; // 会话列表,用该列表覆盖原有的会话列表
	console.log(conversationList)
	//会话列表信息解析处理,请求后台接口获取对应聊天人信息

}).catch(function(imError) {
	console.warn('getConversationList error:', imError); // 获取会话列表失败的相关信息
});

以上是获取会话列表信息,每条信息内含有对应人的ID、最后聊天时间、聊天内容等等;

4、获取会话详情

var promise = this.tim.getMessageList({
	conversationID: 'C2C' + id,   //id为对应聊天人的userID
	count: 10    //一次拉取的聊天条数
});

promise.then(function(imResponse) {
	
	var list = []
	var  messageList = imResponse.data.messageList; // 消息列表。
	var nextReqMessageID = imResponse.data.nextReqMessageID; // 用于续拉,分页续拉时需传入该字段。
	var isCompleted = imResponse.data.isCompleted; // 表示是否已经拉完所有消息。
	
	messageList.map(function(item) {
		//解析聊天消息
		
	})
	setTimeout(function(){	
     	_this.tobottom();
     },700)
	
	
});

获取到的聊天信息是一个数组,需要遍历来解析对应信息内容(图片、表情、文字等等),然后再展示到前端;
在这里插入图片描述
以上是我pc的vue项目做出来的效果;

5、发送表情

let message = this.tim.createFaceMessage({
	  to: id,   //聊天人id
	  conversationType: TIM.TYPES.CONV_C2C,   //单聊
	  payload: {
	    index: 1, // Number 表情索引,用户自定义
	    data: _this.bqqlist[i].text // String 额外数据   //对应表情对应的文字 例:[龇牙]
	  }
	});
	// 2. 发送消息
	let promise = this.tim.sendMessage(message);
	promise.then(function(imResponse) {
	  // 发送成功
	  console.log(imResponse);
	  //此为处理事件,用于前端消息添加展示
	  _this.msglist.push(_this.msgjiexi(imResponse.data.message))
		setTimeout(function(){
        	_this.tobottom()    //保持消息到最底部
        	_this.visible = false;
        },300)
	}).catch(function(imError) {
	  // 发送失败
	  console.warn('sendMessage error:', imError);
	});

在这里插入图片描述
这是我结合element-ui中 popover,改了改样式整成这样的,点击直接发送表情(没做表情文字一起发,感觉很麻烦!!!!)
在这里插入图片描述

6、发送图片

	let message = this.tim.createImageMessage({
	  to: id, //聊天人id
	  conversationType: TIM.TYPES.CONV_C2C,
	  payload: {
	    file: document.getElementById('imagePicker'),  //对应type为file的input的id
	  },
	  onProgress: function(event) { console.log('file uploading:', event) }
	});
	// 2. 发送消息
	let promise = this.tim.sendMessage(message);
	promise.then(function(imResponse) {
	  // 发送成功
	  console.log(imResponse);
	  //消息处理
	  _this.msglist.push(_this.msgjiexi(imResponse.data.message))
		setTimeout(function(){
			files.target.value = ''  //用于解决一个图片不能多次连续发送,一个bug
	       	_this.tobottom()
	       },300)
	}).catch(function(imError) {
	  // 发送失败
	  console.warn('sendMessage error:', imError);
	});

以上比较重要的大概就这些啦,具体的就不一一介绍了,如有不了解的,可以查看官方文档!!!!,现在是真得很详细,想我之前做这个的时候,小程序还没有支持上传图片,然后想尽办法实现这个功能,和后台老哥用 &img&拼接线上图片地址,然后用文字传输,是真的难顶,现在图片,语音啥啥的都有了~~

至于发送普通文字消息就不说啦,还有在关闭页面记得退出登录哦,对优化好一点~~

发布了1 篇原创文章 · 获赞 0 · 访问量 7
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览