前言

几年前的项目里写了一pc版的私信功能，使用的版本和代码比较老了，

这篇文章就直接粘了之前的代码简单的改了改，说明一下问题；

主要就是写一下这个功能如何下手，思想，以及界面如何整，消息怎么发等；

也只是截取了当时项目里私信的一部分功能，这个完全可以说明问题了；

效果

界面大概是这样的

整体动态效果是这样的

说下大致思路吧

首先是把界面分成左边和右边，左边占少一部分，是朋友目录界面；

右边占多一点，右边是聊天的详情界面；

点击左边对应的那个人，右边就会出现本人跟点击的那个人的聊天详情；

左边人员目录的思路

左边的人员目录和显示的头像，最新的一条消息还有时间，这些都是后端返给前端的；

前端把数据展现出来就行，

时间那里可以根据公司需求以及后端返回的格式转成前天，刚刚等根据需求而定；

我这块时间项目中是有分开前天，昨天，刚刚的，

只不过这里就自己造的数据时间随便写的；

当然这里数据多的时候，可做成虚拟滚动效果；
每个人头像那个红色是消息数量，当读完消息时，就恢复成剩下的消息数量；

右边聊天详情的思路

右边是左边点击对应的聊天人员时，

拿这个人的id之类的数据去请求后端，拿对应的聊天详情数据；

最下面的显示的是最新的聊天信息，后端给的排序不对，可自己反转去排序；

这里也做成虚拟滚动；

最上面显示的那个名称是当前和谁聊天的那个人的昵称；

聊天界面里也显示的是时间，昵称，头像，聊天信息内容，

时间也需要分昨天，前天，刚刚等。。。

发送消息的思路

我这里也做了按键和点击按钮两种方式；

按键就是在代码里添加一个键盘的监听事件就可；

    var footerTarget = document.getElementById('footer');

    footerTarget.addEventListener('keydown', this.footerKeydown);

Enter按键是13；

//底部keydown监听事件
footerKeydown = (e) => {

    if (e?.keyCode === 13) {

      this.handleSubmit();

    }

  };

发送消息界面其实就是个表单，做成那个样子就可以啦；

发送消息时，调用后端接口，把这条消息添加在消息数据后面就可；

结尾

只是简单写下思路就已经写这么多了；

代码后面有空给粘上；

由于我是临时把几年前的代码拿出来粘的，

为了显示效果，数据也是自己造的，

一些时间呀以及显示，已读信息的数量呀以及其他一些细节都没有管，

实际项目中直接对应接口嘛，

所以这里就只是随便