mirror of
https://github.com/RoboSats/robosats.git
synced 2024-12-14 03:16:24 +00:00
82 lines
3.0 KiB
HTML
82 lines
3.0 KiB
HTML
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<!-- Required meta tags -->
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
|
|
||
|
|
<!-- Bootstrap CSS -->
|
||
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
|
||
|
|
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
|
||
|
|
|
||
|
|
<title>Hello, world!</title>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="row d-flex justify-content-center">
|
||
|
|
<div class="col-6">
|
||
|
|
<form>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="exampleFormControlTextarea1" class="h4 pt-5">Chatroom</label>
|
||
|
|
<textarea class="form-control" id="chat-text" rows="10"></textarea><br>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<input class="form-control" id="input" type="text"></br>
|
||
|
|
</div>
|
||
|
|
<input class="btn btn-secondary btn-lg btn-block" id="submit" type="button" value="Send">
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{ request.user.username|json_script:"user_username" }}
|
||
|
|
{{ order_id|json_script:"order-id" }}
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const user_username = JSON.parse(document.getElementById('user_username').textContent);
|
||
|
|
document.querySelector('#submit').onclick = function (e) {
|
||
|
|
const messageInputDom = document.querySelector('#input');
|
||
|
|
const message = messageInputDom.value;
|
||
|
|
chatSocket.send(JSON.stringify({
|
||
|
|
'message': message,
|
||
|
|
'username': user_username,
|
||
|
|
}));
|
||
|
|
messageInputDom.value = '';
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
const orderId = JSON.parse(document.getElementById('order-id').textContent);
|
||
|
|
|
||
|
|
const chatSocket = new WebSocket(
|
||
|
|
'ws://' +
|
||
|
|
window.location.host +
|
||
|
|
'/ws/chat/' +
|
||
|
|
orderId +
|
||
|
|
'/'
|
||
|
|
);
|
||
|
|
|
||
|
|
chatSocket.onmessage = function (e) {
|
||
|
|
const data = JSON.parse(e.data);
|
||
|
|
console.log(data)
|
||
|
|
document.querySelector('#chat-text').value += (data.username + ': ' + data.message + '\n')
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!-- Optional JavaScript -->
|
||
|
|
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||
|
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
|
||
|
|
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
|
||
|
|
</script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
|
||
|
|
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
|
||
|
|
</script>
|
||
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
|
||
|
|
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|