盒子IM的一次复盘

这一个多月公司高强度加班，加到人都麻木了，根本没时间好好写文章，空下来了朋友介绍了一个活，看着没啥难度就接下来了。里面涉及到了IM即时通讯，
我们采用了一个不错的第三方开源库盒子IM，完全满足我们的需求，帮了我们大忙，目前star也有3.3K了。仓库地址在这：https://gitee.com/bluexsx/box-im
，感谢作者blue提供这么棒的库。

集成IM

我们是基于vue3和Antd来搭建项目的，前面的功能都差不多做完了，我打算集成IM，然后发现IM是Vue2 + element-ui，因为vue3可以兼容vue2，
所以一开始我打算强行集成进去，可当我发现IM使用的element-ui只支持vue2的时候，我是有点崩溃的，因为强行在vue3里使用vue2的库，会出现依赖冲突、组件渲染异常以及响应系统不兼容，甚至api
都会出现异常，炸裂了。
摆在我面前只有两条路。

1. 把IM里的element组件手动修改，逻辑以及样式。
2. 趁现在还有时间，基于IM把我们的项目挪进去。

那肯定选2啊，全神贯注吭哧吭哧干了2小时，终于移植完毕了。

路由问题

盒子IM是通过路由跳转来实现切换菜单的，这和我系统冲突了，现象是两边路由都在乱跳，一开始我打算捋清楚，后来干脆直接通过变量切换组件，这样完美解决路由冲突问题。

聊天

和朋友测试了聊天，我们两端没调试多久，很快就可以聊天了，包括发送表情包、撤回、删除等等。我还研究了一下他的存储方式，他使用了localforage在前端做了数据库离线储存。

私聊界面一直显示loading

这个问题真的花了整整大半天才定位到，更是奋战到凌晨啊，把里面的逻辑大致都读了一遍了，最后是提了Issues得到了作者的回复，才解决的。实际上就是当我调用/message/private/pullOfflineMessage和/message/group/pullOfflineMessage这2个
获取离线消息接口之后，后端没有通过ws给我推type为30的消息导致的，ok反馈给后端就行了。

发起聊天

我会在其他地方点击发起聊天,这个时候我需要唤醒IM，并且切换到聊天画面以及将被发起人放在聊天第一位。我通过全局变量控制IM的现实与隐藏，但是ws始终是连着的，所以唤醒IM问题
可以解决掉。切换到发起人聊天界面也很简单。通过阅读代码，我们可以使用IM里的openChat和setActiveChat方法即可。

const obj = {
  "type": "PRIVATE",
  "targetId": 4,
  "showName": "wj",
  "headImage": ""
}
this.chatStore.setCurrentActiveChatMenu(1); // 激活私聊菜单
this.chatStore.openChat(obj); // 加载聊天对象
this.chatStore.setActiveChat(0); // 聊天对象激活

哦对了，我最近开发了一个叫牛马工作器的chrome拓展插件，很好玩哦，感兴趣的话，给我的公众号回复牛马即可免费获取。

我的微信公众号： 梨的前端小屋