init client
commit
2127ad36a9
|
@ -0,0 +1,31 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>UserID: <span id="userid"></span> <button id="copy-userid">Copy</button></p>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<label>Receiver:</label>
|
||||||
|
<input id="receiver" type="text">
|
||||||
|
<button id="btn-clear-rec">Clear</button>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<label>Chat msg:</label>
|
||||||
|
<input id="msg" type="text">
|
||||||
|
<button id="btn-send">Send</button>
|
||||||
|
<button id="btn-clear">Clear</button>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,58 @@
|
||||||
|
window.onload = () => {
|
||||||
|
const msg = document.getElementById("msg")
|
||||||
|
const receiver = document.getElementById("receiver")
|
||||||
|
|
||||||
|
document.getElementById("btn-send").onclick = function() {
|
||||||
|
const chatMsg = {cmd: 2, rec: receiver.value, body: {msg: {"id": "1293", "body": msg.value}}}
|
||||||
|
|
||||||
|
ws.send(JSON.stringify(chatMsg))
|
||||||
|
|
||||||
|
console.log("Send:", chatMsg, msg.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("btn-clear").onclick = () => {
|
||||||
|
msg.value = ""
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("copy-userid").onclick = () => {
|
||||||
|
navigator.clipboard.writeText(document.getElementById("userid").innerHTML)
|
||||||
|
console.log("copied to clipboard")
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("btn-clear-rec").onclick = () => {
|
||||||
|
document.getElementById("receiver").value = ""
|
||||||
|
}
|
||||||
|
|
||||||
|
connectWS()
|
||||||
|
}
|
||||||
|
|
||||||
|
let ws = null
|
||||||
|
|
||||||
|
function connectWS() {
|
||||||
|
ws = new WebSocket("ws://localhost:3000/")
|
||||||
|
|
||||||
|
ws.onopen = () => {
|
||||||
|
console.info("ws open", document.getElementById("userid"))
|
||||||
|
}
|
||||||
|
|
||||||
|
ws.onmessage = (msg) => {
|
||||||
|
console.log("rec msg:", msg.data)
|
||||||
|
|
||||||
|
let data = JSON.parse(msg.data)
|
||||||
|
|
||||||
|
if (data["Cmd"] == 99999) {
|
||||||
|
document.getElementById("userid").innerHTML = data["Body"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ws.onclose = (e) => {
|
||||||
|
console.log("ws closed", e.reason)
|
||||||
|
document.getElementById("userid").innerHTML = ""
|
||||||
|
setTimeout(() => connectWS(), 1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
ws.onerror = (err) => {
|
||||||
|
console.warn("err:", err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue