SAFEKISO/inspond-nuxt-safekiso/pages/admin/lab/chatting.vue

<!-- This example requires Tailwind CSS v2.0+ -->
<template>
    <div class="">
        <div class="container mx-auto">
            <div class="min-w-full border rounded lg:grid lg:grid-cols-3">
                <div class="hidden lg:col-span-3 lg:block">
                    <div class="flex flex-col min-h-screen w-full">
                        <div
                            class="relative flex items-center p-3 border-b border-gray-300"
                        >
                            <img
                                class="object-cover w-10 h-10 rounded-full"
                                src="https://cdn.pixabay.com/photo/2018/01/15/07/51/woman-3083383__340.jpg"
                                alt="username"
                            />
                            <span class="block ml-2 font-bold text-gray-600">
                                채팅 상황에서의 API 사용 예{{ '     ' }}

                                <p class="text-xs">
                                    {{
                                        messageList[messageList.length - 1][
                                            'elapsedServer'
                                        ] != ''
                                            ? messageList[
                                                  messageList.length - 1
                                              ]['elapsedServer'] +
                                              ' / ' +
                                              messageList[
                                                  messageList.length - 1
                                              ]['elapsed']
                                            : ''
                                    }}
                                </p>
                            </span>
                            <span
                                class="absolute w-3 h-3 bg-green-600 rounded-full left-10 top-3"
                            >
                            </span>
                        </div>

                        <div class="flex-grow bg-gray-50 justify-center">
                            <div
                                class="relative w-full p-6 overflow-y-auto max-h-fit"
                            >
                                <ul class="space-y-2">
                                    <li
                                        v-for="message in messageList"
                                        :key="message['serial']"
                                        class="flex"
                                        :class="
                                            message['left'] == true
                                                ? 'justify-start'
                                                : 'justify-end'
                                        "
                                    >
                                        <div
                                            class="relative max-w-xl px-4 py-2 text-gray-700 rounded shadow"
                                        >
                                            <span class="block">{{
                                                message['text']
                                            }}</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div
                            class="flex items-center justify-between w-full p-3 border-t border-gray-300"
                        >
                            <input
                                v-model="justEnteredText"
                                type="text"
                                placeholder="Message"
                                class="block w-full py-2 pl-4 mx-3 bg-gray-100 rounded-full outline-none focus:text-gray-700"
                                name="message"
                                required
                                @keyup.enter="checkChatInput"
                            />
                            <button type="button" @click="checkChatInput">
                                <svg
                                    class="w-5 h-5 text-gray-500 origin-center transform rotate-90"
                                    xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 20 20"
                                    fill="currentColor"
                                >
                                    <path
                                        d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"
                                    />
                                </svg>
                            </button>
                        </div>

                        <div
                            class="flex items-center justify-end w-full p-3 border-t border-gray-300"
                        ></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
definePageMeta({
    middleware: 'check-auth-user',
});

let tmpIdx = 0;

const messageList = ref([
    {
        serial: tmpIdx++,
        left: true,
        text: '안녕하세요?',
        elapsedServer: '',
        elapsed: '',
    },
    {
        serial: tmpIdx++,
        left: false,
        text: '테스트 하러 들어 왔습니다.',
        elapsedServer: '',
        elapsed: '',
    },
    {
        serial: tmpIdx++,
        left: true,
        text: '테스트 하면 이 문장이죠.',
        elapsedServer: '',
        elapsed: '',
    },
    {
        serial: tmpIdx++,
        left: true,
        text: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit.',
        elapsedServer: '',
        elapsed: '',
    },
]);

const justEnteredText = ref('');

const inPregressFlag = ref(false);
const elispe = ref(0);

async function checkChatInput() {
    console.log('huk');

    if (justEnteredText.value == '') {
        return;
    }

    if (inPregressFlag.value == true) {
        return;
    }
    inPregressFlag.value = true;

    const startTime = performance.now();

    const responseJson = await _crossCtl.doFilter('', {
        text: justEnteredText.value,
        mode: 'filter',
    });

    const endTime = performance.now();

    inPregressFlag.value = false;

    elispe.value = endTime - startTime;

    console.log('responseJson=', responseJson);

    if (responseJson['Status']['Code'] == 2000) {
        messageList.value.push({
            serial: tmpIdx++,
            left: false,
            text: responseJson['Filtered'],
            elapsedServer: responseJson['Elapsed'].replace('0 s, ', ''),
            elapsed: elispe.value.toFixed(2) + 'ms',
        });

        justEnteredText.value = '';
    } else {
        alert(responseJson['Status']['Message']);
    }
}
</script>