微信小程序即时通讯开发记录（结合通讯云IM）
分类：微信小程序
前言
最近接到一个需求是在原项目的基础上去开发一个即时通讯的功能，主要是一对一的聊天，供客户和客户之间进行即时通讯，功能主要包括聊天列表、发送文字、发送表情、发送图片、发送视频、发送语音、发送自定义信息等功能。因为项目需求，所以选择了腾讯云IM来开发。
开发流程
首先是要注册腾讯云并创建应用，拿到APPID和秘钥。
文档位置：cloud.tencent.com/document/pr…
1.安装依赖
// IM 小程序 SDK
npm install tim-wx-sdk --save
// 发送图片、文件等消息需要腾讯云 即时通信 IM 上传插件
npm install tim-upload-plugin --save
2.在项目脚本里引入模块，并初始化。
安装完依赖以后在项目目录的utils目录下创建tencentIM目录，用于存放关于即时通讯IM相关的js文件。
封装event.js
因为项目中需要一些时间监听，所以需要在utils里面添加一个event类，然后在app.js上面绑定到wx全局对象上。
// app.js
import Event from './utils/tencentIM/event'
wx.event = new Event();
// event.js
class Event {
version = "1.0.0";
constructor() {
this._events = {};
}
on(eventName, listener) {
if (!eventName || !listener) return;
// 判断回调的 listener 是否为函数
if (isValidListener(listener)) {
throw new TypeError("listener must be a function");
}
let events = this._events;
let listeners = (events[eventName] = events[eventName] || []);
let listenerIsWrapped = typeof listener === "object";
// 不重复添加事件，判断是否有一样的
if (indexOf(listeners, listener) === -1) {
listeners.push(
listenerIsWrapped
? listeners
: {
listener,
once: false,
}
);
}
return this;
}
once(eventName, listener) {
// 直接调用 on 方法，once 参数传入 true，待执行之后进行 once 处理
this.on(eventName, {
listener,
once: true,
});
return this;
}
emit(eventName, args) {
// 直接通过内部对象获取对应自定义事件的回调函数
let listeners = this._events[eventName];
if (!listeners) return;
// 需要考虑多个 listener 的情况
listeners.forEach((listener) => {
if (listener) {
listener.listener.apply(this, args || []);
if (listener.once) {
this.off(eventName, listener.listener);
}
}
});
return this;
}
off(eventName, listener) {
let listeners = this._events[eventName];
if (!listener) return;
listeners.some((item, index) => {
if (item && item.listener === listener) {
listeners.splice(index, 1);
return true;
}
return false;
});
}
allOff(eventName) {
if (eventName && this._events[eventName]) {
this._events[eventName] = [];
} else {
this._events = {};
}
}
}
// 判断是否是合法的 listener
function isValidListener(listener) {
if (typeof listener === "function") {
return true;
} else if (listener && typeof listener === "object") {
return isValidListener(listener.listener);
} else {
return false;
}
}
// 判断新增自定义事件是否存在
function indexOf(array, item) {
var result = -1;
item = typeof item === "object" ? item.listener : item;
for (var i = 0, len = array.length; i < len; i++) {
if (array[i].listener === item) {
result = i;
break;
}
}
return result;
}
服务端开发生成userSig接口或者下载腾讯云提供生成userSig的文件
相关文档：cloud.tencent.com/document/pr…
腾讯云提供的客户端生成userSig文件：github.com/tencentyun/…
初始化tim并设置监听
import TIM from 'tim-wx-sdk';
import TIMUploadPlugin from 'tim-upload-plugin';
let options = {
SDKAppID: 0 // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
};
// 创建 SDK 实例，`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例
let tim = TIM.create(options); // SDK 实例通常用 tim 表示
// 设置 SDK 日志输出级别，详细分级请参见 <a href="https://imsdk-1252463788.file.myqcloud.com/IM_DOC/Web/SDK.html#setLogLevel">setLogLevel 接口的说明</a>
tim.setLogLevel(0); // 普通级别，日志量较多，接入时建议使用
// tim.setLogLevel(1); // release 级别，SDK 输出关键信息，生产环境时建议使用
// 注册腾讯云即时通信 IM 上传插件
tim.registerPlugin({'tim-upload-plugin': TIMUploadPlugin});
// 监听事件，例如：
tim.on(TIM.EVENT.SDK_READY, function(event) {
// 收到离线消息和会话列表同步完毕通知，接入侧可以调用 sendMessage 等需要鉴权的接口
// event.name - TIM.EVENT.SDK_READY
});
tim.on(TIM.EVENT.MESSAGE_RECEIVED, function(event) {
// 收到推送的单聊、群聊、群提示、群系统通知的新消息，可通过遍历 event.data 获取消息列表数据并渲染到页面
// event.name - TIM.EVENT.MESSAGE_RECEIVED
// event.data - 存储 Message 对象的数组 - [Message]
});
tim.on(TIM.EVENT.MESSAGE_REVOKED, function(event) {
// 收到消息被撤回的通知
// event.name - TIM.EVENT.MESSAGE_REVOKED
// event.data - 存储 Message 对象的数组 - [Message] - 每个 Message 对象的 isRevoked 属性值为 true
});
tim.on(TIM.EVENT.MESSAGE_READ_BY_PEER, function(event) {
// SDK 收到对端已读消息的通知，即已读回执。使用前需要将 SDK 版本升级至 v2.7.0 或以上。仅支持单聊会话。
// event.name - TIM.EVENT.MESSAGE_READ_BY_PEER
// event.data - event.data - 存储 Message 对象的数组 - [Message] - 每个 Message 对象的 isPeerRead 属性值为 true
});
tim.on(TIM.EVENT.CONVERSATION_LIST_UPDATED, function(event) {
// 收到会话列表更新通知，可通过遍历 event.data 获取会话列表数据并渲染到页面
// event.name - TIM.EVENT.CONVERSATION_LIST_UPDATED
// event.data - 存储 Conversation 对象的数组 - [Conversation]
});
tim.on(TIM.EVENT.GROUP_LIST_UPDATED, function(event) {
// 收到群组列表更新通知，可通过遍历 event.data 获取群组列表数据并渲染到页面
// event.name - TIM.EVENT.GROUP_LIST_UPDATED
// event.data - 存储 Group 对象的数组 - [Group]
});
tim.on(TIM.EVENT.PROFILE_UPDATED, function(event) {
// 收到自己或好友的资料变更通知
// event.name - TIM.EVENT.PROFILE_UPDATED
// event.data - 存储 Profile 对象的数组 - [Profile]
});
tim.on(TIM.EVENT.BLACKLIST_UPDATED, function(event) {
// 收到黑名单列表更新通知
// event.name - TIM.EVENT.BLACKLIST_UPDATED
// event.data - 存储 userID 的数组 - [userID]
});
tim.on(TIM.EVENT.ERROR, function(event) {
// 收到 SDK 发生错误通知，可以获取错误码和错误信息
// event.name - TIM.EVENT.ERROR
// event.data.code - 错误码
// event.data.message - 错误信息
});
tim.on(TIM.EVENT.SDK_NOT_READY, function(event) {
// 收到 SDK 进入 not ready 状态通知，此时 SDK 无法正常工作
// event.name - TIM.EVENT.SDK_NOT_READY
});
tim.on(TIM.EVENT.KICKED_OUT, function(event) {
// 收到被踢下线通知
// event.name - TIM.EVENT.KICKED_OUT
// event.data.type - 被踢下线的原因，例如:
// - TIM.TYPES.KICKED_OUT_MULT_ACCOUNT 多实例登录被踢
// - TIM.TYPES.KICKED_OUT_MULT_DEVICE 多终端登录被踢
// - TIM.TYPES.KICKED_OUT_USERSIG_EXPIRED 签名过期被踢 （v2.4.0起支持）。
});
tim.on(TIM.EVENT.NET_STATE_CHANGE, function(event) {
// 网络状态发生改变（v2.5.0 起支持）。
// event.name - TIM.EVENT.NET_STATE_CHANGE
// event.data.state 当前网络状态，枚举值及说明如下：
// \- TIM.TYPES.NET_STATE_CONNECTED - 已接入网络
// \- TIM.TYPES.NET_STATE_CONNECTING - 连接中。很可能遇到网络抖动，SDK 在重试。接入侧可根据此状态提示“当前网络不稳定”或“连接中”
// \- TIM.TYPES.NET_STATE_DISCONNECTED - 未接入网络。接入侧可根据此状态提示“当前网络不可用”。SDK 仍会继续重试，若用户网络恢复，SDK 会自动同步消息
});
// 开始登录
tim.login({userID: 'your userID', userSig: 'your userSig'});
聊天开发记录点
(1) 表情开发
进入www.oicqzone.com/tool/emoji/ 网站，把最后一列的表情下载下来
当然也可以通过下面这种方式把表情一下子copy下来，然后存到一个js里面
命令：Array.from(document.querySelectorAll('body > table > tbody > tr > td:nth-child(8)')).map(item=>item && item.innerText||'')
然后导入项目中就可以使用，点击表情的时候将表情直接放到输入框文本后面
selectEmoji(e){
const {text} = e.currentTarget.dataset
this.setData({
colSendMsg:this.data.colSendMsg + text,
})
}
(2)发送语音功能
发送语音主要是调用 wx.createInnerAudioContext()方法来实现的
主要细节在于录音授权、长按录音，录音时间短于一定时间不予以发送并提示，可以通过上滑的方式取消发送。
录音授权
// 点击录音按钮
record() {
let that = this
// canRecord变量是用于保存是否授权录音功能的状态
if (that.canRecord) {
// 开始录音
that.beforeStartRecord()
return
}
wx.authorize({
scope: 'scope.record',
success() {
console.log("录音授权成功");
that.canRecord = true
// 用户已经同意小程序使用录音功能
},
fail() {
console.log("第一次录音授权失败");
wx.showModal({
title: '提示',
content: '您未授权录音，功能将无法使用',
showCancel: true,
confirmText: "授权",
confirmColor: "#52a2d8",
success: function (res) {
if (res.confirm) {
//确认则打开设置页面（重点）
wx.openSetting({
success: (res) => {
console.log(res.authSetting);
if (!res.authSetting['scope.record']) {
//未设置录音授权
wx.showModal({
title: '提示',
content: '您未授权录音，功能将无法使用',
showCancel: false,
success: function (res) {},
})
} else {
//第二次才成功授权
that.canRecord = true
console.log("设置录音授权成功");
}
},
fail: function () {
console.log("授权设置录音失败");
}
})
} else if (res.cancel) {
console.log("cancel");
}
},
fail: function () {
console.log("openfail");
}
})
}
})
},
后面录音相关的流程很多博文上都有，就不再赘述，只提供大家一个思考：
(3)页面滚动到底部
聊天页面很重要一点是要让用户看到最新的信息，所以要显示页面的最底部内容，我根据以下几种情况显示最底部内容：
- 第一次进入页面
- 发送任意消息
- 监听到最新的消息（这里其实推荐值设置提醒）
具体部分代码如下：
// wxml
<scroll-view class="chat-area" refresher-enabled="{{true}}" refresher-triggered="{{triggered}}"
bindrefresherrefresh="onRefresh" scroll-into-view="{{ viewIndex }}" scroll-y="true" enable-flex="{{true}}"
bindtap="onHideSendMore" bindtap="hideBottom" style="padding-bottom:{{InputBottom}}px">
<!-- <view wx:if="{{showLoading}}" class="cu-load loading"></view> -->
<view class="cu-chat">
<view wx:for="{{ arrMsg }}" wx:key="ID">
// 具体内容
</view>
</view>
</scroll-view>
// js - pageScrollToBottom
// isBottom 是否滑动到底部
// lastIndex 滑动到指定位置
// arrMsg 消息列表
pageScrollToBottom(isBottom,lastIndex = 0) {
let index = null
if (isBottom) {
index = 'msg-' + (this.data.arrMsg.length -1);
} else if(lastIndex) {
index = 'msg-' + lastIndex;
}else{
index = 'msg-' + 0;
}
this.setData({
viewIndex: index
})
},
(4)底部弹起高度
我们在开发的时候常常需要底部弹起，还有键盘弹起的操作，这里也需要优化一下用户的体验。
- 弹起的时候让聊天记录也向上推起
- 保持其他部门弹起的高度和键盘弹起高度一样（这样就不会有过多的切换跳动效果）
我使用style="padding-bottom:{{InputBottom}}px"的方式，inputBottom默认我设置了200，然后在键盘弹起的时候记录键盘弹起的高度，然后保存键盘弹起的高度，下次使用这个保存的高度
// wxml
<input catchblur="InputBlur"></input>
// js
InputFocus(e) {
let height = e.detail.height
if(height > 0) this.InputBottom = height
this.setData({
InputBottom: height
})
}
尾声
本文只是对我开发这个项目的时候一些重要的地方的一个记录，供大家参考和以后个人的回顾，如果有不足的地方，还请大家多多指点。
作者：掘金-微信小程序即时通讯开发记录（结合通讯云IM）