一、前言

本文源自微博客且已获授权,请尊重版权.

     书接上文，上文中，我们介绍了<code>通义千问AI落地的后端接口。那么，接下来我们将继续介绍前端如何调用接口以及最后的效果；首先看效果：

     上述就是落地到本微博客以后的页面效果，由于是基于落在现有项目之上，因此什么登录注册等基本功能都省去了，言归正传，下面我们将正式介绍通义千问AI落地的前端实现。

二、前端实现

2.1、前端依赖

     前端所需依赖基本如下（<code>本项目前端是基于Nuxtjs的，这样又益与SSE,所以有nuxt相关依赖）：

"dependencies": { -- -->

"@nuxtjs/axios": "^5.13.6",

"dayjs": "^1.11.12",

"element-ui": "^2.15.1",

"highlight.js": "^11.9.0", //代码高亮组件

"mavon-editor": "^2.10.4", //富文本展示

"nuxt": "^2.0.0",

"@stomp/stompjs": "^6.0.0", //

"ws": "^7.0.0" //websocket

}

2.2、页面布局

      如上动图所示,前端项目主要是左右分布。其中，左侧负责管理各个session会话，包括激活会话、展示会话、删除会话等；

      右侧则主要负责消息处理，包括消息收发、处理GPT生成的消息等。由于使用组件化开发，因此各个组件比较多，接下来的内容将采用 总-分 结构介绍。

2.2.1、主聊天页面

     主聊天页面聚合了左侧的session管理和右侧的消息管理，内容如下：

<template>

<!-- 最外层页面于窗口同宽，使聊天面板居中 -->

<div class="home-view">code>

<!-- 整个聊天面板 -->

<div class="chat-panel">code>

<!-- 左侧的会话列表 -->

<div class="session-panel hidden-sm-and-down">code>

<div class="title">ChatGPT助手</div>code>

<div class="description">构建你的AI助手</div>code>

<div class="session-list">code>

<SessionItem

v-for="(session, index) in sessionList"code>

:key="session.id+index"code>

:active="session.id === activeSession.id"code>

:session="sessionList[index]"code>

class="session"code>

@click.native="sessionSwitch(session,index)"code>

@delete="deleteSession"code>

>

</SessionItem>

</div>

<div class="button-wrapper">code>

<div class="new-session">code>

<el-button @click="createSession">code>

<el-icon :size="15" class="el-icon-circle-plus-outline"></el-icon>code>

新的聊天

</el-button>

</div>

</div>

</div>

<!-- 右侧的消息记录 -->

<div class="message-panel">code>

<!-- 会话名称 -->

<div class="header">code>

<div class="front">code>

<div v-if="!isEdit" class="title">code>

<el-input style="font-size: 20px"code>

v-model="activeSession.topic"code>

@keyup.enter.native="editTopic()"code>

></el-input>

</div>

<div v-else class="title" style="margin-top: 6px;" @dblclick="editTopic()">code>

{ -- -->{ activeSession.topic }}

</div>

<div class="description">与ChatGPT的 { -- -->{ activeSession?.messageSize ?? 0 }} 条对话</div>code>

</div>

<!-- 尾部的编辑按钮 -->

<div class="rear">code>

<i v-if="isEdit" @click="editTopic" class="el-icon-edit rear-icon"></i>code>

<i v-else @click="editTopic" class="el-icon-check rear-icon"></i>code>

</div>

</div>

<el-divider></el-divider>

<div class="message-list" id="messageListId">code>

<!-- 过渡效果 -->

<transition-group name="list">code>

<message-row

v-for="(message, index) in activeSession.messages"code>

:key="message.id+`${index}`"code>

:message="message"code>

></message-row>

</transition-group>

</div>

<div class="toBottom" v-if="!this.isScrolledToBottom">code>

<el-tooltip class="item" effect="light" content="直达最新" placement="top-center">code>

<el-button class="el-icon-bottom bottom-icon" @click="toBottom"></el-button>code>

</el-tooltip>

</div>

<!-- 监听发送事件 -->

<MessageInput @send="sendMessage" :isSend="isSend"></MessageInput>code>

</div>

</div>

</div>

</template>

<script>

import MessageInput from '@/components/gpt/MessageInput'

import MessageRow from '@/components/gpt/MessageRow'

import SessionItem from "@/components/gpt/SessionItem";

import { -- -->Client} from "@stomp/stompjs";

import dayjs from "dayjs";

import { scrollToBottom} from '@/utils/CommonUtil'

export default {

name: 'gpt',

layout: 'gpt',

middleware: 'auth', //权限中间件，要求用户登录以后才能使用

components: {

MessageInput, MessageRow, SessionItem

},

created() {

this.loadChart();

},

mounted() {

this.handShake()

this.$nextTick(() => {

this.messageListEl = document.getElementById('messageListId');

if (this.messageListEl) {

this.messageListEl.addEventListener('scroll', this.onScroll);

}

});

},

beforeUnmount() {

this.closeClient();

},

beforeDestroy() {

if (this.messageListEl) {

this.messageListEl.removeEventListener('scroll', this.onScroll);

}

},

watch: {

activeSession(newVal) {

if (newVal) {

//确保dom加载完毕

this.$nextTick(() => {

this.toBottom();

});

}

},

},

data() {

return {

sessionList: [],

activeSession: {

topic: '',

messageSize:0

},

isEdit: true,

isSend: false,

client: null,

gptRes: {

content:''

},

userInfo: null,

activeTopic:null,

//消息计数

msgCount:false,

isScrolledToBottom: true,

messageListEl: null,

msgQueue:[], //收到的消息队列；先将后端返回的消息收集起来放在一个队列里面，一点点追加到页面显示，这样可以使消息显示更加平滑

interval:null,

lineCount:5

}

},

methods: {

async loadChart() {

//查询历史对话

const queryArr = {

query: {

userId: this.userInfo.uid

},

pageNum: 1,

pageSize: 7

};

let res = await this.$querySession(queryArr);

if (res.code === 20000) {

if (res.data.length > 0) {

this.activeSession = res.data[0]

res.data.forEach(item => this.sessionList.push(item))

this.activeTopic = this.activeSession.topic

return

}

}

let session = {

topic: "新建的聊天",

userId: this.userInfo.uid,

}

let resp = await this.$createSession(session)

if (resp.code === 20000) {

session.id = resp.data.id

}

session.updateDate = this.now()

session.createDate = this.now()

session.messages = []

this.sessionList.push(session)

this.activeSession = this.sessionList[0]

this.activeTopic = this.activeSession.topic

},

editTopic() {

this.isEdit = !this.isEdit

if (this.isEdit) {

if (this.activeTopic===this.activeSession.topic)

return

this.$updateSession(this.activeSession).then(() => {

this.activeSession.updateDate = this.now()

this.activeTopic = this.activeSession.topic

})

}

},

deleteSession(session) {

let index = this.sessionList.findIndex((value) => {

return value.id === session.id

})

this.sessionList.splice(index, 1)

if (this.sessionList.length > 0) {

this.activeSession = this.sessionList[0]

return

}

this.createSession()

},

sessionSwitch(session,index) {

if (!session) return

if (session.messages && session.messages.length > 0) {

this.activeSession = null

this.activeSession = session

this.toBottom()

return;

}

this.$getSessionById(session.id).then(resp => {

if (resp.code === 20000) {

this.activeSession = null

this.activeSession = resp.data

this.toBottom()

this.sessionList[index] = resp.data

this.sessionList[index].messageSize = session.messageSize

}

})

},

createSession() {

let time = this.now()

let chat = {

id: time.replaceAll(" ", ""),

createDate: time,

updateDate: time,

messageSize:0,

topic: "新建的聊天",

messages: []

}

this.activeSession = chat

//从聊天列表头部插入新建的元素

this.sessionList.unshift(chat)

this.createChatMessage(chat)

},

async createChatMessage(chat) {

let resp = await this.$createSession(chat)

if (resp.code === 20000) {

this.activeSession.id = resp.data.id

}

},

//socket握手

handShake() {

this.client = new Client({

//连接地址要加上项目跟地址

brokerURL: `${ process.env.socketURI}`,

onConnect: () => {

this.isSend = true

// 连接成功后订阅ChatGPT回复地址

this.client.subscribe('/user/queue/gpt', (message) => {

let msg = message.body

this.handleGPTMsg(msg)

})

}

})

// 发起连接

this.client.activate()

},

/**

* 处理GPT返回的消息

* @param msg

*/

handleGPTMsg(msg){

if (msg && msg !== '!$$---END---$$!'){

this.msgQueue.push(msg)

//设置定时器,每40毫秒取出一个队列元素,追加到页面显示,不要一下子把后端返回的内容全部追加到页面;使消息平滑显示

if (!this.interval){

this.interval = setInterval(()=>{

this.appendQueueToContent()

},40)

}

if (this.msgCount){

this.activeSession.messageSize+=1

this.msgCount = false

}

return;

}

if (msg === '!$$---END---$$!') {

clearTimeout(this.interval)

this.interval = null

//清理掉定时器以后,需要处理队列里面剩余的消息内容

this.handleLastMsgQueue()

}

},

/**

* 处理队列里面剩余的消息

*/

handleLastMsgQueue(){

while (this.msgQueue.length>0){

this.appendQueueToContent()

}

this.isSend = true

},

/**

* 将消息队列里面的消息取出一个字符追加到显示content

*/

appendQueueToContent() {

if (this.msgQueue.length <= 0) {

return

}

// 如果当前字符串还有字符未处理

const currentItem = this.msgQueue[0];

if (currentItem) {

// 取出当前字符串的第一个字符

const char = currentItem[0];

//不能频繁调用 到底部 函数

if (this.lineCount % 5 === 0) {

this.toBottom()

}

this.lineCount++

this.gptRes.content += char;

// 移除已处理的字符

this.msgQueue[0] = currentItem.slice(1);

// 如果当前字符串为空，则从队列中移除

if (this.msgQueue[0].length === 0) {

this.msgQueue.shift();

}

}

},

sendMessage(msg) {

this.buildMsg('user', msg)

let chatMessage = {

content: msg,

role: 'user',

sessionId: this.activeSession.id

}

try {

this.client.publish({

destination: '/ws/chat/send',

body: JSON.stringify(chatMessage)

})

} catch (e) {

console.log("socket connection error:{}", e)

this.handShake()

return

}

this.isSend = false

this.gptRes = {

role: 'assistant', content: '', createDate: this.now()

}

this.activeSession.messages.push(this.gptRes)

this.toBottom()

this.msgCount = true

this.activeSession.messageSize+=1

},

toBottom(){

scrollToBottom('messageListId')

},

buildMsg(_role, msg) {

let message = { role: _role, content: msg, createDate: this.now()}

this.activeSession.messages.push(message)

},

closeClient() {

try {

this.client.deactivate()

this.client = null

} catch (e) {

console.log(e)

}

},

now() {

return dayjs().format('YYYY-MM-DD HH:mm:ss');

},

onScroll(event) {

this.isScrolledToBottom = event.target.scrollHeight - event.target.scrollTop <= (event.target.clientHeight + 305);

},

},

async asyncData({ store, redirect}) {

const userId = store.state.userInfo && store.state.userInfo.uid

if (typeof userId == 'undefined' || userId == null || Object.is(userId, 'null')) {

return redirect("/");

}

return {

userInfo: store.state.userInfo

}

},

}

</script>

<style lang="scss" scoped>code>

.home-view { -- -->

display: flex;

justify-content:center;

margin-top: -80px;

.chat-panel {

display: flex;

border-radius: 20px;

background-color: white;

box-shadow: 0 0 20px 20px rgba(black, 0.05);

margin-top: 70px;

margin-right: 75px;

.session-panel {

width: 300px;

border-top-left-radius: 20px;

border-bottom-left-radius: 20px;

padding: 5px 10px 20px 10px;

position: relative;

border-right: 1px solid rgba(black, 0.07);

background-color: rgb(231, 248, 255);

/* 标题 */

.title {

margin-top: 20px;

font-size: 20px;

}

/* 描述*/

.description {

color: rgba(black, 0.7);

font-size: 14px;

margin-top: 10px;

}

.session-list {

.session {

/* 每个会话之间留一些间距 */

margin-top: 20px;

}

}

.button-wrapper {

/* session-panel是相对布局，这边的button-wrapper是相对它绝对布局 */

position: absolute;

bottom: 20px;

left: 0;

display: flex;

/* 让内部的按钮显示在右侧 */

justify-content: flex-end;

/* 宽度和session-panel一样宽*/

width: 100%;

/* 按钮于右侧边界留一些距离 */

.new-session {

margin-right: 20px;

}

}

}

/* 右侧消息记录面板*/

.message-panel {

width: 750px;

position: relative;

.header {

text-align: left;

padding: 5px 20px 0 20px;

display: flex;

/* 会话名称和编辑按钮在水平方向上分布左右两边 */

justify-content: space-between;

/* 前部的标题和消息条数 */

.front {

.title {

color: rgba(black, 0.7);

font-size: 20px;

::v-deep {

.el-input__inner {

padding: 0 !important;

}

}

}

.description {

margin-top: 10px;

color: rgba(black, 0.5);

}

}

/* 尾部的编辑和取消编辑按钮 */

.rear {

display: flex;

align-items: center;

.rear-icon {

font-size: 20px;

font-weight: bold;

}

}

}

.message-list {

height: 560px;

padding: 15px;

// 消息条数太多时，溢出部分滚动

overflow-y: scroll;

// 当切换聊天会话时，消息记录也随之切换的过渡效果

.list-enter-active,

.list-leave-active {

transition: all 0.5s ease;

}

.list-enter-from,

.list-leave-to {

opacity: 0;

transform: translateX(30px);

}

}

::v-deep{

.el-divider--horizontal {

margin: 14px 0;

}

}

}

}

}

::v-deep {

.mcb-main {

padding-top: 10px;

}

.mcb-footer{

display: none;

}

}

.message-input {

padding: 20px;

border-top: 1px solid rgba(black, 0.07);

border-left: 1px solid rgba(black, 0.07);

border-right: 1px solid rgba(black, 0.07);

border-top-right-radius: 5px;

border-top-left-radius: 5px;

}

.button-wrapper {

display: flex;

justify-content: flex-end;

margin-top: 20px;

}

.toBottom{

display: inline;

background-color: transparent;

position: absolute;

z-index: 999;

text-align: center;

width: 100%;

bottom: 175px;

}

.bottom-icon{

align-items: center;

background: #fff;

border: 1px solid rgba(0,0,0,.08);

border-radius: 50%;

bottom: 0;

box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);

box-sizing: border-box;

cursor: pointer;

display: flex;

font-size: 20px;

height: 40px;

justify-content: center;

position: absolute;

right: 50%;

width: 40px;

z-index: 999;

}

.bottom-icon:hover {

color: #5dbdf5;

cursor: pointer;

border: 1px solid #5dbdf5;

}

</style>

     我们来着重介绍一下以下三个函数：

/**

* 处理GPT返回的消息

* @param msg

*/

handleGPTMsg(msg){

if (msg && msg !== '!$$---END---$$!'){

this.msgQueue.push(msg)

//设置定时器,每40毫秒取出一个队列元素,追加到页面显示,不要一下子把后端返回的内容全部追加到页面;使消息平滑显示

if (!this.interval){

this.interval = setInterval(()=>{

this.appendQueueToContent()

},40)

}

if (this.msgCount){

this.activeSession.messageSize+=1

this.msgCount = false

}

return;

}

if (msg === '!$$---END---$$!') {

clearTimeout(this.interval)

this.interval = null

//清理掉定时器以后,需要处理队列里面剩余的消息内容

this.handleLastMsgQueue()

}

},

/**

* 处理队列里面剩余的消息

*/

handleLastMsgQueue(){

while (this.msgQueue.length>0){

this.appendQueueToContent()

}

this.isSend = true

},

/**

* 将消息队列里面的消息取出一个字符追加到显示content

*/

appendQueueToContent() {

if (this.msgQueue.length <= 0) {

return

}

// 如果当前字符串还有字符未处理

const currentItem = this.msgQueue[0];

if (currentItem) {

// 取出当前字符串的第一个字符

const char = currentItem[0];

//不能频繁调用 到底部 函数

if (this.lineCount % 5 === 0) {

this.toBottom()

}

this.lineCount++

this.gptRes.content += char;

// 移除已处理的字符

this.msgQueue[0] = currentItem.slice(1);

// 如果当前字符串为空，则从队列中移除

if (this.msgQueue[0].length === 0) {

this.msgQueue.shift();

}

}

}

handleGPTMsg 这个函数就是处理后端websocket传递过来的消息，其中，最主要的就是这里。在这里，我们设置了一个定时器，每40ms调用一次 appendQueueToContent函数，这个函数从消息队列的队头取出一个字符，把这个字符追加到页面组件上面显示，这样处理使得消息的显示更加平滑，而不是后端生成多少就一次性展示多少。

if (!this.interval){

this.interval = setInterval(()=>{

this.appendQueueToContent()

},40)

}

appendQueueToContent 这个函数就是负责从queue里面获取内容,然后追加到gptRes这个变量里面;并且将已经追加的内容从队列里面移除掉。handleLastMsgQueue 由于前后端处理消息的速度是不一样的，当后端发送生成结束标记（即 !$$---END---$$! ）后，前端就需要以此为根据，删除定时器，否则我们没办法知道queue消息队列什么时候为空、什么时候该清楚定时器。那么，此时清除定时器，我们就需要用一个while函数来处理queue里面剩下的内容，handleLastMsgQueue 函数就是干这个的。

2.2.2、session管理组件