56 lines
No EOL
1.8 KiB
HTML
56 lines
No EOL
1.8 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block content %}
|
||
<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/get_last_message/2'
|
||
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/chat/ws/${chat_id}?user_id=1`);
|
||
ws.onmessage = function (event) {
|
||
const data = JSON.parse(event.data)
|
||
appendMessage(data.message);
|
||
console.log(data)
|
||
};
|
||
|
||
function sendMessage(event) {
|
||
let input = document.getElementById("messageText")
|
||
ws.send(JSON.stringify({'message':input.value, "image_url": 'https://images.black-phoenix.ru/static/images/avatars/0qQOzJcY5lOuuA1u_avatar.png'}))
|
||
input.value = ''
|
||
event.preventDefault()
|
||
}
|
||
</script>
|
||
{% endblock %} |