Compare commits
No commits in common. "b82a0f32c7fcacb886f7d2aa4218e77f465e14ab" and "a3a6a52c8714ec3d1b637933c70a4febc92ab7a7" have entirely different histories.
b82a0f32c7
...
a3a6a52c87
2 changed files with 34 additions and 35 deletions
|
@ -76,7 +76,7 @@ async fn main() {
|
||||||
tracing_subscriber::registry()
|
tracing_subscriber::registry()
|
||||||
.with(
|
.with(
|
||||||
tracing_subscriber::EnvFilter::try_from_default_env()
|
tracing_subscriber::EnvFilter::try_from_default_env()
|
||||||
.unwrap_or_else(|_| "cards=trace".into()),
|
.unwrap_or_else(|_| "example_chat=trace".into()),
|
||||||
)
|
)
|
||||||
.with(tracing_subscriber::fmt::layer())
|
.with(tracing_subscriber::fmt::layer())
|
||||||
.init();
|
.init();
|
||||||
|
|
|
@ -12,46 +12,45 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Cards For Humanity Test Client</h1>
|
<h1>Cards For Humanity Test Client</h1>
|
||||||
<div id="status">
|
<input id="username" style="display:block; width:100px; box-sizing: border-box" type="text" placeholder="username">
|
||||||
<p><em>Disconnected...</em></p>
|
<button id="join-chat" type="button">Join Chat</button>
|
||||||
</div>
|
<textarea id="chat" style="display:block; width:600px; height:400px; box-sizing: border-box" cols="30" rows="10"></textarea>
|
||||||
<form id="login" onsubmit="loginSubmit();return false">
|
<input id="input" style="display:block; width:600px; box-sizing: border-box" type="text" placeholder="chat">
|
||||||
<input id="username" style="display:block; width:100px; box-sizing: border-box" type="text" placeholder="username">
|
|
||||||
<button id="join-chat" type="submit">Join Chat</button>
|
|
||||||
</form>
|
|
||||||
<form id="chat" onsubmit="chatSubmit();return false">
|
|
||||||
<textarea id="chat-history" style="display:block; width:600px; height:400px; box-sizing: border-box" cols="30" rows="10"></textarea>
|
|
||||||
<input id="chat-input" style="display:block; width:600px; box-sizing: border-box" type="text" placeholder="chat">
|
|
||||||
</form>
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
websocket = new WebSocket("ws://localhost:3030/websocket");
|
const username = document.querySelector("#username");
|
||||||
|
const join_btn = document.querySelector("#join-chat");
|
||||||
|
const textarea = document.querySelector("#chat");
|
||||||
|
const input = document.querySelector("#input");
|
||||||
|
|
||||||
function loginSubmit() {
|
join_btn.addEventListener("click", function(e) {
|
||||||
document.getElementById("join-chat").disabled = true;
|
this.disabled = true;
|
||||||
websocket.send(username.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
websocket.onopen = function() {
|
const websocket = new WebSocket("ws://localhost:3000/websocket");
|
||||||
console.log("connection opened");
|
|
||||||
document.getElementById("status").innerHTML = '<p><em>Connected!</em></p>';
|
|
||||||
}
|
|
||||||
|
|
||||||
websocket.onclose = function() {
|
websocket.onopen = function() {
|
||||||
console.log("connection closed");
|
console.log("connection opened");
|
||||||
// document.getElementById("join-chat").disabled = false;
|
websocket.send(username.value);
|
||||||
document.getElementById("status").innerHTML = '<p><em>Disconnected...</em></p>';
|
}
|
||||||
}
|
|
||||||
|
|
||||||
websocket.onmessage = function(e) {
|
const btn = this;
|
||||||
console.log("received message: "+e.data);
|
|
||||||
document.getElementById("chat-history").value += e.data+"\r\n";
|
|
||||||
}
|
|
||||||
|
|
||||||
function chatSubmit() {
|
websocket.onclose = function() {
|
||||||
let input = document.getElementById("chat-input");
|
console.log("connection closed");
|
||||||
websocket.send(input.value);
|
btn.disabled = false;
|
||||||
input.value = "";
|
}
|
||||||
};
|
|
||||||
|
websocket.onmessage = function(e) {
|
||||||
|
console.log("received message: "+e.data);
|
||||||
|
textarea.value += e.data+"\r\n";
|
||||||
|
}
|
||||||
|
|
||||||
|
input.onkeydown = function(e) {
|
||||||
|
if (e.key == "Enter") {
|
||||||
|
websocket.send(input.value);
|
||||||
|
input.value = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Add table
Reference in a new issue