如何实现web端的对话聊天功能_web服务器怎么实现聊天功能

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();
};