64 lines
No EOL
1.9 KiB
HTML
64 lines
No EOL
1.9 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport"
|
||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title>Document</title>
|
||
</head>
|
||
<body>
|
||
<div class="flex flex-col items-center">
|
||
<h1>WebSocket Chat</h1>
|
||
<h2>Your ID: <span id="ws-id"></span></h2>
|
||
<form action="" onsubmit="sendMessage(event)">
|
||
<input class="bg-green-300" type="text" id="messageText" autocomplete="off"/>
|
||
<button>Send</button>
|
||
</form>
|
||
<ul id='messages'>
|
||
</ul>
|
||
<div>
|
||
<script>
|
||
async function getLastMessages() {
|
||
const url = 'http://localhost:8000/api/chat/last_messages'
|
||
const response = await fetch(url, {
|
||
method: 'GET'
|
||
})
|
||
return response.json()
|
||
}
|
||
|
||
getLastMessages()
|
||
.then(messages => {
|
||
appendMessage("Предыдущие 5 сообщений:")
|
||
messages.forEach(msg => {
|
||
appendMessage(msg.message)
|
||
})
|
||
appendMessage("\nНовые сообщения:")
|
||
})
|
||
|
||
function appendMessage(msg) {
|
||
let messages = document.getElementById('messages')
|
||
let message = document.createElement('li')
|
||
let content = document.createTextNode(msg)
|
||
message.appendChild(content)
|
||
messages.appendChild(message)
|
||
}
|
||
|
||
let chat_id = 2
|
||
document.querySelector("#ws-id").textContent = chat_id;
|
||
let ws = new WebSocket(`ws://localhost:8000/api/chat/ws/${chat_id}?user_id=2`);
|
||
ws.onmessage = function (event) {
|
||
appendMessage(event.data)
|
||
};
|
||
|
||
function sendMessage(event) {
|
||
let input = document.getElementById("messageText")
|
||
ws.send(input.value)
|
||
input.value = ''
|
||
event.preventDefault()
|
||
}
|
||
</script>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |