【2023】java使用WebClient实现chatGPT调用建立web socket连接

2024-01-20 20:04
文章标签 java chatgpt 实现 ai 使用 2023 连接 web 调用 建立 socket webclient

本文主要是介绍【2023】java使用WebClient实现chatGPT调用建立web socket连接，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

💻目录

  • 一、介绍
    • 1、使用技术
    • 2、效果
  • 二、代码
    • 1、前端代码
    • 2、后端代码
      • 2.1、maven依赖
      • 2.2、model
        • 2.2.1、请求接口的格式
        • 2.2.2、响应数据对象
      • 2.3、工具类
        • 2.3.1、🔴使用WebClient调用`chatgpt`方法
        • 2.3.2、🟠 webSocket连接对话方法
      • 2.4、Controller

一、介绍

通过java实现对chatGPT的API接口实现websocket流式输出以及接口调用两种方式代码

1、使用技术

使用到的技术包括WebClient、webSocket加thymeleaf

  • WebClient：客户端的使用可以开 🍅java http客户端
  • webSocket：可以看🥒webSokcet 使用
  • thymeleaf：可以网上直接找教程，我使用的比较简单会掉用就行，或者使用html静态页面也可以

2、效果

  • websocket的具体实现效果如下，非专业前端，页面比较简陋，可以自行优化页面
    在这里插入图片描述
  • 接口调用
    在这里插入图片描述

二、代码

1、前端代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Java后端WebSocket的Tomcat实现</title><script type="text/javascript" src="js/jquery.min.js"></script>
</head><body><strong>ChatGPT使用</strong><br /><input id="text" type="text" onkeydown="checkEnter(event)"/>
<button onclick="send()">发送消息</button>
<hr />
<button onclick="closeWebSocket()">关闭WebSocket连接</button>
<hr />
<div id="message"></div>
</body>
<script type="text/javascript">var websocket = null;//判断当前浏览器是否支持WebSocketif ('WebSocket' in window) {//改成你的地址websocket = new WebSocket("ws://localhost:8088/websocket/100");} else {alert('当前浏览器 Not support websocket')}//连接发生错误的回调方法websocket.onerror = function () {setMessageInnerHTML("WebSocket连接发生错误");};//连接成功建立的回调方法websocket.onopen = function () {setMessageInnerHTML("WebSocket连接成功");}var U01data, Uidata, Usdata//接收到消息的回调方法websocket.onmessage = function (event) {console.log(event);if (event.data !== "conn_success") {setMessageInnerHTML(event.data);// setMessageInnerHTML(event);setechart()}}//连接关闭的回调方法websocket.onclose = function () {setMessageInnerHTML("WebSocket连接关闭");}// //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。window.onbeforeunload = function () {closeWebSocket();}//将消息显示在网页上function setMessageInnerHTML(innerHTML) {document.getElementById('message').innerHTML += innerHTML ;}//关闭WebSocket连接function closeWebSocket() {websocket.close();}//发送消息function send() {var message = document.getElementById('text').value;websocket.send('{"msg":"' + message + '"}');setMessageInnerHTML("<br>--------------发送消息：" + message + "<br>");document.getElementById('text').value = null;}function checkEnter(event) {if (event.keyCode === 13) {send();}}
</script>
</html>

2、后端代码

2.1、maven依赖

       <!--thymeleaf模版的--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId><!--websocket的--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency><!--webClient--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-webflux</artifactId></dependency>       <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.22</version></dependency>

2.2、model

2.2.1、请求接口的格式

如果想简单的话也可以不用封装对象，直接使用json
在这里插入图片描述
在这里插入图片描述

  • ChatGptRequestParameter
@Data
@NoArgsConstructor
@AllArgsConstructor
public class ChatGptRequestParameter {private String model = "gpt-3.5-turbo-16k-0613";
//     是否支持流式输出private boolean stream = true;//    请求对象数组List<ChatGptMessage> messages=new ArrayList();public void addMessages(ChatGptMessage message) {this.messages.add(message);}
}
  • ChatGptMessage
@Data
@NoArgsConstructor
@AllArgsConstructor
public class ChatGptMessage implements Serializable {String role;String content;
}
2.2.2、响应数据对象

在这里插入图片描述
在这里插入图片描述

  • ChatGptResponseParameter
@Data
@NoArgsConstructor
@AllArgsConstructor
public class ChatGptResponseParameter implements Serializable {String id;String object;String created;String model;Usage usage;List<Choices> choices;String system_fingerprint;
}
  • Choices
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Choices implements Serializable {ChatGptMessage delta;String finish_reason;Integer index;String logprobs;
}
  • ChatGptMessage
@Data
@NoArgsConstructor
@AllArgsConstructor
public class ChatGptMessage implements Serializable {String role;String content;
}

2.3、工具类

2.3.1、🔴使用WebClient调用chatgpt方法
@Component
@Slf4j
public class WebChatGPT {/*** 自己chatGpt的ApiKey*/private String apiKey = "sk-***";private ChatGptRequestParameter chatGptRequestParameter = new ChatGptRequestParameter();/*** 推送* @param session webSocket会话对象* @param str 请求数据* @return Flux<String>*/public Flux<String> getAnswer(Session session, String str) {ChatGptMessage chatGptMessage = new ChatGptMessage("user", str);//        保存消息，用于记录前面的消息，方便上下文记忆，因为3.5不能自动实现上下文记忆chatGptRequestParameter.addMessages(chatGptMessage);return webClient().post().accept(MediaType.TEXT_EVENT_STREAM) //接收text/event-stream流的数据.body(BodyInserters.fromValue(chatGptRequestParameter)) //参数.retrieve() //执行请求并获取响应结果.bodyToFlux(String.class) // 将响应体转换为 Flux 类型，这里是将 SSE 流转换为字符串类型。.map(s -> {  //对每个响应元素进行处理log.info("Gpt输出：{}", s);if (!Objects.equals(s, "[DONE]")) {ChatGptMessage message = JSONUtil.toBean(s, ChatGptResponseParameter.class).getChoices().get(0).getDelta();String content = message.getContent();if (content != null) {try {if (session != null) {
//                                通过websocket回写到页面session.getBasicRemote().sendText(content);}log.info("Gpt输出：{}", s);} catch (IOException e) {e.printStackTrace();}return content;}}return "";}).onErrorResume(WebClientResponseException.class, ex -> Flux.just(ex.getResponseBodyAsString())) //请求失败.doFinally(signalType -> log.info("完成{}", signalType));  //在 Flux 完成时执行，无论是成功还是错误，都会打印日志表示请求完成。}private WebClient webClient(){return  WebClient.builder()
//                .clientConnector(new ReactorClientHttpConnector(
//                        HttpClient.create().proxy(proxy -> proxy.type(ProxyProvider.Proxy.HTTP).host("127.0.0.1").port(1080)) //代理
//                )).defaultHeader(HttpHeaders.ACCEPT, MediaType.APPLICATION_JSON_VALUE).defaultHeader(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_JSON_VALUE + ";charset=UTF-8").defaultHeader(HttpHeaders.AUTHORIZATION, "Bearer " + apiKey).baseUrl("https://api.openai.com/v1/chat/completions") //官方api请求地址.build();}
}
2.3.2、🟠 webSocket连接对话方法

通过该方法和html页面建立websocket连接

@Slf4j
@Service
@ServerEndpoint("/websocket/{uid}")
@Component
public class WebSocketServer2 {//连接建立时长private static final long sessionTimeout = 600000;// 用来存放每个客户端对应的WebSocketServer对象private static Map<String, WebSocketServer2> webSocketMap = new ConcurrentHashMap<>();// 与某个客户端的连接会话，需要通过它来给客户端发送数据private Session session;// 接收idprivate String uid;private static WebChatGPT webChatGPT;static {webChatGPT = SpringUtil.getBean(WebChatGPT.class);}/*** 连接建立成功调用的方法* @author zhengfuping* @date 2023/8/22* @param session* @param uid*/@OnOpenpublic void onOpen(Session session , @PathParam("uid") String uid){session.setMaxIdleTimeout(sessionTimeout);this.session = session;this.uid = uid;if (webSocketMap.containsKey(uid)){webSocketMap.remove(uid);}webSocketMap.put(uid,this);log.info("websocket连接成功编号uid: " + uid + "，当前在线数: " + getOnlineClients());try{// 响应客户端实际业务数据！sendMessage("conn_success");}catch (Exception e){log.error("websocket发送连接成功错误编号uid: " + uid + "，网络异常!!!");}}/*** 连接关闭调用的方法* @author zhengfuping* @date 2023/8/22*/@OnClosepublic void onClose(){try {if (webSocketMap.containsKey(uid)){webSocketMap.remove(uid);}log.info("websocket退出编号uid: " + uid + "，当前在线数为: " + getOnlineClients());} catch (Exception e) {log.error("websocket编号uid连接关闭错误: " + uid + "，原因: " + e.getMessage());}}/*** 收到客户端消息后调用chatGpt的方法* @param message 客户端发送过来的消息* @param session*/@OnMessagepublic void onMessage(String message, Session session) {try {JSON parse = JSONUtil.parse(message);String msg = parse.getByPath("msg").toString();if (StrUtil.isNotEmpty(msg)){
//                调用Flux<String> answer = webChatGPT.getAnswer(session, msg);//                 触发实际的请求操作answer.subscribe();}} catch (Exception e) {log.error("websocket发送消息失败编号uid为: " + uid + ",报文: " + message);}}/*** 发生错误时调用* @param session* @param error*/@OnErrorpublic void onError(Session session, Throwable error) {log.error("websocket编号uid错误: " + this.uid + "原因: " + error.getMessage());error.printStackTrace();}/*** 实现服务器主动推送* @author yingfeng* @date 2023/8/22 10:11* @Param * @param null* @return*/public void sendMessage(String message) throws IOException {this.session.getBasicRemote().sendText(message);}/*** 获取客户端在线数* @author zhengfuping* @date 2023/8/22 10:11* @param*/public static synchronized int getOnlineClients() {if (Objects.isNull(webSocketMap)) {return 0;} else {return webSocketMap.size();}}}

2.4、Controller

  • 跳转thymeleaf页的接口
@Controller
public class ChatWeb {@RequestMapping("/webSocket")public String webSocket(){return "webSocket";}
}
  • ChatGptController：页面请求访问
@RestController
@RequestMapping("/chat")
public class ChatGptController {@Resourceprivate WebChatGPT webChatGPT;@GetMapping(value ="/stringFlux", produces = "application/json; charset=utf-8")public Flux<String> stringFlux(String c) {Flux<String> flux = webChatGPT.getAnswer(null,c);return flux;}
}

这篇关于【2023】java使用WebClient实现chatGPT调用建立web socket连接的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/627173。

相关文章

Java中流式并行操作parallelStream的原理和使用方法

Java中流式并行操作parallelStream的原理和使用方法

《Java中流式并行操作parallelStream的原理和使用方法》本文详细介绍了Java中的并行流（parallelStream）的原理、正确使用方法以及在实际业务中的应用案例,并指出在使用并行流... 目录Java中流式并行操作parallelStream0. 问题的产生1. 什么是parallelS
阅读更多...
C++中unordered_set哈希集合的实现

C++中unordered_set哈希集合的实现

《C++中unordered_set哈希集合的实现》std::unordered_set是C++标准库中的无序关联容器,基于哈希表实现,具有元素唯一性和无序性特点,本文就来详细的介绍一下unorder... 目录一、概述二、头文件与命名空间三、常用方法与示例1. 构造与析构2. 迭代器与遍历3. 容量相关4
阅读更多...
Linux join命令的使用及说明

Linux join命令的使用及说明

《Linuxjoin命令的使用及说明》`join`命令用于在Linux中按字段将两个文件进行连接,类似于SQL的JOIN,它需要两个文件按用于匹配的字段排序,并且第一个文件的换行符必须是LF,`jo... 目录一. 基本语法二. 数据准备三. 指定文件的连接key四.-a输出指定文件的所有行五.-o指定输出
阅读更多...
Java中Redisson 的原理深度解析

Java中Redisson 的原理深度解析

《Java中Redisson的原理深度解析》Redisson是一个高性能的Redis客户端,它通过将Redis数据结构映射为Java对象和分布式对象,实现了在Java应用中方便地使用Redis,本文... 目录前言一、核心设计理念二、核心架构与通信层1. 基于 Netty 的异步非阻塞通信2. 编解码器三、
阅读更多...
Linux jq命令的使用解读

Linux jq命令的使用解读

《Linuxjq命令的使用解读》jq是一个强大的命令行工具,用于处理JSON数据,它可以用来查看、过滤、修改、格式化JSON数据,通过使用各种选项和过滤器,可以实现复杂的JSON处理任务... 目录一. 简介二. 选项2.1.2.2-c2.3-r2.4-R三. 字段提取3.1 普通字段3.2 数组字段四.
阅读更多...
C++中悬垂引用(Dangling Reference) 的实现

C++中悬垂引用(Dangling Reference) 的实现

《C++中悬垂引用(DanglingReference)的实现》C++中的悬垂引用指引用绑定的对象被销毁后引用仍存在的情况,会导致访问无效内存,下面就来详细的介绍一下产生的原因以及如何避免,感兴趣... 目录悬垂引用的产生原因1. 引用绑定到局部变量，变量超出作用域后销毁2. 引用绑定到动态分配的对象，对象
阅读更多...
Linux kill正在执行的后台任务 kill进程组使用详解

Linux kill正在执行的后台任务 kill进程组使用详解

《Linuxkill正在执行的后台任务kill进程组使用详解》文章介绍了两个脚本的功能和区别,以及执行这些脚本时遇到的进程管理问题,通过查看进程树、使用`kill`命令和`lsof`命令,分析了子... 目录零. 用到的命令一. 待执行的脚本二. 执行含子进程的脚本，并kill2.1 进程查看2.2 遇到的
阅读更多...
SpringBoot基于注解实现数据库字段回填的完整方案

SpringBoot基于注解实现数据库字段回填的完整方案

《SpringBoot基于注解实现数据库字段回填的完整方案》这篇文章主要为大家详细介绍了SpringBoot如何基于注解实现数据库字段回填的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以了解... 目录数据库表pom.XMLRelationFieldRelationFieldMapping基础的一些代
阅读更多...
一篇文章彻底搞懂macOS如何决定java环境

一篇文章彻底搞懂macOS如何决定java环境

《一篇文章彻底搞懂macOS如何决定java环境》MacOS作为一个功能强大的操作系统,为开发者提供了丰富的开发工具和框架,下面：本文主要介绍macOS如何决定java环境的相关资料,文中通过代码... 目录方法一：使用 which命令方法二：使用 Java_home工具（Apple 官方推荐）那问题来了，
阅读更多...
Java HashMap的底层实现原理深度解析

Java HashMap的底层实现原理深度解析

《JavaHashMap的底层实现原理深度解析》HashMap基于数组+链表+红黑树结构,通过哈希算法和扩容机制优化性能,负载因子与树化阈值平衡效率,是Java开发必备的高效数据结构,本文给大家介绍... 目录一、概述：HashMap的宏观结构二、核心数据结构解析1. 数组（桶数组）2. 链表节点（Node
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2