diff --git a/src/api/instance.ts b/src/api/instance.ts index e1ef484..77e629b 100644 --- a/src/api/instance.ts +++ b/src/api/instance.ts @@ -1,7 +1,7 @@ import axios from "axios"; export const axiosInstance = axios.create({ - baseURL: "http://13.209.80.41:8080", + baseURL: "http://3.38.211.169:8080", headers: { "Content-Type": "application/json", }, diff --git a/src/components/Drive/index.tsx b/src/components/Drive/index.tsx index 365542c..a8fd929 100644 --- a/src/components/Drive/index.tsx +++ b/src/components/Drive/index.tsx @@ -2,9 +2,15 @@ import styled from "styled-components"; import car_driving_img from "@assets/images/car_driving.gif"; import { useNavigate } from "react-router-dom"; import { drivingEndAPI } from "@api/drivingAPIS"; +import { useEffect, useState } from "react"; +import { Toast } from "@components/common/Toast"; export const Drive = () => { + const [toast, setToast] = useState(false); + const [message, setMessage] = useState("졸음 운전이 감지되었습니다"); + const navigate = useNavigate(); + let eventSource: any; const handleClickArriveBtn = () => { const apiResponse = drivingEndAPI(); @@ -12,13 +18,47 @@ export const Drive = () => { console.log(res); navigate(`/end/${res.reportId}`); }); + eventSource.close(); }; + useEffect(() => { + window.speechSynthesis.getVoices(); + }, []); + + const fetchSSE = async () => { + try { + eventSource = new EventSource("/url"); + eventSource.onmessage = async (event: any) => { + const response = await event.data; + console.log(response); + console.log("sse event!"); + setToast(true); + setMessage("message"); + }; + eventSource.onerror = async (event: any) => { + eventSource.close(); + console.error(event); + }; + } catch {} + }; + + useEffect(() => { + fetchSSE(); + }, []); + return ( 주행 중 주행 중입니다 + 목적지 도착 + {toast && } ); }; diff --git a/src/components/common/Toast.tsx b/src/components/common/Toast.tsx index 0e940b3..b5cd0d7 100644 --- a/src/components/common/Toast.tsx +++ b/src/components/common/Toast.tsx @@ -1,12 +1,14 @@ import { useEffect } from "react"; import styled from "styled-components"; import alarm_sound from "@assets/sound/alram.mp3"; +import { getSpeech } from "@utils/getSpeech"; interface ToastProps { message: string; setToast: React.Dispatch>; } export const Toast = ({ message, setToast }: ToastProps) => { + getSpeech(message); useEffect(() => { const timer = setTimeout(() => { setToast(false); diff --git a/src/utils/getSpeech.ts b/src/utils/getSpeech.ts new file mode 100644 index 0000000..b5ed3ec --- /dev/null +++ b/src/utils/getSpeech.ts @@ -0,0 +1,33 @@ +// @ts-ignore + +export const getSpeech = (text: string) => { + let voices: any[] = []; + + const setVoiceList = () => { + voices = window.speechSynthesis.getVoices(); + }; + setVoiceList(); + + window.speechSynthesis.onvoiceschanged = setVoiceList; + + const speech = (text: string) => { + const lang = "ko-KR"; + const utterThis = new SpeechSynthesisUtterance(text); + + utterThis.lang = lang; + + const kor_voice = voices.find( + (elem) => elem.lang == lang || elem.lang === lang.replace("-", "_") + ); + + if (kor_voice) { + utterThis.voice = kor_voice; + } else { + return; + } + + window.speechSynthesis.speak(utterThis); + }; + + speech(text); +};