fix error async

This commit is contained in:
Chuck1sn
2025-05-21 15:33:52 +08:00
parent 3bc65d2df4
commit fa4d790e81
9 changed files with 78 additions and 41 deletions

View File

@@ -7,6 +7,5 @@ import dev.langchain4j.service.UserMessage;
import dev.langchain4j.service.memory.ChatMemoryAccess;
public interface DeepSeekChatAssistant extends ChatMemoryAccess {
@SystemMessage("You are a good friend of mine. Answer using slang.")
TokenStream chat(@MemoryId String memoryId, @UserMessage String userMessage);
}

View File

@@ -39,7 +39,6 @@ public class WebSecurityConfig {
return new OrRequestMatcher(
new AntPathRequestMatcher("/auth/sign-in", HttpMethod.POST.name()),
new AntPathRequestMatcher("/auth/sign-up", HttpMethod.POST.name()),
new AntPathRequestMatcher("/ai/**", HttpMethod.POST.name()),
new AntPathRequestMatcher("/v3/api-docs/**", HttpMethod.GET.name()),
new AntPathRequestMatcher("/swagger-ui/**", HttpMethod.GET.name()),
new AntPathRequestMatcher("/swagger-ui.html", HttpMethod.GET.name()),
@@ -63,6 +62,9 @@ public class WebSecurityConfig {
.permitAll()
.anyRequest()
.authenticated())
.securityContext(securityContext -> securityContext
.requireExplicitSave(false)
)
.exceptionHandling(
(exceptionHandling) ->
exceptionHandling

View File

@@ -2,14 +2,14 @@ package com.zl.mjga.controller;
import com.zl.mjga.service.DeepSeekAiService;
import dev.langchain4j.service.TokenStream;
import java.security.Principal;
import java.time.Duration;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.web.bind.annotation.*;
import reactor.core.publisher.Flux;
import reactor.core.publisher.Sinks;
@@ -22,20 +22,20 @@ public class AiController {
private final DeepSeekAiService deepSeekAiService;
@PostMapping(value = "/chat", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<String> chat(@RequestBody String userMessage) {
public Flux<String> chat(Principal principal, @RequestBody String userMessage) {
Sinks.Many<String> sink = Sinks.many().unicast().onBackpressureBuffer();
TokenStream chat = deepSeekAiService.chat("123", userMessage);
TokenStream chat = deepSeekAiService.chat(principal.getName(), userMessage);
chat.onPartialResponse(sink::tryEmitNext)
.onCompleteResponse(
r -> {
sink.tryEmitNext("[DONE]");
sink.tryEmitComplete();
sink.emitComplete(Sinks.EmitFailureHandler.FAIL_FAST);
})
.onError(sink::tryEmitError)
.start();
return sink.asFlux()
.timeout(Duration.ofSeconds(60))
.onErrorResume(e -> Flux.just("Timeout occurred"));
return sink.asFlux()
.timeout(Duration.ofSeconds(120))
.doOnCancel(SecurityContextHolder::clearContext)
.doOnTerminate(SecurityContextHolder::clearContext);
}
}

View File

@@ -1,11 +1,11 @@
VITE_APP_PORT=5173
VITE_SOURCE_MAP=true
# mock
VITE_ENABLE_MOCK=true
VITE_BASE_URL=http://localhost:5173
#VITE_ENABLE_MOCK=true
#VITE_BASE_URL=http://localhost:5173
# local
#VITE_ENABLE_MOCK=false
#VITE_BASE_URL=http://localhost:8080
VITE_ENABLE_MOCK=false
VITE_BASE_URL=http://localhost:8080
# dev
#VITE_ENABLE_MOCK=false
#VITE_BASE_URL=https://localhost/api

View File

@@ -8,6 +8,7 @@
"name": "frontend",
"version": "1.0",
"dependencies": {
"@microsoft/fetch-event-source": "^2.0.1",
"@tailwindcss/vite": "^4.0.14",
"@vueuse/core": "^13.0.0",
"apexcharts": "^3.46.0",
@@ -1318,6 +1319,12 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@microsoft/fetch-event-source": {
"version": "2.0.1",
"resolved": "http://mirrors.tencent.com/npm/@microsoft/fetch-event-source/-/fetch-event-source-2.0.1.tgz",
"integrity": "sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA==",
"license": "MIT"
},
"node_modules/@mswjs/interceptors": {
"version": "0.37.6",
"resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.37.6.tgz",

View File

@@ -18,6 +18,7 @@
"type-check": "vue-tsc --build"
},
"dependencies": {
"@microsoft/fetch-event-source": "^2.0.1",
"@tailwindcss/vite": "^4.0.14",
"@vueuse/core": "^13.0.0",
"apexcharts": "^3.46.0",
@@ -51,6 +52,8 @@
"vue-tsc": "^2.2.8"
},
"msw": {
"workerDirectory": ["public"]
"workerDirectory": [
"public"
]
}
}

View File

@@ -4,7 +4,7 @@ import { http, HttpResponse } from "msw";
export default [
http.post("/ai/chat", () => {
const response = HttpResponse.json({
message: faker.lorem.sentence(1000),
message: faker.lorem.sentence({ min: 100, max: 300 }),
});
return response;
}),

View File

@@ -1,31 +1,54 @@
import { fetchEventSource } from "@microsoft/fetch-event-source";
import { ref } from "vue";
import client from "../../api/client";
import useAuthStore from "../store/useAuthStore";
const authStore = useAuthStore();
export const useAiChat = () => {
const messages = ref<string[]>([]);
const isLoading = ref(false);
let currentController: AbortController | null = null;
const chat = async (message: string) => {
isLoading.value = true;
messages.value.push(message);
messages.value.push("");
const ctrl = new AbortController();
currentController = ctrl;
try {
const { response } = await client.POST("/ai/chat", {
const baseUrl = `${import.meta.env.VITE_BASE_URL}`;
await fetchEventSource(`${baseUrl}/ai/chat`, {
method: "POST",
headers: {
Authorization: authStore.get(),
"Content-Type": "application/json",
},
body: message,
parseAs: "stream",
signal: ctrl.signal,
onmessage(ev) {
messages.value[messages.value.length - 1] += ev.data;
},
onclose() {
console.log("onclose");
},
onerror(err) {
throw err;
},
});
const reader = response.body?.getReader();
if (reader) {
const decoder = new TextDecoder();
while (true) {
const { done, value } = await reader.read();
if (done) break;
messages.value.push(decoder.decode(value, { stream: true }));
console.log(decoder.decode(value));
}
return;
}
} finally {
isLoading.value = false;
}
};
return { messages, chat, isLoading };
const cancel = () => {
if (currentController) {
currentController.abort();
currentController = null;
}
};
return { messages, chat, isLoading, cancel };
};

View File

@@ -5,9 +5,9 @@
class="flex items-start gap-2.5">
<img class="w-8 h-8 rounded-full" src="/trump.jpg" alt="Jese image">
<div
class="flex flex-col leading-1.5 p-4 border-gray-200 bg-gray-100 rounded-e-xl rounded-es-xl dark:bg-gray-700">
:class="['flex flex-col leading-1.5 p-4 border-gray-200 rounded-e-xl rounded-es-xl dark:bg-gray-700', chatElement.isUser ? 'bg-gray-100' : 'bg-blue-100']">
<div class="flex items-center space-x-2 rtl:space-x-reverse">
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{ user.username }}</span>
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{ chatElement.username }}</span>
</div>
<p class="text-base font-normal py-2.5 text-gray-900 dark:text-white">{{ chatElement.content }}</p>
</div>
@@ -61,12 +61,12 @@
</template>
<script setup lang="ts">
import { computed, nextTick, ref, watch } from "vue";
import { computed, nextTick, onUnmounted, ref, watch } from "vue";
import Button from "../components/Button.vue";
import { useAiChat } from "../composables/ai/useAiChat";
import useUserStore from "../composables/store/useUserStore";
const { messages, chat, isLoading } = useAiChat();
const { messages, chat, isLoading, cancel } = useAiChat();
const { user } = useUserStore();
const inputMessage = ref("");
const chatContainer = ref<HTMLElement | null>(null);
@@ -76,7 +76,7 @@ const chatElements = computed(() => {
return {
content: message,
username: index % 2 === 0 ? user.username : "DeepSeek",
isUser: index % 2 === 0,
isUser: index % 2 !== 0,
};
});
});
@@ -90,7 +90,6 @@ watch(
{ deep: true },
);
// 滚动到底部的函数
const scrollToBottom = () => {
if (chatContainer.value) {
chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
@@ -98,8 +97,12 @@ const scrollToBottom = () => {
};
const handleSendClick = async (event: Event) => {
await chat(inputMessage.value);
chat(inputMessage.value);
inputMessage.value = "";
scrollToBottom();
};
onUnmounted(() => {
cancel();
});
</script>