Hugging Face's logo

Spaces:
eg-art
/
up_fail
Running

App Files Community
DmitrMakeev commited on
Commit
b06f025
·
verified ·
1 Parent(s): 2a38666

Create chat_template.html

Browse files
Files changed (1) hide show
  1. chat_template.html +101 -0
chat_template.html ADDED
@@ -0,0 +1,101 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Online Chat</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ }
11
+ .chat-box {
12
+ height: 300px;
13
+ overflow-y: scroll;
14
+ border: 1px solid #ccc;
15
+ padding: 10px;
16
+ }
17
+ </style>
18
+ </head>
19
+ <body>
20
+ <h1>🧊 Добро пожаловать в онлайн чат!</h1>
21
+ <div class="chat-box" id="chat-box"></div>
22
+ <input type="text" id="nickname" placeholder="Ваше имя">
23
+ <button onclick="joinChat()">Войти в чат</button>
24
+ <input type="text" id="message" placeholder="Текст сообщения ...">
25
+ <button onclick="sendMessage()">Отправить</button>
26
+ <button onclick="leaveChat()">Выйти из чата</button>
27
+
28
+ <script>
29
+ let nickname = '';
30
+ let last_idx = 0;
31
+
32
+ async function joinChat() {
33
+ nickname = document.getElementById('nickname').value;
34
+ const response = await fetch('/chat_api', {
35
+ method: 'POST',
36
+ headers: {
37
+ 'Content-Type': 'application/json'
38
+ },
39
+ body: JSON.stringify({action: 'join', nickname: nickname})
40
+ });
41
+ const data = await response.json();
42
+ if (data.status === 'success') {
43
+ document.getElementById('chat-box').innerHTML += `<p>${data.message}</p>`;
44
+ refreshChat();
45
+ } else {
46
+ alert(data.message);
47
+ }
48
+ }
49
+
50
+ async function sendMessage() {
51
+ const msg = document.getElementById('message').value;
52
+ const response = await fetch('/chat_api', {
53
+ method: 'POST',
54
+ headers: {
55
+ 'Content-Type': 'application/json'
56
+ },
57
+ body: JSON.stringify({action: 'send', nickname: nickname, msg: msg})
58
+ });
59
+ const data = await response.json();
60
+ if (data.status === 'success') {
61
+ document.getElementById('message').value = '';
62
+ refreshChat();
63
+ }
64
+ }
65
+
66
+ async function leaveChat() {
67
+ const response = await fetch('/chat_api', {
68
+ method: 'POST',
69
+ headers: {
70
+ 'Content-Type': 'application/json'
71
+ },
72
+ body: JSON.stringify({action: 'leave', nickname: nickname})
73
+ });
74
+ const data = await response.json();
75
+ if (data.status === 'success') {
76
+ document.getElementById('chat-box').innerHTML += `<p>${data.message}</p>`;
77
+ nickname = '';
78
+ refreshChat();
79
+ }
80
+ }
81
+
82
+ async function refreshChat() {
83
+ const response = await fetch('/chat_api', {
84
+ method: 'POST',
85
+ headers: {
86
+ 'Content-Type': 'application/json'
87
+ },
88
+ body: JSON.stringify({action: 'refresh', last_idx: last_idx})
89
+ });
90
+ const data = await response.json();
91
+ if (data.status === 'success') {
92
+ data.messages.forEach(msg => {
93
+ document.getElementById('chat-box').innerHTML += `<p>${msg[0]}: ${msg[1]}</p>`;
94
+ });
95
+ last_idx = data.last_idx;
96
+ }
97
+ setTimeout(refreshChat, 1000);
98
+ }
99
+ </script>
100
+ </body>
101
+ </html>