前几天想在Vue项目里加个群聊功能，结果跟想象完全不一样。以前用JQuery写过，直接连就行，现在改成Vue老是各种报错。网上看到有人说vue-native-websocket库不错，就试试看。装了才知道，光配环境就得搞清楚 Vuex 怎么对接。

先装库的时候还挺顺利，yarn add 一下就完了。到main.js里配参数时各种绕晕。什么base.lkWebSocket地址要改对，自动重连参数得设时间，store对象得关联上。中间试过三次才对，每次保存重启都得重新连服务器。

搞完配置文件才发现，消息怎么发都发不出去。打开控制台才发现sendObj写成send了，后来发现是因为用了JSON格式必须用专门的发送方法。调试了半小时才反应过来参数写反了。

页面渲染更麻烦，服务端推来的消息全是乱码。后来发现没转JSON，把data里的内容手动解析才正常显示。用户头像和ID对比这部分代码改了五遍，总有人ID对不上显示错位置。

最头疼的是消息列表存本地。开始想着简单存字符串，结果下次进来全乱了顺序。后来改成数组存对象，每次新增都push再转JSON存进去。滚动条定位问题也折腾半天，非得等DOM更新完才能调用scrollTop。

上线测试时总有人说断开连接。查了下原来是服务器超时，赶紧加了个心跳包。在vuex里设个定时器每30秒发个空消息，这才稳定下来。之前没发现这事，差点以为服务器坏了。

用了这个方案后，群里三十多人聊天也没卡。虽然第一次配时手忙脚乱，但后来发现都是参数没对齐的问题。现在回头看文档才知道，官方给的例子根本没说要改mutation参数格式。

发消息功能倒是简单，就是回车触发事件，把输入框内容打包发过去。最难弄的是表情符号，用户打/括起来的代码得替换成图片，正则表达式调了好久才匹配准。

最后页面布局倒是顺的，用v-if判断用户ID区分左右边，SVG尾巴箭头用了现成图标。样式看着一般但能用，主要功能没问题就行。反正用户也不在乎界面多好看，能发消息就行。

项目跑了一周没崩溃过，虽然偶尔延迟但自动重连起来了。最开始以为得用原生JS写，结果库自带的Vuex集成反而更省事。现在想再加个离线消息提醒，但暂时够用了，就先这样吧。