使用chatgpt实现微信聊天小程序(秒回复)，github开源(附带链接)

sockstack / 164 / 2023-12-05 13:03:15

ChatGPT 可用网址，仅供交流学习使用，如对您有所帮助，请收藏并推荐给需要的朋友。 <a href="https://ckai.xyz/?sockstack&section=detail" target="__blank">https://ckai.xyz</a> <article class="baidu_pl"><div id="article_content" class="article_content clearfix">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-25cebea3f9.css">
<div id="content_views" class="markdown_views prism-github-gist">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path></svg>
<div class="toc">
<h3>文章目录</h3>
<ul>
<li>前言</li>
<li>效果展示</li>
<li>原理说明</li>
<li>服务器端代码说明</li>
<li>微信小程序代码说明</li>
<li>代码链接</li>
<li>总结</li>
</ul>
</div>
 
<h1>
<a id="_1"></a>前言</h1> 
我在前一段时间突发奇想，就使用java来调用chatgpt的接口，然后写了一个简单小程序，也上了热榜第一，java调用chatgpt接口，实现专属于自己的人工智能助手，事实上，这个程序毛病挺多的，最不能让人接受的一点就是返回速度非常缓慢(即使使用非常好的外网服务器)。 
现在，我改进了一下程序，使用异步请求的方式，基本可以实现秒回复。并且还基于webSocket编写了一个微信小程序来进行交互，可以直接使用微信小程序来进行体验。 
现在我将所有代码都上传了github(链接在文章结尾)，大家可以clone下来，部署到服务器上，真正实现自己的聊天机器人！！！ 
<hr> 
<h1>
<a id="_9"></a>效果展示</h1> 
部分截图如下 <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/d7766b7da71544dd95d09bb907fc2a34.png#pic_center" alt="在这里插入图片描述"> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/2b1d3d85a07943b3aca8993f69f57785.png#pic_center" alt="在这里插入图片描述"> 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/1a7596f875204cfe9d79e680fb427738.png#pic_center" alt="在这里插入图片描述"> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/3312583420004a36924b225543916da9.png#pic_center" alt="在这里插入图片描述"> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/872c600c0a6b463b81af07b56bcf8b5f.png#pic_center" alt="在这里插入图片描述"> 
<hr> 
<h1>
<a id="_19"></a>原理说明</h1> 
在 java调用chatgpt接口，实现专属于自己的人工智能助手 我说明了java调用chatgpt的基本原理，这里的代码就是对这个代码的改进，使用异步请求的方式来进行。 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/5214240c02e0479c90e3f49a424e117e.png" alt="在这里插入图片描述"> 
注意看官方文档，我们在请求时可以提供一个参数stream，然后就可以实现按照流的形式进行返回，这种方式基本可以做到没有延迟就给出答案。 
由于这次改进的思路主要就是将请求改为了异步，其他的基本一样，所以就不做解释，直接给出代码了，代码上面都有注释 
<pre><code class="prism language-java"> /*** 这个方法用于测试的，可以在控制台打印输出结果** @param chatGptRequestParameter 请求的参数* @param question 问题*/public void printAnswer(ChatRequestParameter chatGptRequestParameter, String question) {asyncClient.start();// 创建一个post请求AsyncRequestBuilder asyncRequest = AsyncRequestBuilder.post(url);// 设置请求参数chatGptRequestParameter.addMessages(new ChatMessage("user", question));// 请求的参数转换为字符串String valueAsString = null;try {valueAsString = objectMapper.writeValueAsString(chatGptRequestParameter);} catch (JsonProcessingException e) {e.printStackTrace();}// 设置编码和请求参数ContentType contentType = ContentType.create("text/plain", charset);asyncRequest.setEntity(valueAsString, contentType);asyncRequest.setCharset(charset);// 设置请求头asyncRequest.setHeader(HttpHeaders.CONTENT_TYPE, "application/json");// 设置登录凭证asyncRequest.setHeader(HttpHeaders.AUTHORIZATION, "Bearer " + apiKey);// 下面就是生产者消费者模型CountDownLatch latch = new CountDownLatch(1);// 用于记录返回的答案StringBuilder sb = new StringBuilder();// 消费者AbstractCharResponseConsumer&lt;HttpResponse&gt; consumer = new AbstractCharResponseConsumer&lt;HttpResponse&gt;() {HttpResponse response;@Overrideprotected void start(HttpResponse response, ContentType contentType) throws HttpException, IOException {setCharset(charset);this.response = response;}@Overrideprotected int capacityIncrement() {return Integer.MAX_VALUE;}@Overrideprotected void data(CharBuffer src, boolean endOfStream) throws IOException {// 收到一个请求就进行处理String ss = src.toString();// 通过data:进行分割，如果不进行此步，可能返回的答案会少一些内容for (String s : ss.split("data:")) {// 去除掉data:if (s.startsWith("data:")) {s = s.substring(5);}// 返回的数据可能是（DONE）if (s.length() &gt; 8) {// 转换为对象ChatResponseParameter responseParameter = objectMapper.readValue(s, ChatResponseParameter.class);// 处理结果for (Choice choice : responseParameter.getChoices()) {String content = choice.getDelta().getContent();if (content != null &amp;&amp; !"".equals(content)) {// 保存结果sb.append(content);// 将结果使用webSocket传送过去System.out.print(content);}}}}}@Overrideprotected HttpResponse buildResult() throws IOException {return response;}@Overridepublic void releaseResources() {}};// 执行请求asyncClient.execute(asyncRequest.build(), consumer, new FutureCallback&lt;HttpResponse&gt;() {@Overridepublic void completed(HttpResponse response) {latch.countDown();chatGptRequestParameter.addMessages(new ChatMessage("assistant", sb.toString()));System.out.println("回答结束！！！");}@Overridepublic void failed(Exception ex) {latch.countDown();System.out.println("failed");ex.printStackTrace();}@Overridepublic void cancelled() {latch.countDown();System.out.println("cancelled");}});try {latch.await();} catch (InterruptedException e) {e.printStackTrace();}}
</code></pre> 
<blockquote> 大家代码可以直接不看，反正最终的效果就是可以实现问了问题就返回结果。运行效果如下 
</blockquote> 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/7a410d5599c24baab514b6e5dc2f8f40.png#pic_center" alt="在这里插入图片描述"> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/31a91d3323f34458aea27c43bc04f337.png#pic_center" alt="在这里插入图片描述"> 
<blockquote> 可以发现，输出就类似于官方的那种效果，一个字一个字的输出 
</blockquote> 
<hr> 
<h1>
<a id="_155"></a>服务器端代码说明</h1> 
我使用java搭建了一个简单的服务器端程序，提供最基础的用户登录校验功能，以及提供了WebSocket通信。 
用户校验的代码 
<pre><code class="prism language-java">package com.ttpfx.controller;import com.ttpfx.entity.User;
import com.ttpfx.service.UserService;
import com.ttpfx.utils.R;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.annotation.Resource;
import java.util.Objects;
import java.util.concurrent.ConcurrentHashMap;/*** @author ttpfx* @date 2023/3/29*/
@RestController
@RequestMapping("/user")
public class UserController {@Resourceprivate UserService userService;public static ConcurrentHashMap&lt;String, User&gt; loginUser = new ConcurrentHashMap&lt;&gt;();public static ConcurrentHashMap&lt;String, Long&gt; loginUserKey = new ConcurrentHashMap&lt;&gt;();@RequestMapping("/login")public R login(String username, String password) {if (username == null) return R.fail("必须填写用户名");User user = userService.queryByName(username);if (user == null) return R.fail("用户名不存在");String targetPassword = user.getPassword();if (targetPassword == null) return R.fail("用户密码异常");if (!targetPassword.equals(password)) return R.fail("密码错误");loginUser.put(username, user);loginUserKey.put(username, System.currentTimeMillis());return R.ok(String.valueOf(loginUserKey.get(username)));}@RequestMapping("/logout")public R logout(String username) {loginUser.remove(username);loginUserKey.remove(username);return R.ok();}@RequestMapping("/checkUserKey")public R checkUserKey(String username, Long key){if (username==null || key == null)return R.fail("用户校验异常");if (!Objects.equals(loginUserKey.get(username), key)){return R.fail("用户在其他地方登录！！！");}return R.ok();}@RequestMapping("/loginUser")public R loginUser(){return R.ok("success",loginUser.keySet());}
}</code></pre> 
基于webSocket通信的代码 
<pre><code class="prism language-java">package com.ttpfx.server;import com.fasterxml.jackson.databind.ObjectMapper;
import com.ttpfx.entity.UserLog;
import com.ttpfx.model.ChatModel;
import com.ttpfx.service.UserLogService;
import com.ttpfx.service.UserService;
import com.ttpfx.vo.chat.ChatRequestParameter;
import org.springframework.stereotype.Component;import javax.annotation.Resource;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.time.LocalDateTime;
import java.util.concurrent.ConcurrentHashMap;/*** @author ttpfx* @date 2023/3/28*/
@Component
@ServerEndpoint("/chatWebSocket/{username}")
public class ChatWebSocketServer {/*** 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。*/private static int onlineCount = 0;/*** concurrent包的线程安全Map，用来存放每个客户端对应的MyWebSocket对象。*/private static ConcurrentHashMap&lt;String, ChatWebSocketServer&gt; chatWebSocketMap = new ConcurrentHashMap&lt;&gt;();/*** 与某个客户端的连接会话，需要通过它来给客户端发送数据*/private Session session;/*** 接收的username*/private String username = "";private UserLog userLog;private static UserService userService;private static UserLogService userLogService;@Resourcepublic void setUserService(UserService userService) {ChatWebSocketServer.userService = userService;}@Resourcepublic void setUserLogService(UserLogService userLogService) {ChatWebSocketServer.userLogService = userLogService;}private ObjectMapper objectMapper = new ObjectMapper();private static ChatModel chatModel;@Resourcepublic void setChatModel(ChatModel chatModel) {ChatWebSocketServer.chatModel = chatModel;}ChatRequestParameter chatRequestParameter = new ChatRequestParameter();/*** 建立连接* @param session 会话* @param username 连接用户名称*/@OnOpenpublic void onOpen(Session session, @PathParam("username") String username) {this.session = session;this.username = username;this.userLog = new UserLog();// 这里的用户id不可能为null，出现null，那么就是非法请求try {this.userLog.setUserId(userService.queryByName(username).getId());} catch (Exception e) {e.printStackTrace();try {session.close();} catch (IOException ex) {ex.printStackTrace();}}this.userLog.setUsername(username);chatWebSocketMap.put(username, this);onlineCount++;System.out.println(username + "--open");}@OnClosepublic void onClose() {chatWebSocketMap.remove(username);System.out.println(username + "--close");}@OnMessagepublic void onMessage(String message, Session session) {System.out.println(username + "--" + message);// 记录日志this.userLog.setDateTime(LocalDateTime.now());this.userLog.setPreLogId(this.userLog.getLogId() == null ? -1 : this.userLog.getLogId());this.userLog.setLogId(null);this.userLog.setQuestion(message);long start = System.currentTimeMillis();// 这里就会返回结果String answer = chatModel.getAnswer(session, chatRequestParameter, message);long end = System.currentTimeMillis();this.userLog.setConsumeTime(end - start);this.userLog.setAnswer(answer);userLogService.save(userLog);}@OnErrorpublic void onError(Session session, Throwable error) {error.printStackTrace();}public void sendMessage(String message) throws IOException {this.session.getBasicRemote().sendText(message);}public static void sendInfo(String message, String toUserId) throws IOException {chatWebSocketMap.get(toUserId).sendMessage(message);}
}</code></pre> 
<blockquote> 我们只需要编写简单的前端代码，就可以实现和后端的socket通信。对于后端，我们只需要改一下apiKey和数据库配置就可以直接运行了。 
</blockquote> 
<hr> 
<h1>
<a id="_363"></a>微信小程序代码说明</h1> 
我写了一个简单微信小程序来和后端进行通信，界面如下 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/ae4d41ef13f94a5495bcb9505f701fc7.png" alt="在这里插入图片描述"> 
<img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/cc9df1be78b3485c88396e8b2f773fc5.png" alt="在这里插入图片描述"> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/9c66f5dfcc9f4ee39e13e58c50b5742a.png" alt="在这里插入图片描述"> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/88278e88b2a745aaa62ce368b9dd0b30.png" alt="在这里插入图片描述"> 
大家只需要下载源代码，然将程序中的ip改为自己服务器的ip即可 
<hr> 
<h1>
<a id="_376"></a>代码链接</h1> 
github的地址为 https://github.com/c-ttpfx/chatgpt-java-wx 可以直接使用 git clone https://github.com/c-ttpfx/chatgpt-java-wx.git 下载代码到本地 
我在github里面说明了安装使用的基本步骤，大家按照步骤使用即可 
<h1>
<a id="_382"></a>总结</h1> 
上面聊天小程序就是我花2天写出来的，可能会有一些bug，我自己测试的时候倒是没有怎么遇到bug，聊天和登录功能都能正常使用。 
对于微信小程序，由于我不是专业搞前端的，就只东拼西凑实现了最基本的功能（登录、聊天），大家可以自己写一个，反正后端接口都提供好了嘛，也不是很难，不想写也可以将就使用我的。 
最后，也是最重要的，大家帮我的代码star一下！！！ 感谢大家了(≥▽≤)/(≥▽≤)/
</div>
<link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-0407448025.css" rel="stylesheet">
<link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-c216769e99.css" rel="stylesheet">
</div>
<div id="treeSkill"></div>
</article>

作者

sockstack

许可协议

CC BY 4.0

发布于

2023-12-05

修改于

2024-09-18

上一篇：软件：常用 Linux 软件汇总，值得收藏下一篇：ChatGPT的平替来了？一文总结 ChatGPT 的开源平替，你值得拥有