188 lines
6.9 KiB
Vue
188 lines
6.9 KiB
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>
|