Изменил chat.html
This commit is contained in:
parent
f3495c28c0
commit
1e9e604e70
1 changed files with 0 additions and 54 deletions
|
@ -1,54 +0,0 @@
|
||||||
{% 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/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/chat/ws/${chat_id}?user_id=1`);
|
|
||||||
ws.onmessage = function (event) {
|
|
||||||
appendMessage(event.data)
|
|
||||||
};
|
|
||||||
|
|
||||||
function sendMessage(event) {
|
|
||||||
let input = document.getElementById("messageText")
|
|
||||||
ws.send(input.value)
|
|
||||||
input.value = ''
|
|
||||||
event.preventDefault()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
|
Loading…
Add table
Reference in a new issue