做IM即时通讯的成果:
成功实现了H5端和APP端之间的通信(H5和H5之间也已实现),将H5嵌入到微信小程序,并且开发了SDK使得小程序也能实时得到消息的数量和消息内容。
遇到的难点
(1)消息的状态、数量、内容,需要实时获取,展示在小程序端和H5端
(2)尽可能实施缓存来缓解请求压力,mqtt在小程序联调时会产生些问题
(3)聊天详情中的所有消息会经常用到循环来改变消息的状态,要解开耦合,并且要优化算法进行循环。
(4)储存问题,H5不同于后端语言,不同于原生安卓和IOS,他们有自己的储存空间并可操作。
(5)假如每个消息都有自己的生命周期,例如:开始发送、消息loading、发送成功、发送失败、消息重发、已读未读等。影响消息整个周期的因素很多,断网、网络差、丢包等等。还有各种聊天场景,也会影响到,例如息屏、切换前后台。
实现使用的技术
(1)使用的是MQTT即时通讯框架,里面会提供一些推送、订阅、失败等API
(2)需要对websocket有一定了解,MQTT就是基于ws协议
(3)用VUE实现H5页面,包括好友列表、聊天详情
(4)uniapp做的小程序,实现接入小程序的SDK文件在uni开发
以下代码是MQTT的连接,会用到的一些API,包括一些参数。(此代码不能执行,仅供观摩)
class ConnectMq {
/**
* @param {*} publishId 推送给对方的id
* @param {*} clientId 自己的连接id保证唯一性
* @param {*} username 用户信息里面的姓名
* @param {*} password 用户信息里面的token
* @param {*} CHANNEL 不同端的不同渠道
*/
constructor(clientId = '', password = '', CHANNEL = '') {
this.channel = CHANNEL
this.isConnectFlag = false // 是否连接的标识
this.clientId = clientId
this.username = ''
this.password = password
this.publishId = '' // 推送给对方的id
this.uid = '' // 接受消息的uid 通过 connect 拿到的值
this.onmessage = '' // 响应的消息
this.onmessageUser = '' //
this.kdimCT = null // mqtt的实列
this.maxReconnectNum = 0 // 最大重连次数 50次就不重连
this.userIdArr = [] // 好友列表的所有id
this.allstorageArr = []
this.init()
}
init() {
try {
this.mqtt_connect() // 连接 mqtt
this.connect() // 连接服务器
this.message() // 监听mq的返回 响应请求
this.reconnect() // 重连
this.offline() // 脱机
this.end() // 脱机
this.close() // 监听Socket的关闭
this.packetsend()
this.packetreceive()
this.disconnect(