智能客服聊天逻辑实现

实现自动聊天窗口逻辑代码：

  <script>
    // 关键词-回复映射表
    const replies = {
      "你好": "你好，请问有什么可以帮助您的？",
      "订单查询": "请提供订单号，我将为您查询订单信息。",
      "产品问题": "请详细描述您遇到的问题，我会尽快帮您解决。",
      "投诉": "抱歉让您不满意，请您提供详细信息，我们将尽快处理。",
      "钱": "这边是成人学历提升咨询窗口，目前是报考高峰期，您可以先留下【手机+姓名】，老师给您转发入学申请条件，院校专业，报考流程，优惠信息，费用明细等相关信息。",
      "价格": "这边是成人学历提升咨询窗口，目前是报考高峰期，您可以先留下【手机+姓名】，老师给您转发入学申请条件，院校专业，报考流程，优惠信息，费用明细等相关信息。",
      "成考": "这边是成人学历提升咨询窗口，目前是报考高峰期，您可以先留下【手机+姓名】，老师给您转发入学申请条件，院校专业，报考流程，优惠信息，费用明细等相关信息。",
      "国家开放大学": "这边是成人学历提升咨询窗口，目前是报考高峰期，您可以先留下【手机+姓名】，老师给您转发入学申请条件，院校专业，报考流程，优惠信息，费用明细等相关信息。",
      "国开": "这边是成人学历提升咨询窗口，目前是报考高峰期，您可以先留下【手机+姓名】，老师给您转发入学申请条件，院校专业，报考流程，优惠信息，费用明细等相关信息。",
      "电大": "您可以先留下【手机+姓名】，老师给您转发入学申请条件，院校专业，报考流程，优惠信息，费用明细等相关信息。",
      "成人大学": "这边是成人学历提升咨询窗口，目前是报考高峰期，您可以先留下【手机+姓名】，老师给您转发入学申请条件，院校专业，报考流程，优惠信息，费用明细等相关信息。",
      "在的": "请您放心，我们不会透露您的个人隐私，请问您的【手机号】是？方便我们进一步向您介绍",
      "再见": "再见，祝您生活愉快！"
    };
    const over20s = [
      '您好，还在吗?',
      '那我将院校专业、报考条件、报名时间、报考流程和费用明细发您',
      '您先了解看看，报不报名再决定哈，您接收资料的【手机号码或者微信】是?',
      '免费短信，您说下您的【手机号】，建议您看看，是系统发不会打扰您的',
      '是这样的，内容是保存在短信系统的，我复制不了，只是发给您先了解，您了解后有需要再联系我们。',
      '我们是正规机构，不会泄露您的信息，可以放心的，您的【手机号码】是?',
    ];

    // 获取聊天容器、消息输入框和发送按钮元素
    const chatContainer = document.querySelector('.chat_history');
    const messageInput = document.querySelector('.inputWindow');
    const sendButton = document.querySelector('.btn');

    let isUserTyping = false;

    // 监听发送按钮点击事件
    sendButton.addEventListener('click', sendMessage);
    // 监听消息输入框的键盘事件
    messageInput.addEventListener('keydown', function (event) {
      if (event.keyCode === 13) { // 如果按下的是回车键
        event.preventDefault(); // 阻止默认的回车行为（如换行）  
        sendMessage(); // 调用发送消息的函数
      }
    });

    // 发送消息的函数
    function sendMessage() {

      isUserTyping = true;

      // 去除首尾空白
      let message = messageInput.innerHTML.trim();
      // 去特殊字符
      const regex = /\s+/g; // \s 匹配任何空白字符，包括空格、制表符、换页符等，+ 表示匹配一个或多个  
      message = message.replace(regex, '');

      if (message === '') {
        return; // 如果消息为空则不处理
      }
      appendMessage('user', message); // 添加用户发送的消息到聊天窗口

      // 检测用户输入的是否是手机号
      if (message.match(/\d{11}/)) {
        let reply = "感谢您留下手机号，我们的专业顾问会尽快与您联系，为您提供详细的咨询服务。";
        appendMessage('agent', reply);
        sendUserDataToServer(message); //将手机号发送到服务器
      } else {
        const reply = getReply(message); // 获取客服回复的消息
        setTimeout(() => { appendMessage('agent', reply); }, 1500); // 延迟一秒后添加客服回复的消息
      }

      messageInput.innerHTML = ''; // 清空输入框
      // chatContainer.scrollTop = chatContainer.scrollHeight; // 将聊天容器滚动到底部：此次写自能客服会慢回复
    }

    // 根据用户消息获取客服回复的函数
    function getReply(message) {

      for (const keyword in replies) { // 遍历关键词-回复映射表
        if (message.includes(keyword)) { // 如果用户消息包含关键词
          return replies[keyword]; // 返回对应的回复消息
        }
      }
      return "抱歉，是这样的，内容是保存在短信系统的，我复制不了，只是发给您先了解，您了解后有需要再联系我们。所以您的【电话号码】是？"; // 默认回复消息
    }

    // 添加消息到聊天窗口的函数
    function appendMessage(sender, text) {
      const messageDiv = document.createElement('div'); // 创建消息容器元素
      messageDiv.classList.add('box-message', sender + '-message'); // 添加消息容器的类

      const avatarImg = document.createElement('img'); // 创建头像元素
      avatarImg.src = sender === 'user' ? './image/beauty.png' : './image/beauty.png'; // 根据发送者设置头像
      messageDiv.appendChild(avatarImg); // 将头像添加到消息容器

      const messageContentDiv = document.createElement('div'); // 创建消息内容容器元素
      messageContentDiv.classList.add('message-content'); // 添加消息内容容器的类
      messageDiv.appendChild(messageContentDiv); // 将消息内容容器添加到消息容器

      const timestampSpan = document.createElement('span'); // 创建时间戳元素
      timestampSpan.classList.add('timestamp'); // 添加时间戳的类
      timestampSpan.textContent = getCurrentTime(); // 设置时间戳内容
      messageContentDiv.appendChild(timestampSpan); // 将时间戳添加到消息内容容器

      const textDiv = document.createElement('div'); // 创建文本内容元素
      textDiv.textContent = text; // 设置文本内容
      messageContentDiv.appendChild(textDiv); // 将文本内容添加到消息内容容器

      chatContainer.appendChild(messageDiv); // 将消息容器添加到聊天窗口

      chatContainer.scrollTop = chatContainer.scrollHeight; // 将聊天容器滚动到底部
    }

    // 如果用户超过20秒没有发送消息，自动回复
    setInterval(function () {
      // const chatDisplay = document.querySelector('.chat')
      // console.log(chatDisplay.style.display)
      if (!isUserTyping) {
        let index = 0;
        const replyPrintIntervalId = setInterval(() => {
          if (isUserTyping) { // 如果用户开始输入，那么停止打印
            console.log("isUserTyping === true");
            clearInterval(replyPrintIntervalId);
          }
          appendMessage('agent', over20s[index++]);
          // console.log(index); //下表打桩
          // 停止循环打印
          if (index === over20s.length) {
            clearInterval(replyPrintIntervalId);
            console.log('定时器结束...');
          }
        }, 2000);

        isUserTyping = true; // 循环走完用户输入状态为true
      }
    }, 20 * 1000);

    /**
     * 定时检查用户输入
    */
    setInterval(() => {
      if (messageInput.innerHTML === "" && isUserTyping !== false) {
        isUserTyping = false;
      }
    }, 30 * 1000)

    function getCurrentTime() {
      const date = new Date(); // 获取当前时间
      const year = date.getFullYear();
      const month = `${date.getMonth() + 1}`.padStart(2, '0'); // 月份是从0开始的，所以要加1  
      const day = `${date.getDate()}`.padStart(2, '0');
      const hours = date.getHours();
      const minutes = `${date.getMinutes()}`.padStart(2, '0');
      const seconds = `${date.getSeconds()}`.padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }

    // 发送用户信息到服务器端
    function sendUserDataToServer(userData) {
      const nowTime = getCurrentTime();
      // 将用户对象转换为JSON字符串
      let userDataString = {
        phone: `${userData}`
      };
      userDataString = JSON.stringify(userDataString);
      console.log(userDataString);
      console.log("This is in typeof ---", typeof userDataString);

      // 发送POST请求到服务器  
      fetch('http://121.36.45.147:3333', {
        mode: 'no-cors',
        method: 'post',
        headers: {
          'Content-Type': 'application/json',
        },
        body: userDataString,
      })
        .then(response => {
          if (!response.ok) {
            // throw new Error('Network response was not ok');
            console.log('then')
          }
          return response.json();
        })
        .then(data => {
          console.log('Success:', data);
          // 这里可以添加其他成功处理逻辑，比如更新UI等  

        })
        .catch(error => {
          // console.error('Error:', error);
          console.log('catch')
          // 这里可以添加错误处理逻辑，比如显示错误消息等  
        });
    }

    // 示例用法：  
    // let user = {
    //   name: 'John Doe',
    //   email: 'johndoe@example.com',
    //   // 其他用户数据...
    // };

    // sendUserDataToServer(user);
  </script>