Added ASGI server for websocket using the sample chat application as starting point
This commit is contained in:
47
booker/templates/booker/scanner.html
Normal file
47
booker/templates/booker/scanner.html
Normal file
@@ -0,0 +1,47 @@
|
||||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Scanner: {{ scanner_id }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<textarea id="chat-log" cols="100" rows="20"></textarea><br>
|
||||
<input id="chat-message-input" type="text" size="100"><br>
|
||||
<input id="chat-message-submit" type="button" value="Send">
|
||||
{{ scanner_id|json_script:"room-name" }}
|
||||
<script>
|
||||
const roomName = JSON.parse(document.getElementById('room-name').textContent);
|
||||
|
||||
const chatSocket = new WebSocket(
|
||||
'ws://'
|
||||
+ window.location.host
|
||||
+ '/ws/scannerdata/'
|
||||
+ roomName
|
||||
+ '/'
|
||||
);
|
||||
|
||||
chatSocket.onmessage = function(e) {
|
||||
const data = JSON.parse(e.data);
|
||||
document.querySelector('#chat-log').value += (data.message + '\n');
|
||||
};
|
||||
|
||||
chatSocket.onclose = function(e) {
|
||||
console.error('Chat socket closed unexpectedly');
|
||||
};
|
||||
|
||||
document.querySelector('#chat-message-input').focus();
|
||||
document.querySelector('#chat-message-input').onkeyup = function(e) {
|
||||
if (e.keyCode === 13) { // enter, return
|
||||
document.querySelector('#chat-message-submit').click();
|
||||
}
|
||||
};
|
||||
|
||||
document.querySelector('#chat-message-submit').onclick = function(e) {
|
||||
const messageInputDom = document.querySelector('#chat-message-input');
|
||||
const message = messageInputDom.value;
|
||||
chatSocket.send(JSON.stringify({
|
||||
'message': message
|
||||
}));
|
||||
messageInputDom.value = '';
|
||||
};
|
||||
</script>
|
||||
{% endblock %}
|
Reference in New Issue
Block a user