mirror of
https://github.com/metafy-social/python-scripts.git
synced 2024-11-30 23:41:12 +00:00
53 lines
2.1 KiB
HTML
53 lines
2.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<body>
|
||
|
|
<center><h1>Hello , Welcome to my chat site ! {{request.user}}</h1></center>
|
||
|
|
<br>
|
||
|
|
{% if request.user.is_authenticated %}
|
||
|
|
<center> Logout the chat Page <a href = "{% url 'logout-user' %}">Logout</a></center>
|
||
|
|
{% endif %}
|
||
|
|
<div
|
||
|
|
class="chat__item__container"
|
||
|
|
id="id_chat_item_container"
|
||
|
|
style="font-size: 20px"
|
||
|
|
>
|
||
|
|
<br />
|
||
|
|
<input type="text" id="id_message_send_input" />
|
||
|
|
<button type="submit" id="id_message_send_button">Send Message</button>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
const chatSocket = new WebSocket("ws://" + window.location.host + "/");
|
||
|
|
chatSocket.onopen = function (e) {
|
||
|
|
console.log("The connection was setup successfully !");
|
||
|
|
};
|
||
|
|
chatSocket.onclose = function (e) {
|
||
|
|
console.log("Something unexpected happened !");
|
||
|
|
};
|
||
|
|
document.querySelector("#id_message_send_input").focus();
|
||
|
|
document.querySelector("#id_message_send_input").onkeyup = function (e) {
|
||
|
|
if (e.keyCode == 13) {
|
||
|
|
document.querySelector("#id_message_send_button").click();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
document.querySelector("#id_message_send_button").onclick = function (e) {
|
||
|
|
var messageInput = document.querySelector(
|
||
|
|
"#id_message_send_input"
|
||
|
|
).value;
|
||
|
|
chatSocket.send(JSON.stringify({ message: messageInput, username : "{{request.user.username}}"}));
|
||
|
|
};
|
||
|
|
chatSocket.onmessage = function (e) {
|
||
|
|
const data = JSON.parse(e.data);
|
||
|
|
var div = document.createElement("div");
|
||
|
|
div.innerHTML = data.username + " : " + data.message;
|
||
|
|
document.querySelector("#id_message_send_input").value = "";
|
||
|
|
document.querySelector("#id_chat_item_container").appendChild(div);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
### The URL is in Django format, this is Django syntax to map to a URL. We will create a URL named “logout-user”,
|
||
|
|
then Django will map this URL name to the URL from the template. Django provides a few pythonic syntaxes to deal
|
||
|
|
with the control statement. Here we have provided {% if request.user.is_authenticated %} line in the HTML, this is
|
||
|
|
given by Django which ensures that if there is any user who is logged in, then only displays the logout link.
|