微信小程序接入腾讯云IM即时通讯（发送消息开发步骤）

微信小程序接入腾讯云IM即时通讯（聊天窗口）

1.效果图：

2.功能点 ：
1.布局要分左右两边布局，如果是自己为发送消息方，都在右边，对方发送的消息在左边。
2.腾讯云返回的是时间戳，需要转换一下时间，腾讯云是没有返回头像的，需要单独获取并且设置自己跟对方的头像。
3.发送的消息分为自定义消息跟普通文本消息，带房源图片跟价格和小区名称的是自定义的消息，从房源详情进入聊天就自动发送，普通文本消息则在底部栏发送。
4.获取聊天的历史记录，下拉上翻历史记录，这里没有做本地缓存，是做了每次进入都拉取一次聊天的历史记录的操作。

WXML代码

<scroll-view class='chat' id="chat" style="height:{{height}}px;" scroll-y style='padding-bottom:49px;' ><block  wx:for="{{myMessages}}" wx:key="{{index}}"><view class='chat-time' wx:if="{{item.time != ''}}">{{item.msgTime}}</view><view class="chat-item flex-wrap {{item.isSelfSend ? 'house' : ''}}" wx:if='{{item.type != ""}}' bindtap='linkDetail'  data-id="{{item.id}}" data-type="{{item.type}}"><view class='avatar'><image style="width:40px;height:40px;border-radius:50%;" mode= "scaleToFill" src="{{item.avatar}}"></image></view><view class='content ' style="width:520rpx;"><image class='img' style="width:100%;height:120px;" mode= "scaleToFill"  src="{{item.img == '' ? houseDefault : item.img}}"></image><view class='info'><view class='info-name'>{{item.name}}</view><view class='info-title'>{{item.msgContent}}</view><view class='flex-wrap'><view class='flex-item3'><view class='info-price'>{{item.price}}</view></view><view class='flex-item'><view class='info-type'>{{item.type}}</view></view></view></view></view></view><view class="chat-item flex-wrap {{item.isSelfSend ? 's' : ''}}" wx:if='{{item.type == ""}}'><view class='avatar'><image style="width:40px;height:40px;border-radius:50%;" mode= "scaleToFill" src="{{item.avatar}}"></image></view><view class='content '>{{item.msgContent}}</view></view></block>
</scroll-view><view class='footer-h'></view>
<view class='chat-footer flex-wrap'><view class='flex-item ' bindtap='send1'> <text class="iconfont icon-yuyin" style='vertical-align: 0;padding-right:0; '></text></view><view class='flex-item5'><input class='input'  bindinput="bindKeyInput" value="{{inputValue}}" placeholder="对ta发送消息"/></view><view class='flex-item2 send' bindtap='bindConfirm'>发送</view>
</view>

WXSS代码

.flex-wrap.s ,.house{flex-direction:row-reverse;}
.h49{width: 100%;height: 49px;
}
.chat-item.flex-wrap.s{margin: 20px 10px 20px 0px;}
.chat-item.flex-wrap{line-height: 20px;height: auto;margin: 20px 0px 20px 10px;}
.chat-footer{position: fixed;bottom: 0;left: 0;width: 100%;height: 49px;background: #ffffff;
}
.send{width: 100%;height: 49px;line-height: 49px;text-align: center;background: #69BEFF;color: #ffffff;font-size: 16px;
}
.icon-yuyin::before{font-size: 70rpx;color: #7F8389;display: block;height: 49px;line-height: 49px;text-align: center;
}
.input{height: 49px;line-height: 49px;font-size: 13px;
}
.avatar{width: 40px;height: 40px;background: #69BEFF;border-radius:50%;text-align: center;line-height: 40px;color: #ffffff;
}
.chat-item.flex-wrap .content{background: #ffffff;margin-left: 10px;padding:12px;border-radius:10px; width: auto;max-width: 480rpx;font-size: 15px;text-align: justify;
}
.chat-item.flex-wrap.house{margin-right: 10px;
}.chat-item.flex-wrap.s .content{margin-right: 10px;background: #69BEFF;color: #ffffff;
}
.chat-item.flex-wrap.house .content{margin-right: 10px;padding: 0;width: 520rpx;}
.content .img{border-top-left-radius: 10px;border-top-right-radius: 10px;
}
.chat-time{width: 80px;height: 21px;line-height: 21px;background: #CECECE;color: #ffffff;font-size: 12px;margin: 20px auto 0px;text-align: center;border-radius:5px;}
.content .info{padding:0 20rpx 20rpx;
}
.info-price{color: #E93D26;font-size: 14px;
}
.info-title{color: #999999;font-size: 12px;
}
.info-type{width: 50px;height: 18px;line-height: 18px;color: #ffffff;font-size: 12px;background: #CECECE;text-align: center;border-radius: 2px;}
.footer-h{height: 49px;width: 100%;
}

js代码


var webim = require('../../utils/webim.js');
var webimhandler = require('../../utils/webim_handler.js');
const app = getApp()
Page({/*** 页面的初始数据*/data: {noData: app.data.imageUrl + '/no-msg.png',houseDefault: app.data.imageUrl + '/msg-default.png',inputValue:'',//发送的文字消息内容myMessages: [],//消息selToID:0,scrollTop: 0,houseId:'',//房源idtype:'',//房源类型height:'',complete:0,//默认为有历史记录可以拉取is_lock:true//发送消息锁},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;that.setData({height: wx.getSystemInfoSync().windowHeight})if(options){if(options.id){//设置会话列表传参过来的为好友idthat.setData({selToID: options.id})wx.setNavigationBarTitle({title: options.name})}else if (!options.dockingname){//非经纪人角色,私聊账号为推荐经纪人账号that.setData({selToID: app.data.userInfo.agent_member_id.toString(),houseId: options.houseid,type:options.type})wx.setNavigationBarTitle({title: '置业顾问' + app.data.userInfo.agent_name})//拉取所需要自定义的消息数据发送that.createhousemsg();}else{that.setData({selToID: options.agent_member_id ,houseId: options.houseid,type: options.type})wx.setNavigationBarTitle({title: '盘方顾问' + options.dockingname})//拉取所需要自定义的消息数据发送that.createhousemsg();}}},onShow:function () {var that = this;    wx.setStorageSync('msgKey', '')wx.setStorageSync('lastMsgTime', '')webimhandler.init({accountMode: app.data.Config.accountMode, accountType: app.data.Config.accountType, sdkAppID: app.data.Config.sdkappid, selType: webim.SESSION_TYPE.C2C//私聊, agent_member_id: app.data.userInfo.id, id: that.data.selToID  , name: app.data.userInfo.agent_name, icon: app.data.userInfo.agent_pic,that: that});if (webim.checkLogin()) {webimhandler.getC2CHistoryMsgs();} else {webimhandler.sdkLogin(that,app, this.data.selToID,()=> {//获取聊天历史记录webimhandler.getC2CHistoryMsgs();});}},//创建自定义房源消息体createhousemsg:function(){var that = this;var param = {app_token: app.data.userInfo.app_token,id: that.data.houseId,type: that.data.type}app.request('get', 'createhousemsg', that, param,(data) => {//这里的data.array.MsgContent为获取到需要发送的消息体字段webimhandler.sendCustomMsg(data.array.MsgContent, (data)=>{var myMessages = that.setDatas(data)that.setData({myMessages: myMessages,})setTimeout(function () {that.pageScrollToBottom()}, 100)})}, () => {setTimeout(function () {login.login(app)}, 500)}, () => {wx.navigateBack({delta: 1})return;})},//获取普通文本消息bindKeyInput:function(e){var that = this;that.setData({inputValue:e.detail.value})},// 发送普通文本消息bindConfirm: function(e) {var that = this;if(that.data.is_lock){that.setData({is_lock:false})if (that.data.inputValue.length == 0) {wx.showToast({title: '消息不能为空!',icon:'none'})that.setData({is_lock: true})return;}var content = that.data.inputValue;if (!content.replace(/^\s*|\s*$/g, '')) return;webimhandler.onSendMsg(content)}},// 清除输入框clearInput:function(e){this.setData({inputValue:''})},/*** 下拉上翻历史记录*/onPullDownRefresh: function () {if (this.data.complete == 0){wx.showLoading({title: '加载历史记录中...',})var that = this;webimhandler.getPrePageC2CHistoryMsgs()wx.stopPullDownRefresh();}else{wx.showToast({title: '没有更多历史记录了',icon:'none'})}},// 滚动最底部pageScrollToBottom: function () {wx.createSelectorQuery().select('#chat').boundingClientRect(function (rect) {// 使页面滚动到底部wx.pageScrollTo({scrollTop: rect.bottom})}).exec()},// 跳转房源详情linkDetail:function(e){switch (e.currentTarget.dataset.type){case '新房':wx.navigateTo({url: '../newHouseDetail/newHouseDetail?id=' + e.currentTarget.dataset.id,})break;case '二手房':wx.navigateTo({url: '../useroomDetail/useroomDetail?id=' + e.currentTarget.dataset.id,})break;case '租房':wx.navigateTo({url: '../rentroomDetail/rentroomDetail?id=' + e.currentTarget.dataset.id,})break;case '小区':wx.navigateTo({url: '../unitDetail/unitDetail?id=' + e.currentTarget.dataset.id,})break;}},setDatas: function (data){var that = this;var myMessages = data.map((item, index) => {switch (item.type) {case 1:item.type = '二手房'break;case 2:item.type = '租房'break;case 3:item.type = '小区'break;case 4:item.type = '新房'break;}if (item.img == '') {item.img = that.data.houseDefault}return item;})return myMessages;}})

发送自定义消息

//发送消息(自定义消息)
function sendCustomMsg(msgs,callback) {var data = msgs.Data;//数据var desc = msgs.Desc;//描述var ext = msgs.Ext;//拓展字段var msgLen = webim.Tool.getStrBytes(data);if (msgs.length < 1) {alert("发送的消息不能为空!");return;}var maxLen, errInfo;if (selType == webim.SESSION_TYPE.C2C) {maxLen = webim.MSG_MAX_LENGTH.C2C;errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";} else {maxLen = webim.MSG_MAX_LENGTH.GROUP;errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";}if (msgLen > maxLen) {alert(errInfo);return;}if (!selSess) {selSess = new webim.Session(selType, id, name, icon, Math.round(new Date().getTime() / 1000));}var msg = new webim.Msg(selSess, true, -1, -1, -1, id, 0, name);var custom_obj = new webim.Msg.Elem.Custom(data, desc, ext);msg.addCustom(custom_obj);msg.sending = 1;// //调用发送消息接口webim.sendMsg(msg, function (resp) {if (selType == webim.SESSION_TYPE.C2C) {// 处理消息handlderMsg(msg,false);// 获取头像getMyAvatar(id, agent_member_id,function(){callback(currentMsgsArray)});}that.msginformagent(id, msgs)webim.Log.info("发消息成功");}, function (err) {webim.Log.info("发消息失败");});
}// 解析消息（普通文本消息，自定义消息）
function convertMsg(msg, prepend) {var that = this;var elems, elem, type, content, isSelfSend, ifromAccount;elems = msg.getElems();isSelfSend = msg.getIsSend(); //消息是否为自己发的 true是自己发送，ifromAccount = msg.fromAccountfor (var i in elems) {var currentMsg = {}; elem = elems[i];type = elem.getType();content = elem.getContent();switch (type) {case webim.MSG_ELEMENT_TYPE.TEXT://文本消息var msgContent = convertTextMsgToHtml(content);var msgTime = msg.getTime();//得到当前消息发送的时间//解析时间convertTime(msgTime, function (data) {currentMsg.id = ifromAccount;//房源标题                currentMsg.msgContent = msgContent;//当前消息的内容currentMsg.img = '';currentMsg.msgTime = data;currentMsg.name = ''currentMsg.price = '';currentMsg.isSelfSend = isSelfSend;currentMsg.ifromAccount = ifromAccount;currentMsg.type = '';if (prepend){historyMsgsArray.push(currentMsg)}else{currentMsgsArray.push(currentMsg);}})break;case webim.MSG_ELEMENT_TYPE.CUSTOM://自定义消息var msgContent = convertCustomMsgToHtml(content);var msgTime = msg.getTime();//得到当前消息发送的时间if (msgContent.data == ''){}else{msgContent = JSON.parse(msgContent.data)}convertTime(msgTime, function (data) {currentMsg.id = msgContent.id//房源标题currentMsg.img = msgContent.img//房源图片currentMsg.msgTime = data;//消息时间                currentMsg.name = msgContent.name //楼盘名称currentMsg.price = msgContent.price //价格currentMsg.type = msgContent.type //类型（1二手房，2租房，3小区，4新房）currentMsg.isSelfSend = isSelfSend;//默认右边currentMsg.ifromAccount = ifromAccount;if (prepend){historyMsgsArray.push(currentMsg)}else{currentMsgsArray.push(currentMsg);}})break;}}}// 解析自定义消息
function convertCustomMsgToHtml(content) {var data = content.getData();var desc = content.getDesc();var ext = content.getExt();var content = {data:data,desc: desc,ext: ext}return content;
}

发送普通文本消息

//发送消息(普通消息)
function onSendMsg(msg) {//获取消息内容var msgtosend = msg;var msgLen = webim.Tool.getStrBytes(msg);// 创建会话对象if (!selSess) {selSess = new webim.Session(selType, id, name, icon, Math.round(new Date().getTime() / 1000));}var isSend = true;//是否为自己发送var seq = -1;//消息序列，-1表示sdk自动生成，用于去重var random = Math.round(Math.random() * 4294967296);//消息随机数，用于去重var msgTime = Math.round(new Date().getTime() / 1000);//消息时间戳var subType = webim.C2C_MSG_SUB_TYPE.COMMON;//消息子类型c2c消息时，参考c2c消息子类型对象：webim.C2C_MSG_SUB_TYPE //loginInfo.identifier消息发送者账号,loginInfo.identifierNick消息发送者昵称var msg = new webim.Msg(selSess, isSend, seq, random, msgTime, id, subType, name );//解析文本和表情var expr = /\[[^[\]]{1,3}\]/mg;var emotions = msgtosend.match(expr);if (!emotions || emotions.length < 1) {var text_obj = new webim.Msg.Elem.Text(msgtosend);msg.addText(text_obj);} else {//有表情}webim.sendMsg(msg, function (resp) {if (selType == webim.SESSION_TYPE.C2C) {//私聊时，在聊天窗口手动添加一条发的消息handlderMsg(msg,false);// 设置双方头像getMyAvatar(id, agent_member_id, function () {that.clearInput();var myMessages = that.setDatas(currentMsgsArray);that.setData({myMessages: myMessages,is_lock: true})// setTimeout(function () {that.pageScrollToBottom()// }, 100)});that.msginformagent(id, msgtosend)          webim.Log.info("发消息成功");}}, function (err) {webim.Log.error("发消息失败:" + err.ErrorInfo);});
}//解析文本消息元素
function convertTextMsgToHtml(content) {return content.getText();
}

统一处理文本消息，自定义消息

// 解析消息（普通文本消息，自定义消息）
function convertMsg(msg, prepend) {var that = this;var elems, elem, type, content, isSelfSend, ifromAccount;elems = msg.getElems();isSelfSend = msg.getIsSend(); //消息是否为自己发的 true是自己发送，ifromAccount = msg.fromAccountfor (var i in elems) {var currentMsg = {}; elem = elems[i];type = elem.getType();content = elem.getContent();switch (type) {case webim.MSG_ELEMENT_TYPE.TEXT://文本消息var msgContent = convertTextMsgToHtml(content);var msgTime = msg.getTime();//得到当前消息发送的时间//解析时间convertTime(msgTime, function (data) {currentMsg.id = ifromAccount;//房源标题                currentMsg.msgContent = msgContent;//当前消息的内容currentMsg.img = '';currentMsg.msgTime = data;currentMsg.name = ''currentMsg.price = '';currentMsg.isSelfSend = isSelfSend;currentMsg.ifromAccount = ifromAccount;currentMsg.type = '';if (prepend){historyMsgsArray.push(currentMsg)}else{currentMsgsArray.push(currentMsg);}})break;case webim.MSG_ELEMENT_TYPE.CUSTOM://自定义消息var msgContent = convertCustomMsgToHtml(content);var msgTime = msg.getTime();//得到当前消息发送的时间if (msgContent.data == ''){}else{msgContent = JSON.parse(msgContent.data)}convertTime(msgTime, function (data) {currentMsg.id = msgContent.id//房源标题currentMsg.img = msgContent.img//房源图片currentMsg.msgTime = data;//消息时间                currentMsg.name = msgContent.name //楼盘名称currentMsg.price = msgContent.price //价格currentMsg.type = msgContent.type //类型（1二手房，2租房，3小区，4新房）currentMsg.isSelfSend = isSelfSend;//默认右边currentMsg.ifromAccount = ifromAccount;if (prepend){historyMsgsArray.push(currentMsg)}else{currentMsgsArray.push(currentMsg);}})break;}}}

发送消息成功之后，就需要监听新消息，更新消息的未读数了

//监听新消息(私聊(包括普通消息、全员推送消息)，普通群(非直播聊天室)消息)事件
//newMsgList 为新消息数组，结构为[Msg]
function onMsgNotify(newMsgList) {var newMsg;//获取所有聊天会话for (var j in newMsgList) {//遍历新消息newMsg = newMsgList[j];if (newMsg.getSession().id() == id) {//为当前聊天对象的消息selSess = newMsg.getSession();handlderMsg(newMsg, false);currentMsgsArray = currentMsgsArray.map((item, index) => {if (!item.isSelfSend) {item.avatar = myAvatar} else {item.avatar = friendAvatar}return item;})var myMessages = that.setDatas(currentMsgsArray);that.setData({myMessages: myMessages,})setTimeout(function () {if (that.data.is_chat){that.pageScrollToBottom()}}, 100)}}getUnread()}//更新消息未读数
function getUnread(){var sess= {};var sessMap = webim.MsgStore.sessMap();if (that.data.contactList) {// 更新消息的未读数for (var i in sessMap) {sess = sessMap[i];var contactList = that.data.contactList.map((item, index) => {if (item.To_Account == sess.id()) {item.UnreadMsgCount = sess.unread()}return item;})that.setData({contactList: contactList})// 获取最新的会话消息webim.getRecentContactList({'Count': 10 //最近的会话数 ,最大为 100}, function (resp) {var MsgShow = resp.SessionItem.filter((item, index) => {if (item.To_Account == sess.id()) return item;})var contactList = that.data.contactList.map((item, index) => {if (item.To_Account == sess.id()) {// 获取最新消息if (MsgShow[0].MsgShow == '[其他]'){MsgShow[0].MsgShow = '[房源信息]'}item.MsgShow = MsgShow[0].MsgShow}return item;})that.setData({contactList: contactList})})}}
}

发送消息就到这里了，历史记录下章讲

微信小程序接入腾讯云IM即时通讯（发送消息开发步骤）相关推荐

微信小程序接入腾讯云IM即时通讯（获取聊天历史记录开发步骤）
微信小程序接入腾讯云IM即时通讯(获取聊天历史记录开发步骤) 1.先看文档: 获取 C2C 历史消息 :https://cloud.tencent.com/document/product/269/1 ...
微信小程序接入腾讯云MQTT服务
本文章目的是,将微信小程序连接至MQTT并获取传感器数据. 按照网络所给的连接手段所遇到的困难客户端不能同时登录设备侧的数据传输(主要是发布加上少量订阅)需要进行Client的登录.小程序端的数据 ...
uniapp - 微信小程序接入腾讯视频播放器功能插件，uniapp开发微信小程序端调用引入并使用腾讯视频播放组件完整全流程（详细示例源码，一键复制开箱即用）
效果图在uniapp 微信小程序项目中,集成腾讯视频功能插件,实现播放腾讯视频效果,附带详细示例源码及注释, 你可以跟着步骤一步步来,保证几分钟就能快速在uniapp小程序项目中植入腾讯视频功能! ...
微信小程序接入腾讯云的对象存储
1.cos官网地址:对象存储快速入门 - SDK 文档 - 文档中心 - 腾讯云 2.腾讯云官网上的git案例地址:GitHub - tencentyun/cos-wx-sdk-v5: 腾讯云 CO ...
【小程序】微信小程序使用腾讯云IM（一）：登录
微信小程序使用腾讯云IM 新项目已经写了很久啦这个项目里主要的难点其实是1v1聊天.他们对比了好几家的即时通讯,最后选择了腾讯云通信.我猜,可能是因为腾讯云上说日活低于10w可以不付费吧.省钱嘛~踩 ...
微信小程序利用腾讯云IM发送语音 + 图片
微信小程序利用腾讯云IM发送语音 + 图片能做到这里说明你已经可以发送普通文本了如果没有的话可以看一下我的上一篇文章有完整的讲解效果图语音聊天发送图片传送 → 发送图片发送语音 ** ...
微信小程序实现腾讯云接口图象识别
微信小程序实现腾讯云接口图象识别注:操作环境:springboot+微信小程序 1.导入maven 腾讯云图象识别接口 jar包 <depend ...
微信小程序开通腾讯云开发环境
目录微信小程序开通"腾讯云"开发环境注册腾讯云账号配置开发环境微信小程序开通"腾讯云"开发环境这里强调以下,标题是"腾讯云"开发环 ...
微信小程序基于腾讯云对象存储的图片上传
在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到 ...
微信小程序授权腾讯云
前言: 如果之前没有授权过腾讯云,现在在开发者工具页面已经没有腾讯云选项,只有一个腾讯位置服务. 在开发者工具里面也没有腾讯云按钮(我这是己经授权才出现的,之前并没有) 但是目前的项目并不想使用云开发 ...

微信小程序接入腾讯云IM即时通讯（发送消息开发步骤）

微信小程序接入腾讯云IM即时通讯（聊天窗口）

WXML代码

WXSS代码

js代码

发送自定义消息

发送普通文本消息

统一处理文本消息，自定义消息

发送消息成功之后，就需要监听新消息，更新消息的未读数了

微信小程序接入腾讯云IM即时通讯（发送消息开发步骤）相关推荐

最新文章

热门文章