今天去上班非常迷茫,没有收到什么新任务。唯独就是打算分析并解决下昨天用腾讯 IMSDK 写聊天室项目发现的一个新问题。
这个问题就是 SDK 自带的 CONVERSATION_LIST_UPDATED 事件返回的对象数据不是即时的,存在异步修改的行为,导致列表渲染结果未同时进行更新,展示成错误的空值。这个事件主要用于会话列表(也称近期联系人)的刷新,具体复现步骤如下:
- 根据用户 ID 注册得到新用户 B
- 设置用户信息(改名称和头像)并主动和 A 用户聊天
- 聊天列表内用户 B 没有名称和头像,用控制台打印为空,展开对象却可以看到
官方提供了一个 Demo 却没有这样的问题,因为它使用的是 Vue 2 实现的。要知道 Vue 2 的对象是采用 defineProperty
实现,只要原始对象有修改就会触发对应 DOM 的更新。虽然它用了 Vuex,但大致原理应该是相通的。而我手上的 React 并不是,必须要 setState
才行啊!
你可能会想,这玩意修改资料没回调或者 Promise 的嘛?不好意思,还真的没有!因为这件事情,我还被隔壁 iOS 老哥吐槽了,还说这是大厂做好的东西,肯定是我的食用方式不对。其实这点我不认同,iOS 渲染的处理机制没这么复杂,Web 肯定和他那边不一样。实际结果就是这样啊,它异步刷新了我没有办法知道啊...
既然没有直接的办法解决,那还有什么奇淫妙招么?我有 2 个设想,首先是手动刷新「会话列表」(貌似无效,因为刷新页面拿的数据也是没有的),或者是判断返回为空的时候手动设置一次资料(需要遍历会话列表找到对应的人)但没特地逐一做尝试,因为需要反复注册用户,还是挺麻烦的。
我和上次一样提交了一个工单,结果还附带了 setTimeout
给他们说明这玩意是存在异步的(我后面抓到了条 WebSocket 请求,也确实有),有没有什么靠谱合理的方法获取。他们给的办法很简单,就是让我在「会话列表」里面点击某人之后获取「对话信息」,再刷新会话列表里面对应的资料。
这个看起来和我的想法差不多啊,也许是可取的一个选择?不过这样还是会使得「会话列表」首次渲染为空,还是个问题。要求腾讯改 SDK 是肯定不现实了,各位大佬还有什么好的办法分享下么?