IM即时通讯H5端，MQTT

做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()
			this