sem/5g_drone_ROS2
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

move websockets to html

Browse Source
This commit is contained in:
Sem van der Hoeven
2023-05-31 20:30:24 +02:00
parent 2839e0cfcf
commit 209828d35a
2 changed files with 73 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
api/index.js
View File

@@ -88,7 +88,6 @@ var connect_to_api = function () {
} }
} catch (error) { } catch (error) {
console.log("could not parse as json, must be bytes"); console.log("could not parse as json, must be bytes");
logSizeInBytes("image", message.data);
} }
}); });

75
api/views/index.ejs
View File

@@ -114,8 +114,7 @@
xhr.send(); xhr.send();
} }
function send_move_request(data) function send_move_request(data) {
{
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open("POST", "/move", true); xhr.open("POST", "/move", true);
xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Content-Type", "application/json");
@@ -184,30 +183,60 @@
} }
function connect() { function connect() {
var received = false;
var xhr = new XMLHttpRequest();
xhr.open("GET", "/connect", true);
xhr.onreadystatechange = function () { console.log("Connecting to API");
if (this.status == 200) { var ws = new WebSocket("ws://10.100.0.40:9001/");
console.log(this.responseText);
if (this.responseText.length > 0) { ws.on("open", function open() {
var status = JSON.parse(this.responseText); console.log("connected with websockets to API!");
// console.log(status) });
document.getElementById("connectedlabel").innerHTML = "Connected: true";
document.getElementById("connectbutton").disabled = true; ws.on("message", function message(message) {
} try {
var msg = JSON.parse(message);
if (msg.type != "IMAGE") {
send_events_to_clients(msg);
} else { } else {
console.log("error"); console.log("got image");
document.getElementById("connectedlabel").innerHTML = "Connected: false"; }
if (!received) } catch (error) {
{ console.log("could not parse as json, must be bytes");
alert("Could not connect to API!");
received = true;
} }
} });
};
xhr.send(); ws.on("error", function error(err) {
console.log("there was an error");
console.error("error: " + err);
received_error = true;
});
// var received = false;
// var xhr = new XMLHttpRequest();
// xhr.open("GET", "/connect", true);
// xhr.onreadystatechange = function () {
// if (this.status == 200) {
// console.log(this.responseText);
// if (this.responseText.length > 0) {
// var status = JSON.parse(this.responseText);
// // console.log(status)
// document.getElementById("connectedlabel").innerHTML = "Connected: true";
// document.getElementById("connectbutton").disabled = true;
// }
// } else {
// console.log("error");
// document.getElementById("connectedlabel").innerHTML = "Connected: false";
// if (!received)
// {
// alert("Could not connect to API!");
// received = true;
// }
// }
// };
// xhr.send();
} }
// window onload function die elke seconde een request doet om te kijken of er al nieuwe foto is // window onload function die elke seconde een request doet om te kijken of er al nieuwe foto is
// function die elke 100 ms een request doet om de status te updaten // function die elke 100 ms een request doet om de status te updaten