49 lines
1.6 KiB
HTML
49 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>Chat Room</title>
|
|
</head>
|
|
<body>
|
|
<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">
|
|
{{ room_name|json_script:"room-name" }}
|
|
<script>
|
|
const roomName = JSON.parse(document.getElementById('room-name').textContent);
|
|
|
|
const chatSocket = new WebSocket(
|
|
'ws://'
|
|
+ window.location.host
|
|
+ '/ws/room/'
|
|
+ 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>
|
|
</body>
|
|
</html>
|