From dc75d55937541113f4a22e14b5a14af549fe81f9 Mon Sep 17 00:00:00 2001 From: jrtechs Date: Sat, 9 Jun 2018 09:15:31 -0400 Subject: [PATCH] Improved to speed at which the graph is rendered on the client side. --- .../java/net/jrtechs/www/server/Client.java | 42 +++++-- .../java/net/jrtechs/www/server/Server.java | 14 ++- website/graph.html | 118 ++++++++++++------ 3 files changed, 122 insertions(+), 52 deletions(-) diff --git a/src/main/java/net/jrtechs/www/server/Client.java b/src/main/java/net/jrtechs/www/server/Client.java index 95f1464..1bd52c0 100644 --- a/src/main/java/net/jrtechs/www/server/Client.java +++ b/src/main/java/net/jrtechs/www/server/Client.java @@ -4,6 +4,7 @@ import net.jrtechs.www.graphDB.SteamGraph; import org.java_websocket.WebSocket; import org.json.JSONObject; +import java.util.ArrayList; import java.util.List; @@ -28,6 +29,9 @@ public class Client extends Thread /** How many layers of friends we are traversing */ private int debth; + /** JSONObjects to send the client */ + private List queue; + private int type; @@ -44,6 +48,7 @@ public class Client extends Thread this.type = type; this.baseId = id; this.debth = 1; + this.queue = new ArrayList<>(); } @@ -116,14 +121,31 @@ public class Client extends Thread */ private void sendJSON(JSONObject request) { - this.client.send(request.toString()); - try + this.queue.add(request); + } + + + /** + * Sends the next object to the client + */ + public void sendNextRequest() + { + while(this.queue.isEmpty()) { - Thread.sleep(50); //prevents DDOSing the client + try + { + Thread.sleep(500); + } + catch (Exception e) + { + e.printStackTrace(); + } } - catch (Exception e) + JSONObject send =queue.remove(0); + this.client.send(send.toString()); + if(send.getInt("action") == 3) { - e.printStackTrace(); + this.client.close(); } } @@ -133,7 +155,8 @@ public class Client extends Thread * * @param p */ - private void sendPlayerToClient(Player p, int x, int y, int gen, int multiplier) + private void sendPlayerToClient(Player p, int x, int y, + int gen, int multiplier) { if(gen == 1) { @@ -187,10 +210,12 @@ public class Client extends Thread for(Player f : b.fetchFriends()) { f = this.graph.getPlayer(f.getId()); - this.sendPlayerToClient(f, (int)(300 + Math.cos(currentStep) * 300), (int)(243 + Math.sin(currentStep) * 300) ,2, 300); + this.sendPlayerToClient(f, (int)(300 + Math.cos(currentStep) * 300), + (int)(243 + Math.sin(currentStep) * 300) ,2, 300); currentStep += radianStep; } + this.sendFinished(); } @@ -220,6 +245,7 @@ public class Client extends Thread } } } + this.sendFinished(); } @@ -237,7 +263,5 @@ public class Client extends Thread { friendsWithFriends(); } - this.sendFinished(); - this.client.close(); } } \ No newline at end of file diff --git a/src/main/java/net/jrtechs/www/server/Server.java b/src/main/java/net/jrtechs/www/server/Server.java index badf224..cf2057c 100644 --- a/src/main/java/net/jrtechs/www/server/Server.java +++ b/src/main/java/net/jrtechs/www/server/Server.java @@ -47,7 +47,6 @@ public class Server extends WebSocketServer public void onClose(WebSocket conn, int code, String reason, boolean remote) { this.removeClient(conn); - System.out.println("Closed connection to " + conn.getRemoteSocketAddress().getAddress().getHostAddress()); } @@ -55,10 +54,7 @@ public class Server extends WebSocketServer @Override public void onMessage(WebSocket conn, String message) { - System.out.println("Message from client: " + message); - JSONObject object = new JSONObject(message); - System.out.println(message); if(object.has("graph")) { @@ -76,6 +72,16 @@ public class Server extends WebSocketServer newClient.start(); } + else if(object.has("go")) + { + for(Client client: clients) + { + if(client.getSocket() == conn) + { + client.sendNextRequest(); + } + } + } } diff --git a/website/graph.html b/website/graph.html index 48f00b5..fa68d5d 100644 --- a/website/graph.html +++ b/website/graph.html @@ -121,14 +121,6 @@ edges: [] }, colors = [ - // '#617db4', - // '#668f3c', - // '#c6583e', - // '#b956af', - // '#ac80a0', - // '#c2cae8', - // '#8380b6', - // '#738290' '#4281a4', '#5da9e9', '#003f91', @@ -136,7 +128,10 @@ '#6d326d' ]; - // Instantiate sigma: + + /** + * Creates a new sigma graph + */ s = new sigma({ graph: g, settings: { @@ -144,6 +139,10 @@ } }); + + /** + * Sets the sigma graph to render using svg + */ s.addRenderer({ id: 'main', type: 'svg', @@ -151,16 +150,37 @@ freeStyle: true }); - getData = getUrlVars(); + /** + * Simple function to get the get data from the url + */ + function getUrlVars() + { + var vars = {}; + window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, + function(m,key,value) { + vars[key] = value; + }); + return vars; + } + + + /** Web socket to communicate with the steam friend java server */ connection = new WebSocket('ws://localhost:4444'); + /** + * When the web socket is opened, this function + * fetches the get data and requests the server + * to start giving it graph information + */ connection.onopen = function () { - console.log('Connected!'); + var getData = getUrlVars(); if(getData["id"] != undefined && getData["id"] != "") { - connection.send("{id:'" + getData["id"] + "', graph:" + getData["graph"] + "}"); + connection.send("{id:'" + getData["id"] + "', graph:" + + getData["graph"] + "}"); + connection.send("{go:1}"); } else { @@ -169,21 +189,22 @@ }; - // Log errors + /** + * Logs any errors with the web socket -- usually error + * connecting to the server + * @param error + */ connection.onerror = function (error) { console.log('WebSocket Error ' + error); }; - function getUrlVars() - { - var vars = {}; - var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { - vars[key] = value; - }); - return vars; - } + /** + * Helper function to add a new node to the sigma graph + * + * @param request + */ function addNodeToGraph(request) { if(s.graph.nodes(request.id) == undefined) @@ -200,7 +221,12 @@ } } - + /** + * Helper function to add an edge between two nodes on the + * sigma graph + * + * @param request + */ function addEdgeToGraph(request) { s.graph.addEdge({ @@ -213,25 +239,41 @@ } - // Log messages from the server + /** + * Parses any events from the server + * action 1: add a new node to the graph + * action 2: add a new edge to the graph + * action 3: start applying forces to the graph + * + * @param e + */ connection.onmessage = function (e) { var request = JSON.parse(e.data); if(request.action == 1) { - addNodeToGraph(request); + setTimeout(function() + { + addNodeToGraph(request); + connection.send("{go:1}"); + }, 0); + } else if(request.action == 2) { - addEdgeToGraph(request); + setTimeout(function() + { + addEdgeToGraph(request); + connection.send("{go:1}"); + }, 0); + } - else if(request.action == 3) - { - s.startForceAtlas2({worker: true, barnesHutOptimize: false, scalingRatio: 0.5, slowDown: 5, gravity: 20}); + else if(request.action == 3) { + s.startForceAtlas2({worker: true, barnesHutOptimize: false, + scalingRatio: 3, slowDown: 5, gravity: 20}); - setTimeout(function () - { + setTimeout(function () { s.stopForceAtlas2(); }, 30000); } @@ -239,13 +281,11 @@ - - - - //jquery stuff for hiding and displaying users when clicked + /** + * jquery stuff for hiding and displaying users when clicked + */ s.bind('clickNode doubleClickNode rightClickNode', function(e) { - console.log(e.type, e); $('.sigma-node, .sigma-edge').each(function() { mute(this); @@ -266,18 +306,18 @@ function mute(node) { if (!~node.getAttribute('class').search(/muted/)) - node.setAttributeNS(null, 'class', node.getAttribute('class') + ' muted'); + node.setAttributeNS(null, 'class', + node.getAttribute('class') + ' muted'); } function unmute(node) { - node.setAttributeNS(null, 'class', node.getAttribute('class').replace(/(\s|^)muted(\s|$)/g, '$2')); + node.setAttributeNS(null, 'class', + node.getAttribute('class').replace(/(\s|^)muted(\s|$)/g, '$2')); } $('.sigma-node').click(function() { - - console.log("click"); $('.sigma-node, .sigma-edge').each(function() { mute(this);