我正在参加「掘金·启航计划」
前言
几年前的项目里写了一pc版的私信功能，使用的版本和代码比较老了，
这篇文章就直接粘了之前的代码简单的改了改，说明一下问题；
主要就是写一下这个功能如何下手，思想，以及界面如何整，消息怎么发等；
也只是截取了当时项目里私信的一部分功能，这个完全可以说明问题了；
效果
界面大概是这样的
整体动态效果是这样的
说下大致思路吧
首先是把界面分成左边和右边，左边占少一部分，是朋友目录界面；
右边占多一点，右边是聊天的详情界面；
点击左边对应的那个人，右边就会出现本人跟点击的那个人的聊天详情；
左边人员目录的思路
左边的人员目录和显示的头像，最新的一条消息还有时间，这些都是后端返给前端的；
前端把数据展现出来就行，
时间那里可以根据公司需求以及后端返回的格式转成前天，刚刚等根据需求而定；
我这块时间项目中是有分开前天，昨天，刚刚的，
只不过这里就自己造的数据时间随便写的；
当然这里数据多的时候，可做成虚拟滚动效果；
每个人头像那个红色是消息数量，当读完消息时，就恢复成剩下的消息数量；
右边聊天详情的思路
右边是左边点击对应的聊天人员时，
拿这个人的id之类的数据去请求后端，拿对应的聊天详情数据；
最下面的显示的是最新的聊天信息，后端给的排序不对，可自己反转去排序；
这里也做成虚拟滚动；
最上面显示的那个名称是当前和谁聊天的那个人的昵称；
聊天界面里也显示的是时间，昵称，头像，聊天信息内容，
时间也需要分昨天，前天，刚刚等。。。
发送消息的思路
我这里也做了按键和点击按钮两种方式；
按键就是在代码里添加一个键盘的监听事件就可；
var footerTarget = document.getElementById('footer');
footerTarget.addEventListener('keydown', this.footerKeydown);
Enter按键是13；
//底部keydown监听事件
footerKeydown = (e) => {
if (e?.keyCode === 13) {
this.handleSubmit();
}
};
发送消息界面其实就是个表单，做成那个样子就可以啦；
发送消息时，调用后端接口，把这条消息添加在消息数据后面就可；
结尾
只是简单写下思路就已经写这么多了；
代码后面有空给粘上；
由于我是临时把几年前的代码拿出来粘的，
为了显示效果，数据也是自己造的，
一些时间呀以及显示，已读信息的数量呀以及其他一些细节都没有管，
实际项目中直接对应接口嘛，
所以这里就只是随便改改说明一下问题哈；
