前言

几年前的项目里写了一pc版的私信功能，使用的版本和代码比较老了， 这篇文章就直接粘了之前的代码简单的改了改，说明一下问题； 主要就是写一下这个功能如何下手，思想，以及界面如何整，消息怎么发等； 也只是截取了当时项目里私信的一部分功能，这个完全可以说明问题了；

效果

界面大概是这样的

整体动态效果是这样的

说下大致思路吧

首先是把界面分成左边和右边，左边占少一部分，是朋友目录界面； 右边占多一点，右边是聊天的详情界面； 点击左边对应的那个人，右边就会出现本人跟点击的那个人的聊天详情；

左边人员目录的思路

左边的人员目录和显示的头像，最新的一条消息还有时间，这些都是后端返给前端的； 前端把数据展现出来就行， 时间那里可以根据公司需求以及后端返回的格式转成前天，刚刚等根据需求而定； 我这块时间项目中是有分开前天，昨天，刚刚的， 只不过这里就自己造的数据时间随便写的； 当然这里数据多的时候，可做成虚拟滚动效果； 每个人头像那个红色是消息数量，当读完消息时，就恢复成剩下的消息数量；

右边聊天详情的思路

右边是左边点击对应的聊天人员时， 拿这个人的id之类的数据去请求后端，拿对应的聊天详情数据； 最下面的显示的是最新的聊天信息，后端给的排序不对，可自己反转去排序； 这里也做成虚拟滚动； 最上面显示的那个名称是当前和谁聊天的那个人的昵称；

聊天界面里也显示的是时间，昵称，头像，聊天信息内容， 时间也需要分昨天，前天，刚刚等。。。

发送消息的思路

我这里也做了按键和点击按钮两种方式； 按键就是在代码里添加一个键盘的监听事件就可；

    var footerTarget = document.getElementById('footer');
    footerTarget.addEventListener('keydown', this.footerKeydown);

Enter按键是13；

//底部keydown监听事件
  footerKeydown = (e) => {
    if (e?.keyCode === 13) {
      this.handleSubmit();
    }
  };

发送消息界面其实就是个表单，做成那个样子就可以啦； 发送消息时，调用后端接口，把这条消息添加在消息数据后面就可；

结尾

只是简单写下思路就已经写这么多了； 代码后面有空给粘上； 由于我是临时把几年前的代码拿出来粘的， 为了显示效果，数据也是自己造的， 一些时间呀以及显示，已读信息的数量呀以及其他一些细节都没有管， 实际项目中直接对应接口嘛， 所以这里就只是随便改改说明一下问题哈；