基于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.rhkb.cn/news/466991.html

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

相关文章

【赵渝强老师】Redis的RDB数据持久化

【赵渝强老师】Redis的RDB数据持久化

Redis 是内存数据库&#xff0c;如果不将内存中的数据库状态保存到磁盘&#xff0c;那么一旦服务器进程退出会造成服务器中的数据库状态也会消失。所以 Redis 提供了数据持久化功能。Redis支持两种方式的持久化&#xff0c;一种是RDB方式&#xff1b;另一种是AOF&#xff08;ap…
阅读更多...
qt QFileSystemModel详解

qt QFileSystemModel详解

1、概述 QFileSystemModel是Qt框架中的一个关键类&#xff0c;它继承自QAbstractItemModel&#xff0c;专门用于在Qt应用程序中展示文件系统的数据。这个模型提供了一个方便的接口&#xff0c;使得开发者可以轻松地在应用程序中集成文件和目录的树形结构&#xff0c;并通过视图…
阅读更多...
ThingsBoard规则链节点：Push to Edge节点详解

ThingsBoard规则链节点：Push to Edge节点详解

引言 1. Push to Edge 节点简介 2. 节点配置 2.1 基本配置示例 3. 使用场景 3.1 边缘计算 3.2 本地数据处理 3.3 实时响应 4. 实际项目中的应用 4.1 项目背景 4.2 项目需求 4.3 实现步骤 5. 总结 引言 ThingsBoard 是一个开源的物联网平台&#xff0c;提供了设备管…
阅读更多...
JavaScript 实现文本转语音功能

JavaScript 实现文本转语音功能

全篇大概2000 字&#xff08;含代码&#xff09;&#xff0c;建议阅读时间10分钟。 引言 我将向大家展示如何使用 JavaScript 和 Web Speech API 快速实现一个“文本转语音”的 Web 应用。通过这个教程&#xff0c;你将了解如何让浏览器将输入的文本朗读出来。 预览效果 一、…
阅读更多...
动态规划理论基础和习题【力扣】【算法学习day.25】

动态规划理论基础和习题【力扣】【算法学习day.25】

前言 ###我做这类文档一个重要的目的还是给正在学习的大家提供方向&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;&#xff09;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非常非常高滴&am…
阅读更多...
Linux的基本指令（一）

Linux的基本指令（一）

1.ls指令 功能&#xff1a;对于目录&#xff0c;该命令列出该目录下的所有子目录与文件。对于文件&#xff0c;将列出文件名以及信息。 常用选项&#xff1a; -a列出目录下的所有文件&#xff0c;包括以 . 开头的隐含文件。 -l列出文件的详细信息 举例&#xff1a; rooti…
阅读更多...
智能化健身房管理：Spring Boot与Vue的创新解决方案

智能化健身房管理：Spring Boot与Vue的创新解决方案

作者介绍&#xff1a;✌️大厂全栈码农|毕设实战开发&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 &#x1f345;获取源码联系方式请查看文末&#x1f345; 推荐订阅精彩专栏 &#x1f447;&#x1f3fb; 避免错过下次更新 Springboot项目精选实战案例 更多项目…
阅读更多...
【Vue】简易博客项目跟做

【Vue】简易博客项目跟做

项目框架搭建 1.使用vue create快速搭建vue项目 2.使用VC Code打开新生成的项目 端口号简单配置 修改vue.config.js文件&#xff0c;内容修改如下 所需库安装 npm install vue-resource --save --no-fund npm install vue-router3 --save --no-fund npm install axios --save …
阅读更多...
Hadoop简介及单点伪分布式安装

Hadoop简介及单点伪分布式安装

目录 1. 大数据2. Hadoop简介3. Hadoop伪分布式安装4. Hadoop启动参考 1. 大数据 大数据的定义&#xff1a;一种规模大到在获取、存储、管理、分析方面大大超出传统数据库软件工具能力范围的数据集合。   特征&#xff1a;   1.海量的数据规模   2.快速的数据流转   3.…
阅读更多...
windows server2019下载docker拉取redis等镜像并运行项目

windows server2019下载docker拉取redis等镜像并运行项目

一、基本概念 1、windows server 指由微软公司开发的“Windows”系列中的“服务器”版本。这意味着它是基于Windows操作系统的&#xff0c;但专门设计用于服务器环境&#xff0c;而不是普通的桌面或个人用户使用。主要用途包括服务器功能、用户和资源管理、虚拟化等 2、dock…
阅读更多...
使用最新版的wvp和ZLMediaKit搭建Gb28181测试服务器

使用最新版的wvp和ZLMediaKit搭建Gb28181测试服务器

文章目录 说明安装1.安装nodejs简介安装步骤 2.安装java环境3.安装mysql安装修改密码 4.安装redis5.安装编译器6.安装cmake7.安装依赖库8.编译ZLMediaKit9.编译wvp-GB28181-pro 配置1.ZLMediaKit配置2.wvp-GB28181-pro配置2.1.配置ZLMediaKit连接信息2.2.28181服务器的配置2.3.…
阅读更多...
Python程序设计 生成器

Python程序设计 生成器

1. 基础概念 在讲迭代之前&#xff0c;先搞清楚这些名词&#xff1a; 循环&#xff08;loop&#xff09;&#xff0c;指的是在满足条件的情况下&#xff0c;重复执行同一段代码。比如&#xff0c;while 语句。迭代&#xff08;iterate&#xff09;&#xff0c;指的是按照某种…
阅读更多...
mac m1 docker本地部署canal 监听mysql的binglog日志

mac m1 docker本地部署canal 监听mysql的binglog日志

mac m1 docker本地部署canal监听mysql的binglog日志(虚拟机同理) 根据黑马视频部署 1.docker 部署mysql 1.docker拉取mysql 镜像 因为m1是arm架构.需要多加一条信息 正常拉取 docker pull mysql:tagm1拉取 5.7的版本. tag需要自己指定版本 docker pull --platform linux/x…
阅读更多...
[linux]docker基础

[linux]docker基础

常见命令 Docker最常见的命令就是操作镜像、容器的命令&#xff0c;详见官方文档: Docker Docs 案例: 查看DockerHub&#xff0c;拉取Nginx镜像&#xff0c;创建并运行Nginx容器 在DockerHub中搜索Nginx镜像 拉取Nginx镜像 查看本地镜像列表 把镜像保持到本地 查看保持命令的…
阅读更多...
C++builder中的人工智能（10）神经网络中的Sigmoid函数

C++builder中的人工智能（10）神经网络中的Sigmoid函数

在这篇文章中&#xff0c;我们将探讨最受欢迎的激活函数之一——Sigmoid函数。我们将解释什么是Logistic函数&#xff0c;以及它与Sigmoid函数的区别&#xff0c;并展示如何在C应用中使用这些函数。 目录 人工神经网络&#xff08;ANN&#xff09;中的激活函数是什么&#xff…
阅读更多...
cursor:如何注销帐号和使用流量

cursor:如何注销帐号和使用流量

点击右上角的设定图标 点击管理 在弹出的网页点登入 点”continue" 点SETING 了解最新信息请扫码关注&#xff1a;
阅读更多...
如何选择适合小团队的项目管理工具？免费与开源软件推荐

如何选择适合小团队的项目管理工具？免费与开源软件推荐

目录 一、小团队项目管理工具的重要性 二、热门项目管理工具介绍 &#xff08;一&#xff09;禅道 &#xff08;二&#xff09;Trello &#xff08;三&#xff09;Asana &#xff08;四&#xff09;JIRA 三、免费项目管理软件推荐 &#xff08;一&#xff09;ES 管理器 …
阅读更多...
Scaffold-ETH 2：颠覆传统开发的区块链神器，快速构建你的去中心化应用！

Scaffold-ETH 2：颠覆传统开发的区块链神器，快速构建你的去中心化应用！

目录 引言一、Scaffold-eth框架二、前期准备三、搭建Scaffold-ETH 2&#xff08;一&#xff09;使用npx create-ethlatest进行设置&#xff08;二&#xff09;使用git clone进行设置1、克隆仓库&#xff1a;2、进入到此目录3、安装依赖项 四、配置Scaffold ETH-2的开发环境&…
阅读更多...
kafka+zookeeper的搭建

kafka+zookeeper的搭建

kafka从2.8版本开始&#xff0c;就可以不用配置zookeeper了&#xff0c;但是也可以继续配置。我目前使用的kafka版本是kafka_2.12-3.0.0.tgz&#xff0c;其中前面的2.12表示是使用该版本的scala语言进行编写的&#xff0c;而后面的3.00才是kafka当前的版本。 通过百度网盘分享…
阅读更多...
恢复rm -rf删除的数据

恢复rm -rf删除的数据

注&#xff1a;本文演示的是ext4文件系统格式数据恢复 系统版本&#xff1a;ubuntu16.04 恢复数据目录&#xff1a;数据盘&#xff08;非根&#xff09;目录 恢复工具&#xff1a;extundelete 0.2.4 恢复所有被删除数据 ext4magic 恢复指定目录数据 一、注意事项&#xff1a; …
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023