基于vue3实现的聊天机器人前端（附代码）

效果图 有帮助点个赞吧~

元素的绑定

1. v-model="message":

   • v-model是 Vue.js 中的一个指令，用于双向数据绑定。
   • 在这个例子中，v-model="message"将输入框的值与message变量绑定在一起。每当用户在输入框中输入内容时，message的值会自动更新；反之，如果message的值发生变化，输入框的内容也会相应地更新。

2. @keydown.enter="sendMessage":

   • @keydown.enter是 Vue.js 中的一种事件修饰符，用于监听键盘事件。
   • 在这个例子中，当用户按下回车键（enter）时，会触发sendMessage方法。
   • 这样设计的好处是用户可以直接通过回车键发送消息，而不需要点击发送按钮。

引入 UUID 生成库

import { v4 as uuidv4 } from 'uuid'; // 引入 UUID 生成库

1. import { v4 as uuidv4 } from 'uuid':
   • 这行代码从uuid库中导入了v4方法，并将其重命名为uuidv4。
   • uuid库是一个用于生成唯一标识符（UUID）的库，广泛用于生成唯一的字符串标识。
   • v4是一种特定的 UUID 版本，生成的是随机的 UUID。

generateUUID方法

const generateUUID = () => {
  return uuidv4(); // 生成全局唯一标识符
};

1. const generateUUID = () => { ... }:
   • 这是一个箭头函数，定义了一个名为generateUUID的方法。
   • 该方法内部调用了uuidv4()函数，生成一个全局唯一的标识符（UUID）。
   • 返回生成的 UUID 字符串。

其他方法

createMessageElement

const createMessageElement = (text, alignment) => {
  const messageElement = document.createElement('div');
  messageElement.className = `message ${alignment}`; // 设置消息的对齐方式
  const textElement = document.createElement('span');
  // 如果消息内容超过20个字符，则截取前20个字符并加上省略号
  textElement.textContent = text.length > 20 ? text.slice(0, 20) + '...' : text;
  messageElement.appendChild(textElement);
  return messageElement;
};

1. const createMessageElement = (text, alignment) => { ... }:

   • 这是一个箭头函数，定义了一个名为createMessageElement的方法。
   • 接受两个参数：text（消息内容）和alignment（消息的对齐方式，如message-left或message-right）。

2. const messageElement = document.createElement('div'):

   • 创建一个新的div元素，用于表示一条消息。

3. messageElement.className = message ${alignment}``:

   • 设置div元素的类名，包括固定的message类和动态的alignment类（如message-left或message-right）。

4. const textElement = document.createElement('span'):

   • 创建一个新的span元素，用于显示消息内容。

5. textElement.textContent = text.length > 20 ? text.slice(0, 20) + '...' : text:

   • 设置span元素的文本内容。
   • 如果消息内容超过20个字符，则截取前20个字符并在末尾加上省略号...；否则直接使用原消息内容。

6. messageElement.appendChild(textElement):

   • 将span元素添加到div元素中。

7. return messageElement:

   • 返回创建的消息元素。

connectWebSocket

const connectWebSocket = (message) => {
  receiving.value = true; // 标记正在接收消息
  const url = "wss://backend.buildpicoapps.com/api/chatbot/chat";
  const websocket = new WebSocket(url);

  websocket.addEventListener("open", () => {
    // 发送消息到服务器
    websocket.send(
      JSON.stringify({
        chatId: chatId.value,
        appId: "nothing-include",
        systemPrompt: systemPrompt.value,
        message: message
      })
    );
  });

  // 创建一个空的消息元素，用于显示从服务器接收到的消息
  const messageElement = createMessageElement("", "message-left");
  chatbox.value.appendChild(messageElement);

  websocket.onmessage = (event) => {
    // 将接收到的消息添加到消息元素中
    messageElement.innerText += event.data;
    // 滚动到底部，确保最新消息可见
    chatbox.value.scrollTop = chatbox.value.scrollHeight;
  };

  websocket.onclose = (event) => {
    if (event.code === 1000) {
      receiving.value = false; // 正常关闭连接
    } else {
      // 处理非正常关闭连接的情况
      messageElement.textContent += "无法从服务器获取回复。请刷新页面并重试。";
      chatbox.value.scrollTop = chatbox.value.scrollHeight;
      receiving.value = false;
    }
  };
};

1. receiving.value = true:

   • 设置receiving标记为true，表示正在接收消息。

2. const url = "wss://backend.buildpicoapps.com/api/chatbot/chat":

   • 定义 WebSocket 连接的 URL。

3. const websocket = new WebSocket(url):

   • 创建一个新的 WebSocket 实例，连接到指定的 URL。

4. websocket.addEventListener("open", () => { ... }):

   • 监听 WebSocket 连接打开事件。
   • 当连接成功打开时，发送消息到服务器。

5. websocket.send(JSON.stringify({ ... })):

   • 将消息对象序列化为 JSON 字符串，并通过 WebSocket 发送到服务器。
   • 消息对象包含chatId、appId、systemPrompt和message等属性。

6. const messageElement = createMessageElement("", "message-left"):

   • 创建一个空的消息元素，用于显示从服务器接收到的消息。
   • 设置对齐方式为message-left，表示这是来自机器人的消息。

7. chatbox.value.appendChild(messageElement):

   • 将创建的消息元素添加到聊天记录显示区。

8. websocket.onmessage = (event) => { ... }:

   • 监听 WebSocket 消息接收事件。
   • 当从服务器接收到消息时，将消息内容添加到消息元素中，并滚动到底部以确保最新消息可见。

9. websocket.onclose = (event) => { ... }:

   • 监听 WebSocket 连接关闭事件。
   • 根据关闭代码判断连接是否正常关闭。
   • 如果是非正常关闭，显示错误信息并滚动到底部。

sendMessage

const sendMessage = () => {
  if (!receiving.value && message.value.trim() !== "") {
    const messageText = message.value.trim(); // 获取用户输入的消息
    message.value = ""; // 清空输入框
    // 创建用户消息元素
    const messageElement = createMessageElement(messageText, "message-right");
    chatbox.value.appendChild(messageElement); // 添加到聊天记录显示区
    // 滚动到底部，确保最新消息可见
    chatbox.value.scrollTop = chatbox.value.scrollHeight;
    // 发送消息到服务器
    connectWebSocket(messageText);
  }
};

1. if (!receiving.value && message.value.trim() !== ""):

   • 检查是否正在接收消息且输入框中的内容不为空。
   • 如果条件满足，继续执行发送消息的操作。

2. const messageText = message.value.trim():

   • 获取用户输入的消息，并去除首尾的空白字符。

3. message.value = "":

   • 清空输入框的内容。

4. const messageElement = createMessageElement(messageText, "message-right"):

   • 创建一个用户消息元素，设置对齐方式为message-right，表示这是来自用户的消息。

5. chatbox.value.appendChild(messageElement):

   • 将创建的消息元素添加到聊天记录显示区。

6. chatbox.value.scrollTop = chatbox.value.scrollHeight:

   • 滚动到底部，确保最新消息可见。

7. connectWebSocket(messageText):

   • 调用connectWebSocket方法，建立 WebSocket 连接并发送消息到服务器。