179 lines
6.1 KiB
HTML
179 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>NoSys</title>
|
|
|
|
<style>
|
|
body{
|
|
background-color: #2c2c2c;
|
|
color: white;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
const noSysApiUrl = "http://127.0.0.1:5050/noSys";
|
|
var connectionClicked = null;
|
|
|
|
function connectAddress(){
|
|
const ip = document.getElementById("ip").value;
|
|
const port = document.getElementById("port").value;
|
|
|
|
const data = {"user": "A4DZSk+TlR+4w39MbiIAQbti+N0H1QlJEhRH2DI6Iubj", "address": {"ip": ip,"port": port}};
|
|
const requestOptions = {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json',},
|
|
body: JSON.stringify(data),
|
|
};
|
|
|
|
fetch(noSysApiUrl+"/peers", requestOptions)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
listConnections();
|
|
})
|
|
.catch(error => {
|
|
console.error
|
|
|
|
('Error:', error);
|
|
});
|
|
}
|
|
|
|
function sendMessage(){
|
|
messageElement = document.getElementById("message")
|
|
message = messageElement.value;
|
|
if (connectionClicked && message){
|
|
const data = {"message":{"action":"test", "data":message},"toModule": {"package": "noSys","module": "noSys"},"encrypted": true};
|
|
const requestOptions = {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(data),
|
|
};
|
|
|
|
fetch(noSysApiUrl+"/peers/"+connectionClicked, requestOptions)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log(data);
|
|
addMessage(connectionClicked, message, false)
|
|
messageElement.value = ""
|
|
})
|
|
.catch(error => {
|
|
console.error
|
|
|
|
('Error:', error);
|
|
});
|
|
}
|
|
}
|
|
|
|
function setConnectionClicked(id, address, bindAddress){
|
|
connectionClicked = id;
|
|
document.getElementById("messageTo").value = address;
|
|
document.getElementById("messageFrom").value = bindAddress;
|
|
}
|
|
|
|
function listConnections(){
|
|
const requestOptions = {
|
|
method: 'GET',
|
|
headers: {}
|
|
};
|
|
fetch(noSysApiUrl+"/peers", requestOptions)
|
|
.then(response => {
|
|
if (!response.ok){
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
uList = document.getElementById("ulConnections");
|
|
uList.replaceChildren();
|
|
data.forEach((element, index) => {
|
|
console.log(element);
|
|
var li = document.createElement("li");
|
|
li.setAttribute("id", element.id);
|
|
li.addEventListener("click", function(){
|
|
setConnectionClicked(this.id, element.address, element.bindAddress);
|
|
});
|
|
li.appendChild(document.createTextNode("ID:"+element.id+" | Connected to:"+element.address+" | Address bound:"+element.bindAddress+" | User:"+element.user+" | Status:"+element.status));
|
|
uList.appendChild(li);
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
});
|
|
}
|
|
|
|
function addMessage(connectionId, message, from){
|
|
uList = document.getElementById("ulMessages");
|
|
var li = document.createElement("li");
|
|
const direction = from ? "FROM" : "TO";
|
|
text = " "+direction+" ConnectionId: "+connectionId+"\n"+message+"\n\n";
|
|
li.appendChild(document.createTextNode(text));
|
|
uList.appendChild(li);
|
|
}
|
|
|
|
</script>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
var socket = io(noSysApiUrl);
|
|
socket.on('connect', function() {
|
|
console.log('Connected to server');
|
|
});
|
|
socket.on('message', function(msg) {
|
|
console.log('Message received: ' + msg);
|
|
});
|
|
|
|
socket.on('test', function(msg) {
|
|
console.log(msg);
|
|
addMessage(msg.connectionId, msg.message, true)
|
|
});
|
|
socket.on('disconnect', function() {
|
|
console.log('Disconnected from server');
|
|
});
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<input id="ip" type="text" value="n0sys.duckdns.org">
|
|
<input id="port" type="text" value="30331">
|
|
<button onclick="connectAddress()">Connect</button>
|
|
</div>
|
|
|
|
<div>
|
|
<input id="message" type="text" value="">
|
|
<button onclick="sendMessage()">Send message</button>
|
|
<label>TO</label>
|
|
<input id="messageTo" type="text" value="">
|
|
<label>FROM</label>
|
|
<input id="messageFrom" type="text" value="">
|
|
</div>
|
|
|
|
<pre>
|
|
<ul id="ulMessages">
|
|
</ul>
|
|
</pre>
|
|
|
|
<div>
|
|
<ul id="ulConnections">
|
|
</ul>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
<script>
|
|
listConnections()
|
|
</script>
|
|
</html> |