Klagarge/SDI-WebSocket-Exercise
Archived
1
0
Fork 0
Code Issues Pull Requests Activity

finish lab

Browse Source
This commit is contained in:
Rémi Heredero 2024-04-11 19:19:01 +02:00
parent 3b1f094054
commit 367c010555
Signed by: Klagarge
GPG Key ID: 3CBAC2C6CD1E8807
4 changed files with 117 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
chat.html
View File

@ -3,14 +3,21 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>WebSocket Chat exercise</title> <title>WebSocket Chat exercise</title>
<script> <style>
#chatlog {
</script> width: 500px;
height: 500px;
font: 10pt Ubuntu;
}
</style>
</head> </head>
<body> <body>
<textarea id="chatlog" readonly></textarea><br/> <textarea id="chatlog" readonly></textarea><br/>
<input id="msg" type="text" /> <input id="msg" type="text" />
<button type="submit" id="sendButton">Send!</button> <button type="submit" id="sendButton">Send!</button>
<button type="submit" id="closeButton">End</button> <button type="submit" id="closeButton">End</button>
<script src="jquery-3.3.1.js"></script>
<script src="chat.js"></script>
</body> </body>
</html> </html>

47
chat.js Normal file
View File

@ -0,0 +1,47 @@
$(document).ready(function() {
var socket;
var logElement = document.getElementById('chatlog');
var sendButton = document.getElementById('sendButton');
var closeButton = document.getElementById('closeButton');
function logMessage(message) {
logElement.value += message + '\n';
}
function connect() {
socket = new WebSocket("ws://webex.sdi.hevs.ch/chat");
socket.onopen = function() {
logMessage("Connected.");
sendButton.removeAttribute("disabled");
closeButton.textContent = "End";
};
socket.onmessage = function(msg) {
logMessage(msg.data);
};
socket.onclose = function() {
logMessage("Disconnected.");
sendButton.setAttribute("disabled", "true");
closeButton.textContent = "Reconnect";
};
socket.onerror = function() {
logMessage("Error.");
};
}
connect();
document.getElementById("sendButton").onclick = function() {
var msg = document.getElementById("msg").value;
socket.send(msg);
document.getElementById("msg").value = "";
};
document.getElementById("closeButton").onclick = function() {
if (socket.readyState === WebSocket.OPEN) {
socket.close();
} else {
connect();
}
};
});

15
tempbat.html
View File

@ -3,16 +3,11 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Websocket Server EX</title> <title>Websocket Server EX</title>
<script src="jquery-3.3.1.js"></script>
<script>
</script>
<style> <style>
#log #log {
{ width: 500px;
width: 200px;
height: 500px; height: 500px;
font: courier; font: 10pt Ubuntu;
font-size: 8;
background:lightblue; background:lightblue;
} }
</style> </style>
@ -22,5 +17,9 @@
<button id="temp">Temp</button> <button id="temp">Temp</button>
<button id="bat">Bat</button> <button id="bat">Bat</button>
<button id="discon">Disconnect</button> <button id="discon">Disconnect</button>
<script src="jquery-3.3.1.js"></script>
<script src="tempbat.js"></script>
</body> </body>
</html> </html>

53
tempbat.js Normal file
View File

@ -0,0 +1,53 @@
$(document).ready(function() {
var socket;
var logElement = document.getElementById('log');
var tempButton = document.getElementById('temp');
var batButton = document.getElementById('bat');
var disconButton = document.getElementById('discon');
function logMessage(message) {
logElement.value += message + '\n';
}
function connect() {
socket = new WebSocket("ws://webex.sdi.hevs.ch/temp");
socket.onopen = function() {
logMessage('Connection open');
tempButton.removeAttribute('disabled');
batButton.removeAttribute('disabled');
disconButton.textContent = 'Disconnect';
};
socket.onclose = function() {
logMessage('Connection close');
tempButton.setAttribute('disabled', 'true');
batButton.setAttribute('disabled', 'true');
disconButton.textContent = 'Reconnect';
};
socket.onerror = function(error) {
logMessage('Error: ' + error.message);
};
socket.onmessage = function(msg) {
logMessage(msg.data);
};
}
connect();
document.getElementById('temp').addEventListener('click', function() {
socket.send("temp");
});
document.getElementById('bat').addEventListener('click', function() {
socket.send("bat");
});
document.getElementById('discon').addEventListener('click', function() {
if (socket.readyState === WebSocket.OPEN) {
socket.close();
} else {
connect();
}
});
});