虽说微信本来就是个社交工具，但在开发小程序时还是免不了涉及到及时通信的功能。说到及时通信，我脑瓜子第一反应想到了环信im，腾讯im，融云im等等的第三方。今天我们来谈谈环信im。
1.下载小程序demon
先看看环信im的demon能够实现怎么样的大致动能，对环信im来一个初步认识。
2.到环信管理后台注册并创建应用
申请唯一的appkey，替换到上一步下载的demon中，我们就能通过管理后台更加深入，方便是测试环信im的功能。
3.把demon搬到我们自己的小程序当中
从demon中提取sdk、xmldom、striphe.js、WebIM.js和WebIMConfig.js放到自己的小程序的对应位置。
tips: 在app.js应用striphe.js、WebIM.js时，你可能会遇到报错，但是别慌。
原因：xxx标识符已经声明.
那么我们只需要改名或者不要重复声明就可以了。
1.使用环信im的“前期准备”
//引入
require('./utils/strophe.js')
var WebIM = require('./utils/WebIM.js').default
在app.js里添加监听事件
onOpened: function () {}, //连接成功回调
onClosed: function () {}, //连接关闭回调
onTextMessage: function ( message ) {
var page = that.getRoomPage()
console.log(page)
if (message) {
if (page) {
page.receiveMsg(message, 'txt')
} else {
var chatMsg = that.globalData.chatMsg || []
var value = WebIM.parseEmoji(message.data.replace(/\n/mg, ''))
var time = WebIM.time()
var msgData = {
info: {
from: message.from,
to: message.to
},
username: message.from,
yourname: message.from,
msg: {
type: 'txt',
data: value
},
style: '',
time: time,
mid: 'txt' + message.id
}
chatMsg = wx.getStorageSync(msgData.yourname + message.to) || []
var num = wx.getStorageSync(msgData.yourname + message.to + '-num') || 0;
wx.setStorage({
key: msgData.yourname + message.to + '-num',
data: ++ num,
success: function () {
//console.log('success')
}
})
chatMsg.push(msgData)
wx.setStorage({
key: msgData.yourname + message.to,
data: chatMsg,
success: function () {
//console.log('success')
}
})
}
}
}, //收到文本消息
onEmojiMessage: function ( message ) {}, //收到表情消息
onPictureMessage: function ( message ) {}, //收到图片消息
onCmdMessage: function ( message ) {}, //收到命令消息
onAudioMessage: function ( message ) {}, //收到音频消息
onLocationMessage: function ( message ) {},//收到位置消息
onFileMessage: function ( message ) {}, //收到文件消息
onCustomMessage: function ( message ) {}, //收到自定义消息
onVideoMessage: function (message) { }, //收到视频消息
onPresence: function ( message ) {}, //处理“广播”或“发布-订阅”消息，如联系人订阅请求、处理群组、聊天室被踢解散等消息
onRoster: function ( message ) {}, //处理好友申请
onInviteMessage: function ( message ) {}, //处理群组邀请
onOnline: function () {}, //本机网络连接成功
onOffline: function () {}, //本机网络掉线
onError: function ( message ) {}, //失败回调
onBlacklistUpdate: function (list) { //黑名单变动
// 查询黑名单，将好友拉黑，将好友从黑名单移除都会回调这个函数，list则是黑名单现有的所有好友信息
console.log(list);
},
onRecallMessage: function(message){}, //收到撤回消息回调
onReceivedMessage: function(message){}, //收到消息送达服务器回执
onDeliveredMessage: function(message){}, //收到消息送达客户端回执
onReadMessage: function(message){}, //收到消息已读回执
onCreateGroup: function(message){}, //创建群组成功回执（需调用createGroupNew）
onMutedMessage: function(message){}, //如果用户在A群组被禁言，在A群发消息会走这个回调并且消息不会传递给群其它成员
onChannelMessage: function(message){} //收到整个会话已读的回执，在对方发送channel ack时会在这个回调里收到消息
2.环信账号登录/注册
var WebIM = require('./utils/WebIM.js').default
// 登录环信im
WebIM.conn.open({
apiUrl: WebIM.config.apiURL,
user: 'Peach_Eiton', //环信用户id
pwd: '123456', //环信用户密码
appKey: WebIM.config.appkey,
success: function () {
// 登陆成功的话调用
console.log('Siccess登录环信im成功~！')
},
failure: function () {
// 登陆失败的话调用
console.log('Failure登录环信im失败~！')
},
});
// 如若没有账号的话，可以先注册
var options = {
apiUrl: WebIM.config.apiURL,
username: that.data.username, // 环信用户名
password: that.data.password, // 环信用户密码
nickname: '',
appKey: WebIM.config.appkey,
success: function(res) {
if(res.statusCode == '200') {
wx.showToast({
title: '注册成功,正在登录',
icon: 'success',
duration: 1500,
success: function() {
var data = {
apiUrl: WebIM.config.apiURL,
user: that.data.username,
pwd: that.data.password,
grant_type: 'password',
appKey: WebIM.config.appkey
}
setTimeout(function(){
WebIM.conn.open(data) //登录
},1000)
}
});
}
},
error: function(res) {
if(res.statusCode !== '200') {
wx.showModal({
title: '用户名已被占用',
showCancel: false,
confirmText: 'OK'
})
}
}
}
WebIM.utils.registerUser(options)
3.发送消息
sendEvent(e) {
console.log('发送信息：', this.data.inputValue)
let that = this
let id = WebIM.conn.getUniqueId(); // 生成本地消息id
let msg = new WebIM.message('txt', id); // 创建文本消息
console.log('msg--', msg)
msg.set({
msg: that.data.inputValue, // 消息内容
to: that.data.toWebIM, // 接收消息对象（用户id）
chatType: 'singleChat', // 设置为单聊
ext: {}, //扩展消息
success: function (id, serverMsgId) {
console.log('send private text Success', );
that.setData({
inputValue: '',
})
let msgData = {
info:{
from: wx.getStorageSync('webIMuserId'),
to: that.data.toWebIM
}
}
},
fail: function (e) {
// 失败原因:
// e.type === '603' 被拉黑
// e.type === '605' 群组不存在
// e.type === '602' 不在群组或聊天室中
// e.type === '504' 撤回消息时超出撤回时间
// e.type === '505' 未开通消息撤回
// e.type === '506' 没有在群组或聊天室白名单
// e.type === '501' 消息包含敏感词
// e.type === '502' 被设置的自定义拦截捕获
// e.type === '503' 未知错误
console.log("Send private text error");
}
});
WebIM.conn.send(msg.body);
console.log('msg---', msg)
var value = WebIM.parseEmoji(msg.value.replace(/\n/mg, ''))
var time = WebIM.time()
var msgData = {
info: {
from: msg.from,
to: msg.to
},
username: '',
yourname: msg.from,
msg: {
type: msg.type,
data: value,
url: msg.url
},
style: '',
time: time,
mid: msg.type + msg.id
}
console.log('Audio Audio msgData: ', msgData);
if (msg.from == that.data.yourname) {
msgData.style = ''
msgData.username = msg.from
} else {
msgData.style = 'self'
msgData.username = msg.to
}
//console.log(msgData, that.data.chatMsg, that.data)
that.data.chatMsg.push(msgData)
wx.setStorage({
key: that.data.toWebIM + wx.getStorageSync('webIMuserId'),
data: that.data.chatMsg,
success: function () {
if (msg.type == 'audio')
return;
//console.log('success', that.data)
that.setData({
chatMsg: that.data.chatMsg,
})
console.log('chatMsg!!~~',that.data.chatMsg)
setTimeout(function () {
that.setData({
toView: that.data.chatMsg[that.data.chatMsg.length - 1].mid
})
}, 100)
}
})
},
3.获取历史消息
通常我们会把两天记录存放在本地缓存中，一般以 用户名和好友名 作为key来缓存聊天记录。