免费做微网站,南宁在线制作网站,照片管理网站模板,wordpress自动封ip在做这个功能之前#xff0c;本人也是走了很多弯路#xff08;花了好几天才搞好#xff09;#xff0c;你能看到本篇博文#xff0c;那你就是找对地方了。百度上很多都是使用SseEmitter这种方式#xff0c;这种方式使用的是websocket#xff0c;使用这种方式就搞复杂了本人也是走了很多弯路花了好几天才搞好你能看到本篇博文那你就是找对地方了。百度上很多都是使用SseEmitter这种方式这种方式使用的是websocket使用这种方式就搞复杂了会为后面项目分布式布署上埋下坑什么坑下面会说明。要实现【VUE3和SpringBoot实现ChatGPT页面打字效果SSE流式数据展示】这种效果其实就是要使用SSE这种协议这种协议很简单。我们先明白websocket和sse有什么区别说几个主要的区别太细的自己百度这不是本博文的重点
1、SSE是一种基于HTTP的单向通信机制用于服务器向客户端推送数据是单向通信
2、WebSocket是一种全双工的通信协议它通过在客户端和服务器之间建立持久连接实现双向通信
3、使用SSE在SpringBoot端就像平时写接口一样不需要啥配置不需要保存用户的连接SessionWebSocket在SpringBoot端配置太多而且需要保存用户的连接session保存连接seesion在分布式布署上就比较麻烦。
博文最后会有整个项目源代码下载地址下载之后里面有两个文件夹myserver是后端springboot的myweb是vue3前端页面的如下截图 一、先看效果 二、环境搭建
1、在使用之前我们还是安装一个大模型我们这里使用的是LmStudio工具这里面可以下载阿里开源的通义千问的语言模型而且是在windows操作简单
2、下载地址https://releases.lmstudio.ai/windows/0.2.17/latest/LM-Studio-0.2.17-Setup.exe
3、安装之后就是下载大模型(下载需要魔法上网)选择Qwen 1.5 4、启动大模型按箭头顺序大模型启动后端口是1234 三、后端服务SpringBoot实现
用idea打开myserver项目直接运行ServerApplication这个类关键代码如下
//构建请求对象ChatRequest chatRequest new ChatRequest();chatRequest.setModel(qwen:latest);//设置模型chatRequest.setStream(true);//设置流式返回ReqMessage reqMessage new ReqMessage();//设置请求消息在此可以加入自己的promptreqMessage.setRole(user);//用户消息reqMessage.setContent(message);//用户请求内容ArrayListReqMessage messageList new ArrayList();messageList.add(reqMessage);chatRequest.setMessages(messageList);//设置请求消息//构建请求jsonString paramJson JSONUtil.toJsonStr(chatRequest);;FluxString response webClient.post().uri(/chat/completions)//请求uri.header(Authorization, Bearer sk-**************)//设置成自己的key获得key的方式可以在下文查看.header(HttpHeaders.ACCEPT, MediaType.TEXT_EVENT_STREAM_VALUE)//设置流式响应.contentType(MediaType.APPLICATION_JSON).body(BodyInserters.fromValue(paramJson)).retrieve().bodyToFlux(String.class).flatMap(res-{if (StrUtil.equals([DONE],res)){//[DONE]是消息结束标识return Flux.empty();}ObjectMapper objectMapper new ObjectMapper();try {//System.out.println(res);JsonNode jsonNode objectMapper.readTree(res);Answer aiAnswer objectMapper.treeToValue(jsonNode, Answer.class);ListChoices choicesList aiAnswer.getChoices();Choices choices choicesList.get(0);Delta delta choices.getDelta();String json objectMapper.writeValueAsString(delta);System.out.println(json);return Flux.just(json);} catch (JsonProcessingException e) {e.printStackTrace();}return Flux.empty();});
三、Vue3前端关键代码
1、打开myweb项目先cmd命令进入到当前目录执行如下命令
npm install
2、运行项目执行如下命令
npm run dev
3、前端页面关键代码
const abortController new AbortController();eventSource.value fetchEventSource(http://localhost:8080/ck/chat?messagesendMsg.value,{method: GET,signal: abortController.signal,openWhenHidden: true,onmessage(event) {let res event.data;console.log(res)if(res![DONE]res!null){let data JSON.parse(event.data);let content data.contentconsole.log(contentcontent)if(content!nullcontent.indexOf(\n)!-1){let text tableRightData.value[tableRightData.value.length - 1].content contentcontent DOMPurify.sanitize(marked.parse(text))tableRightData.value[tableRightData.value.length - 1].content contenttableRightData.value.push({role: assistant, content: , showPhoto: false, error: null});}else if(content!nullcontent!){tableRightData.value[tableRightData.value.length - 1].content content}}nextTick((){//滚动条置最下面const container rightContainerRef.valuecontainer.scrollTop container.scrollHeight})},onclose() {console.log(结束了***************************)deleteBlankRow()// eventSource.close();eventSource.value null; // 重置eventSource变量允许重建连接console.log(结束了2*****************)abortController.abort();},onerror(event){console.log(EventSource failed:, event);abortController.abort();eventSource.value.close(); // 关闭出错的连接eventSource.value null; // 重置eventSource变量允许重建连接}}); 四、源代码下载
下载地址百度网盘 请输入提取码
