如何实现web端的对话聊天功能

_Forever__

已于 2024-01-18 15:52:54 修改

阅读量440

点赞数 9

分类专栏：项目问题总结文章标签： javascript 开发语言 ecmascript

于 2024-01-17 15:29:36 首次发布

本文链接：https://blog.csdn.net/qq_27984747/article/details/135651588

版权

项目问题总结专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中实现滚动条始终位于底部的方法，持久化本地存储消息的技巧，以及处理回车键输入（ctrl+enter和enter）和定时清空对话内容的代码示例。

摘要由CSDN通过智能技术生成

1、如何实现滚动条始终居于底部？

  //设置滚动条到最底部
   const scrollBottom = () => {
  //nextTick的作用是等到更新页面后再设置滚动条到最底部，避免对话数据未更新导致始终滚动到倒数第二行
  nextTick(() => {
    info.value.scrollTop = info.value.scrollHeight;
  });
};

2、如何实现持久化本地存储消息？

localStorage.setItem("messages", JSON.stringify(messages.value));
messages.value = JSON.parse(localStorage.getItem("messages") as string);

3、回车键输入input时，ctrl+enter换行，enter不换行？

//ctrl+enter换行，enter不换行
const handelEnter = (event?: any) => {
  if (event.ctrlKey && event.keyCode === 13) {
    //ctrl+enter
    input.value += "\n";
    return true;
  } else if (event.keyCode === 13) {
    //enter
    event.preventDefault(); // 阻止浏览器默认换行操作
    return false;
  }
}

4、如何定时清空对话内容？

通过每条消息的time进行判断，当打开页面的时间戳减去最后一条消息的时间戳的值大于一个月的时间戳，就清空对话内容，否则，直接获取对话内容，展示在页面上。

const initMessages = () => {
  if (store.messages !== null) {
    const storeMessages = store.messages;
    const timestamp = new Date().getTime() - storeMessages[0]?.time;
    // 超过一个月时清除对话内容
    if (timestamp >= 2592000000) {
      localStorage.removeItem("messages");
      localStorage.setItem("messages", JSON.stringify(messages.value));
    } else {
      //页面创建时获取对话内容
      messages.value = store.messages;
    }
  }
  scrollBottom();
};