之前学习使用uni-app简单实现一个在线聊天的功能，今天记录一下项目核心功能的实现过程。页面UI以及功能逻辑全部来源于微信，即时聊天业务的实现使用socket.io，前端使用uni-app开发，后端服务器基于node实现，数据库选择mongoDB。

首先在系统中注册两个用户，将对方添加为好友后，开始正常聊天，先简单看一下聊天功能的效果图，分为私聊和群聊两大部分

一对一聊天效果：

在好友列表中添加群成员创建群后即可群聊，群聊效果：

目录

聊天信息列表的渲染

聊天信息发送的相关问题

实现一对一聊天

关于websocket

建立连接

存储连接的用户

发送聊天信息 

首页新消息提示

实现群聊

加入房间

发送群消息

聊天信息列表区域是一个滚动区，这里使用scroll-view组件，其中对于聊天信息展示，主要分为自己的消息和好友的消息，自己的消息位于右侧，好友的消息位于左侧，所以静态页面阶段要实现是左侧消息和右侧消息的页面布局，以及这些消息类型为文字，图片，语音，位置信息时的布局。

后端接口返回的聊天信息是按照时间顺序排列的，渲染聊天信息时使用v-for遍历接口返回的消息列表的内容即可，需要注意的是，还需要使用条件渲染v-if根据每一条消息的发送者id和当前用户的id判断消息的发送方和接受方，渲染在左右指定的区域，当前用户的id从本地存储localStorage中获取；还有就是使用条件渲染判断消息的类型，是文字，图片，语音或定位，合理展示。

点击发送按钮，正式将信息发送给服务器之前，还有几个问题需要解决，这里面有许多坑，在实现的时候走了不少弯路。

1.scroll-view如何始终定位在最底部？

如下图，当发送了一条聊天信息时，聊天信息列表就会增加这条消息，之所以能够看到这条消息，那是因为scroll-view的滚动条在消息添加时将位置定位到了最底部，这是需要进行一些处理的，默认效果是这样的

是不是很变扭？这样的用户体验很差，滚动条不会自动定位到底部，这里需要给scroll-view组件添加一个scroll-into-view属性，按照官方文档的说法它的值应为某子元素id。设置哪个方向可滚动，则在哪个方向滚动到该元素，也就是说可以动态的修改这个属性的值，从而让scroll-view组件的滚动到想要滚动的页面元素位置。

这里就给每一个scroll-view的子元素(聊天记录item)添加id属性，属性值为 msg + 每条聊天记录的id

在发送消息的方法中修改scroll-into-view的值scrollToView，让其为最新一条聊天记录即msg.length - 1的id值，必须使用在$nextTick回调中，这是为了在新的聊天记录渲染完毕后再去定位。

 这样才能实现最终的效果

2.如何动态修改scroll-view的高度

如下图，点击 + 按钮发送位置信息时会弹出底部菜单栏，但此时scroll-view内的聊天内容会被覆盖，用户想要看最后一条记录还需操作滚动条，这也是不好的用户体验。

需要做到的是弹出底部菜单栏的同时减小聊天内容区域scroll-view组件的高度，让用户能够完整的看到最后的聊天记录。

需要获取底部菜单栏弹出的高度，随后让scroll-view组件减少这部分高度即可。在uni-app中无法操作dom，获取元素的尺寸使用createSelectorQuery获取页面节点，再用 boundingClientRect查询节点的尺寸。官方文档：uni.createSelectorQuery() | uni-app官网

使用如下代码获取页面节点的尺寸，可能无法及时获取到(得到的可能是undefined)，这里需要用定时器包裹，才能拿到菜单栏的高度