良心分享：基于Java+SpringBoot+Netty+WebSocket+Uniapp轻松搭建ChatGpt程序

原创

用户2031163

发布于 2023-08-27 16:24:45

6850

发布于 2023-08-27 16:24:45

文章被收录于专栏：一页一技术分享

一步一步教你搭建ChatGPT程序（微信小程序/H5网页）

本文将详细介绍如何基于你自己的开源项目搭建一个ChatGPT程序，包括微信小程序和H5网页版。该项目服务端主要使用了Java + Spring Boot + Netty + WebSocket等技术栈，聊天客户端使用的是UniApp来轻松搭建微信小程序和H5网页端。

1. 项目准备

在开始之前，请确保已经准备好以下环境和工具：

IDE（推荐使用IntelliJ IDEA）
HBuilder X
微信小程序开发工具

2. 架构设计

ChatGPT程序的架构设计如下：

服务端使用Java和Spring Boot框架搭建，其中使用Netty框架实现WebSocket服务器。
客户端提供了微信小程序和H5两种平台，可以通过WebSocket与服务端进行通信。

3. 服务端搭建

Github完整代码DEMO

https://gitee.com/yeeevip/yeee-chatgpt
        
https://github.com/yeeevip/yeee-chatgpt

3.1 创建Spring Boot项目

使用IDE创建一个新的Spring Boot项目，并添加相关依赖：

<dependencies>
    ...
    <!-- 该依赖封装了Netty + websocket，并集成到springboot-starter中 -->
    <dependency>
        <groupId>vip.yeee.memo</groupId>
        <artifactId>common-netty-websocket</artifactId>
    </dependency>
    <!-- 引入此依赖为了使用openai的stream模式来快速获取内容 -->
    <dependency>
        <groupId>com.squareup.okhttp3</groupId>
        <artifactId>okhttp-sse</artifactId>
    </dependency>
    <!-- 以下两个依赖为服务鉴权依赖 -->
    <dependency>
        <groupId>vip.yeee.memo</groupId>
        <artifactId>common-app-auth-server</artifactId>
    </dependency>
    <dependency>
        <groupId>vip.yeee.memo</groupId>
        <artifactId>common-app-auth-client</artifactId>
    </dependency>
    ...
</dependencies>

3.2 编写WebSocket端点Endpoint

添加WebSocket的支持后，我们需要编写具体的端点事件方法，如OnOpen、OnMessage等事件，用于实现消息的接收和发送逻辑。

@Component
@ServerEndpoint(path = "/ws/airobot/{chatId}", port = "8802", readerIdleTimeSeconds = "15")
public class ChatAppWebSocket {

    @Autowired
    private ApiChatGptBiz apiChatGptBiz;

    // ws打开时触发
    @OnOpen
    public void onOpen(Session session, HttpHeaders headers, @PathParam("chatId") String chatId) {
        apiChatGptBiz.handleWsOnOpen(session, headers, chatId);
    }

    // 收到客户端ws消息时触发
    @OnMessage
    public void onMessage(Session session, String msg) {
        apiChatGptBiz.handleWsOnMessage(session, msg);
    }

    // 客户端ws连接关闭时触发
    @OnClose
    public void onClose(Session session) throws IOException {
        apiChatGptBiz.handleWsOnClose(session);
    }

    // 这里主要处理netty的一些事件，如读超时、写超时，可以方便实现心跳检测
    @OnEvent
    public void onEvent(Session session, Object evt) {
        apiChatGptBiz.handleWsOnEvent(session, evt);
    }

}

3.3 集成ChatGPT模型

根据你的ChatGPT模型实现，添加相关代码将模型集成到服务端中。你可以使用开源的ChatGPT模型，或自行训练一个模型。具体实现将模型集成到服务端的步骤和代码，根据你使用的具体ChatGPT模型会有所不同，请参考相应的文档和示例。这里主要调用的是openai的api接口，代码如下：

@Component
public class OpenaiApiService {

    @Autowired
    private OkHttpClient okHttpClient;
    @Autowired
    private OkHttp3Kit okHttp3Kit;

    // 使用okhttp的sse请求模式来调用会话接口，流式调用的话阻塞影响小性能比较好
    public EventSource chatCompletions(Map<String, String> headers, ChatParams params, EventSourceListener eventSourceListener) {
        try {
            EventSource.Factory factory = EventSources.createFactory(okHttpClient);
            ObjectMapper mapper = new ObjectMapper();
            String requestBody = mapper.writeValueAsString(params);
            Request request = new Request.Builder()
                    .url(getApiHost() + "/v1/chat/completions")
                    .post(RequestBody.create(MediaType.parse(ContentType.JSON.getValue()), requestBody))
                    .headers(Headers.of(headers))
                    .build();
            return factory.newEventSource(request, eventSourceListener);
        } catch (Exception e) {
            throw new BizException("chatCompletions error");
        }
    }
}

3.4 实现业务逻辑

根据你的需求，实现业务逻辑。此处的业务逻辑是处理用户输入的消息，在服务端调用ChatGPT模型生成回复，并将回复发送给客户端。

@Service
public class ChatService {

    ...

    public void doWsChat(String msg, String chatId, String uid) {
        WsEventSourceListener listener = new WsEventSourceListener(chatId, uid, msg);

        String limitUserKey = StrUtil.isNotBlank(chatRedisRepository.getUserOpenIdCache(uid)) ? chatRedisRepository.getUserOpenIdCache(uid) : uid;

        if (!this.checkLimit(uid, msg, limitUserKey, listener)) {
            return;
        }
        
        ...
        
        ChatParams params = new ChatParams();
        List<ChatMessage2> messages = ChatLocalRepository.getChatContext(chatId, chatRedisRepository.getPreRecordCount());
        ChatMessage2 chatMessage2 = this.buildUserMessage(msg);
        messages.add(chatMessage2);
        params.setMessages(messages);
        params.setUser(authService.getUserId());
        params.setStream(true);
        listener.setStartTime(new Date());
        EventSource eventSource = openaiApiService.chatCompletions(headers(), params, listener);
        listener.setEventSource(eventSource);
        ChatAppWsContext.setUserRecentESL(chatId, uid, listener);
    }
    
    ...
    
}

4. 客户端开发

4.1 使用UniApp微信小程序/H5

    ...
    // 与服务器建立连接
    vm.ws = uni.connectSocket({
        url: vm.baseWsAddr + '/ws/airobot/' + vm.chatId,
        header: {
            'Utoken': 'Bearer ' + t
        },
        complete: () => {
        }
    })
    // 处理服务器返回的消息
    vm.ws.onMessage(function (e) {
        ...
    })
    vm.ws.onOpen(function (e) {
        console.log('ws open')
        setInterval(function() {
            if (vm.ws) {
                vm.ws.send({
                    data: 'ping'
                })
            }
        }, 5000);
    })
...

4.2 客户端效果预览

微信小程序

H5网页版

5. 总结

本文详细介绍了如何基于Java + Spring Boot + Netty + WebSocket技术栈搭建一个ChatGPT程序，并使用Uniapp开发微信小程序和H5作为客户端。通过完成这个项目，你可以搭建一个功能强大的聊天机器人系统，满足用户的各种需求。希望这篇文章能够帮助你顺利完成ChatGPT程序的搭建与开发！

Github完整代码DEMO

https://gitee.com/yeeevip/yeee-chatgpt

https://github.com/yeeevip/yeee-chatgpt

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

spring boot

chatgpt

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

spring boot

chatgpt

登录后参与评论

0 条评论

热度