Browse Source

Improved to speed at which the graph is rendered on the client side.

pull/8/head
jrtechs 6 years ago
parent
commit
dc75d55937
3 changed files with 122 additions and 52 deletions
  1. +33
    -9
      src/main/java/net/jrtechs/www/server/Client.java
  2. +10
    -4
      src/main/java/net/jrtechs/www/server/Server.java
  3. +79
    -39
      website/graph.html

+ 33
- 9
src/main/java/net/jrtechs/www/server/Client.java View File

@ -4,6 +4,7 @@ import net.jrtechs.www.graphDB.SteamGraph;
import org.java_websocket.WebSocket; import org.java_websocket.WebSocket;
import org.json.JSONObject; import org.json.JSONObject;
import java.util.ArrayList;
import java.util.List; import java.util.List;
@ -28,6 +29,9 @@ public class Client extends Thread
/** How many layers of friends we are traversing */ /** How many layers of friends we are traversing */
private int debth; private int debth;
/** JSONObjects to send the client */
private List<JSONObject> queue;
private int type; private int type;
@ -44,6 +48,7 @@ public class Client extends Thread
this.type = type; this.type = type;
this.baseId = id; this.baseId = id;
this.debth = 1; this.debth = 1;
this.queue = new ArrayList<>();
} }
@ -116,14 +121,31 @@ public class Client extends Thread
*/ */
private void sendJSON(JSONObject request) 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 * @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) if(gen == 1)
{ {
@ -187,10 +210,12 @@ public class Client extends Thread
for(Player f : b.fetchFriends()) for(Player f : b.fetchFriends())
{ {
f = this.graph.getPlayer(f.getId()); 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; 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(); friendsWithFriends();
} }
this.sendFinished();
this.client.close();
} }
} }

+ 10
- 4
src/main/java/net/jrtechs/www/server/Server.java View File

@ -47,7 +47,6 @@ public class Server extends WebSocketServer
public void onClose(WebSocket conn, int code, String reason, boolean remote) public void onClose(WebSocket conn, int code, String reason, boolean remote)
{ {
this.removeClient(conn); this.removeClient(conn);
System.out.println("Closed connection to " + System.out.println("Closed connection to " +
conn.getRemoteSocketAddress().getAddress().getHostAddress()); conn.getRemoteSocketAddress().getAddress().getHostAddress());
} }
@ -55,10 +54,7 @@ public class Server extends WebSocketServer
@Override @Override
public void onMessage(WebSocket conn, String message) public void onMessage(WebSocket conn, String message)
{ {
System.out.println("Message from client: " + message);
JSONObject object = new JSONObject(message); JSONObject object = new JSONObject(message);
System.out.println(message);
if(object.has("graph")) if(object.has("graph"))
{ {
@ -76,6 +72,16 @@ public class Server extends WebSocketServer
newClient.start(); newClient.start();
} }
else if(object.has("go"))
{
for(Client client: clients)
{
if(client.getSocket() == conn)
{
client.sendNextRequest();
}
}
}
} }

+ 79
- 39
website/graph.html View File

@ -121,14 +121,6 @@
edges: [] edges: []
}, },
colors = [ colors = [
// '#617db4',
// '#668f3c',
// '#c6583e',
// '#b956af',
// '#ac80a0',
// '#c2cae8',
// '#8380b6',
// '#738290'
'#4281a4', '#4281a4',
'#5da9e9', '#5da9e9',
'#003f91', '#003f91',
@ -136,7 +128,10 @@
'#6d326d' '#6d326d'
]; ];
// Instantiate sigma:
/**
* Creates a new sigma graph
*/
s = new sigma({ s = new sigma({
graph: g, graph: g,
settings: { settings: {
@ -144,6 +139,10 @@
} }
}); });
/**
* Sets the sigma graph to render using svg
*/
s.addRenderer({ s.addRenderer({
id: 'main', id: 'main',
type: 'svg', type: 'svg',
@ -151,16 +150,37 @@
freeStyle: true 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'); 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 () connection.onopen = function ()
{ {
console.log('Connected!');
var getData = getUrlVars();
if(getData["id"] != undefined && getData["id"] != "") 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 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) connection.onerror = function (error)
{ {
console.log('WebSocket Error ' + 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) function addNodeToGraph(request)
{ {
if(s.graph.nodes(request.id) == undefined) 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) function addEdgeToGraph(request)
{ {
s.graph.addEdge({ 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) connection.onmessage = function (e)
{ {
var request = JSON.parse(e.data); var request = JSON.parse(e.data);
if(request.action == 1) if(request.action == 1)
{ {
addNodeToGraph(request);
setTimeout(function()
{
addNodeToGraph(request);
connection.send("{go:1}");
}, 0);
} }
else if(request.action == 2) 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(); s.stopForceAtlas2();
}, 30000); }, 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) s.bind('clickNode doubleClickNode rightClickNode', function(e)
{ {
console.log(e.type, e);
$('.sigma-node, .sigma-edge').each(function() $('.sigma-node, .sigma-edge').each(function()
{ {
mute(this); mute(this);
@ -266,18 +306,18 @@
function mute(node) function mute(node)
{ {
if (!~node.getAttribute('class').search(/muted/)) 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) 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() $('.sigma-node').click(function()
{ {
console.log("click");
$('.sigma-node, .sigma-edge').each(function() $('.sigma-node, .sigma-edge').each(function()
{ {
mute(this); mute(this);

Loading…
Cancel
Save