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

<template><div class="container"><!-- 页面头部 --><header><h1>跟它说说话吧！</h1><p>一个活泼的伙伴，为你提供情感支持！</p></header><!-- 聊天容器 --><div class="chat-container"><!-- 聊天记录显示区 --><div id="chatbox" ref="chatbox" class="chatbox"></div><!-- 输入框和发送按钮 --><div class="input-container"><input v-model="message" @keydown.enter="sendMessage" placeholder="输入消息..."><button @click="sendMessage">🐶 发送消息！</button></div></div></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import { v4 as uuidv4 } from 'uuid'; // 引入 UUID 生成库// 响应式数据
const message = ref(''); // 用户输入的消息
const chatbox = ref(null); // 聊天记录显示区的引用
const chatId = ref(uuidv4()); // 当前会话的唯一标识符
const receiving = ref(false); // 标记是否正在接收消息
const systemPrompt = ref("你是一只活泼可爱的宠物狗，模拟微信聊天应用中的对话。你的任务是为用户提供情感支持和陪伴。记住用户的对话内容，并在短时间内做出相关回应。消息气泡的大小应根据内容长度自动调整。"); // 系统提示信息// 方法
const generateUUID = () => {return uuidv4(); // 生成全局唯一标识符
};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;
};const connectWebSocket = (message) => {receiving.value = true; // 标记正在接收消息const url = "your-chat-url";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;}};
};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);}
};// 生命周期钩子
onMounted(() => {// 初始化操作chatbox.value.scrollTop = chatbox.value.scrollHeight;
});
</script><style>
body {/* 页面背景渐变色 */background: linear-gradient(to right, rgb(249, 244, 200), rgb(249, 244, 240));
}
.container {/* 容器内边距 */padding: 16px;
}
header {/* 页面头部居中对齐 */text-align: center;margin-bottom: 16px;
}
h1 {/* 标题样式 */font-size: 24px;font-weight: bold;color: #1a53ff;
}
p {/* 描述文字颜色 */color: #6b7280;
}
.chat-container {/* 聊天容器最大宽度 */width: 100%;max-width: 600px;/* 阴影效果和圆角 */box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);border-radius: 8px;overflow: hidden;margin: 0 auto;  /* 居中 */
}
.chatbox {/* 聊天记录显示区布局 */display: flex;flex-direction: column;align-items: flex-start;padding: 16px;height: 384px;overflow-y: auto; /* 自动滚动条 */
}
.message {/* 消息样式 */display: inline-block;margin: 10px 0;padding: 10px;border-radius: 12px;color: white;
}
.message-left {/* 来自机器人的消息样式 */background-color: #1a53ff;align-self: flex-start;
}
.message-right {/* 来自用户的消息样式 */background-color: #10b981;align-self: flex-end;
}
.input-container {/* 输入框和按钮容器布局 */display: flex;flex-direction: row;margin: 16px 0;padding: 8px;border-top: 1px solid #d1d5db;
}
input {/* 输入框样式 */flex-grow: 1;padding: 8px;border: 1px solid #d1d5db;border-radius: 8px;margin-right: 8px;
}
button {/* 发送按钮样式 */background-color: #1a53ff;border-radius: 8px;padding: 8px 16px;color: white;font-weight: bold;
}
</style>

效果图    有帮助点个赞吧~

<input> 元素的绑定

<input v-model="message" @keydown.enter="sendMessage" placeholder="输入消息...">

  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 连接并发送消息到服务器。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/59797.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【安卓13 源码】Input子系统（4）- InputReader 数据处理

【安卓13 源码】Input子系统（4）- InputReader 数据处理

1. 多指触控协议 多指触控协议有 2 种&#xff1a; > A类&#xff1a; 处理无关联的接触&#xff1a; 用于直接发送原始数据&#xff1b; > B类&#xff1a; 处理跟踪识别类的接触&#xff1a; 通过事件slot发送相关联的独立接触更新。 B协议可以使用一个ID来标识触点&…
阅读更多...
Uniapp的学习

Uniapp的学习

uniapp的内容和vue网页开发会有很多区别&#xff0c;但是都是基于vue开发的&#xff0c;大多数业务还是在vue打交道&#xff0c;但是这些uniapp的特殊的知识点也是要掌握好的。 基本配置 创建uniapp项目 npx degit dcloudio/uni-preset-vue#vite-ts 项目名 &#xff1a;用于…
阅读更多...
Windows Server 怎么关闭IE增强安全配置（关闭IE弹窗）

Windows Server 怎么关闭IE增强安全配置（关闭IE弹窗）

首先第一步打开IE浏览器&#xff0c;根据下图所示&#xff0c;访问网页时会弹出警告窗口。 打开【控制面板】图标。查看方式改为小图标&#xff0c;打开【管理工具】 第五步进入【管理工具】页面后&#xff0c;找到并双击【服务器管理器】选项。 第六步在弹出的窗口中&#…
阅读更多...
鸿萌数据迁移服务: 企业服务器整机在线热迁移, 实现不停机业务转移

鸿萌数据迁移服务: 企业服务器整机在线热迁移, 实现不停机业务转移

天津鸿萌科贸发展有限公司从事数据安全服务二十余年&#xff0c;致力于为各领域客户提供专业的数据存储、数据恢复、数据备份、数据迁移等解决方案与服务&#xff0c;并针对企业面临的数据安全风险&#xff0c;提供专业的相关数据安全培训。 鸿萌数据迁移业务为众多企业顺利高效…
阅读更多...
vue2组件封装和UI组件的二次封装，方法，属性，ref的传递

vue2组件封装和UI组件的二次封装，方法，属性，ref的传递

封装组件使用v-model 使用方法props接受value值&#xff0c;当值发生变化的时候再通过this.$emit("input", newValue)&#xff0c;则实现了简单组件的v-model封装,如果不使用第三方UI可以接受到的值使用watch或者计算属性保存&#xff0c;然后再通过事件派发自己保存…
阅读更多...
无网络安装ionic和运行

无网络安装ionic和运行

npm 安装本地文件 之前使用npm安装包都是在有网络环境下&#xff0c;因为需要部署无互联网环境开发&#xff0c;才知道如何使用npm安装包安装本地文件/文件夹 >npm install <folder>如果 <folder> 位于项目的根目录中&#xff0c;它的依赖项将被安装&#xff…
阅读更多...
ChatGPT 新体验：AI 搜索功能与订阅支付指南

ChatGPT 新体验：AI 搜索功能与订阅支付指南

就在凌晨&#xff0c;在 ChatGPT 迎来两周岁生日之际&#xff0c;OpenAI 重磅发布了 ChatGPT 的全新人工智能搜索体验。 期待已久的时刻终于到来&#xff0c; ChatGPT 正式转型成为一款革命性的 AI 搜索引擎&#xff01; 先来看看 ChatGPT 搜索&#xff1a;这次不是简单的加个…
阅读更多...
测试开发面试题记录

测试开发面试题记录

1. TCP与UDP的区别及应用场景 TCP (传输控制协议)&#xff1a; 特点&#xff1a;面向连接&#xff0c;可靠性高&#xff0c;数据顺序保证&#xff0c;流量控制和拥塞控制。应用场景&#xff1a;文件传输&#xff08;FTP&#xff09;&#xff0c;电子邮件&#xff08;SMTP&#…
阅读更多...
[JAVAEE] 面试题(四) - 多线程下使用ArrayList涉及到的线程安全问题及解决

[JAVAEE] 面试题(四) - 多线程下使用ArrayList涉及到的线程安全问题及解决

目录 一. 多线程下使用ArrayList 1.1. 自行判断加锁 1.2 使用Collections.synchronizedList()套壳加锁 1.3 CopyOnWriteArrayList类 二. 总结 一. 多线程下使用ArrayList 多线程下使用ArrayList会涉及到线程安全问题, 例如: public static void main(String[] args) thro…
阅读更多...
canal1.1.7使用canal-adapter进行mysql同步数据

canal1.1.7使用canal-adapter进行mysql同步数据

重要的事情说前面&#xff0c;canal1.1.8需要jdk11以上&#xff0c;大家自行选择&#xff0c;我这由于项目原因只能使用1.1.7兼容版的 文章参考地址&#xff1a; canal 使用详解_canal使用-CSDN博客 使用canal.deployer-1.1.7和canal.adapter-1.1.7实现mysql数据同步_mysql更…
阅读更多...
DevExpress中文教程 - 如何使用AI模型检查HTML编辑中的语法？

DevExpress中文教程 - 如何使用AI模型检查HTML编辑中的语法？

DevExpress .NET MAUI多平台应用UI组件库提供了用于Android和iOS移动开发的高性能UI组件&#xff0c;该组件库包括数据网格、图表、调度程序、数据编辑器、CollectionView和选项卡组件等。 目前许多开发人员正在寻找多种方法将AI添加到解决方案中&#xff08;这通常比想象的要…
阅读更多...
【推荐】iptables学习宝典

【推荐】iptables学习宝典

链接&#xff1a; IPtables-朱双印博客 学习iptables的抗鼎之作&#xff0c;推荐。
阅读更多...
sudo docker ps才能查看，docker ps不能查看问题

sudo docker ps才能查看，docker ps不能查看问题

出现 permission denied while trying to connect to the Docker daemon socket 的错误&#xff0c;通常是因为当前用户没有权限访问 Docker 的 Unix 套接字 /var/run/docker.sock。在 Linux 系统中&#xff0c;这个套接字默认只能由 root 用户或 docker 组的成员访问。 要解决…
阅读更多...
二维数组和数组指针数组的关系

二维数组和数组指针数组的关系

在深入理解指针end中&#xff0c;我在最后写了一长段代码 #include<stdio.h> void test1(int arr[][5], int x, int y) //void test1(int(*p)[5], int x, int y) {for (int i 0; i < x; i){for (int j 0; j < y; j){//printf("%d ", *(*(p i) j));p…
阅读更多...
vue+websocket实现即时聊天平台

vue+websocket实现即时聊天平台

目录 1 什么是websocket 2 实现步骤 2.1 导入依赖 2.2 编写代码 1 什么是websocket WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它主要用于在客户端和服务器之间建立持久的连接&#xff0c;允许实时数据交换。WebSocket 的设计目的是为了提高 Web 应用程序的…
阅读更多...
# RabbitMQ学习

# RabbitMQ学习

RabbitMQ 1、RabbitMQ是什么&#xff1f; RabbitMQ 是一个开源的消息中间件系统&#xff0c;主要用于在分布式系统中存储、转发和接收消息。它实现了 AMQP&#xff08;高级消息队列协议&#xff09;标准&#xff0c;能够帮助构建可靠且高效的分布式应用程序 2、RabbitMQ能做…
阅读更多...
Docker Compose V2 安装

Docker Compose V2 安装

要安装 docker-compose-plugin&#xff0c;需要确保系统已安装 Docker 引擎&#xff0c;因为 docker-compose-plugin 是 Docker CLI 的插件&#xff08;Docker Compose V2&#xff09;。以下是详细指南&#xff1a; 1. 安装 Docker 引擎&#xff1a; 确保系统上安装了 Docker…
阅读更多...
【D3.js in Action 3 精译_038】4.2 D3 折线图的绘制方法及曲线插值处理

【D3.js in Action 3 精译_038】4.2 D3 折线图的绘制方法及曲线插值处理

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一部分 D3.js 基础知识 第一章 D3.js 简介&#xff08;已完结&#xff09; 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践&#xff08;上&#xff09;1.3 数据可…
阅读更多...
Git 的分支管理

Git 的分支管理

一、分支介绍 1、分支是什么 Git作为一个分布式版本控制系统&#xff0c;提供了强大而灵活的分支管理功能&#xff0c;使得开发团队能够高效地协作开发、管理不同的功能和版本。 2、为什么有分支 一般情况下主分支&#xff08;master/main&#xff09;应始终保持可部署的状…
阅读更多...
Linux环境基础和基础开发工具使用

Linux环境基础和基础开发工具使用

文章目录 一、yum软件管理器1、包管理器2、yum3、apt4、安装源 二、编辑器vim1、各种模式2、打开时直接让光标定位到指定号3、&#xff01;加命令字符 三、命令模式1、i 进入插入模式2、**Shift :** 进入底行模式3、光标定位4、ZZ&#xff08;大写&#xff09;保存并退出vim5、…
阅读更多...
最新文章

Copyright @ 2022~2023