Murillo Ventura Mendonça

What you're witnessing is not a pre-recorded animation or GIF. This is a live demonstration of a Genetic Algorithm (GA) in action, running in real-time on our server. As each generation of the algorithm progresses, it's trying to evolve a solution towards the target text: "Welcome to My Portfolio". The GA will run for up to 1000 generations or until it finds the exact target. The graph on the left tracks the fitness of each generation — a measure of how close it is to the target. The text on the right shows the best "individual" or candidate solution from the current generation. Interested in a challenge? Input a custom target using the field above and watch how the algorithm evolves to meet it! This demonstration showcases the power of our Drogon server and the real-time capabilities provided by WebSockets. Dive in and witness evolution in action!

Front-end WebSocket Connection

Here, we'll delve into how the WebSocket connection is established from the client side using JavaScript.


// Initialize the WebSocket
let protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
let host = window.location.hostname;
let port = window.location.port;
let socket = new WebSocket(`${protocol}//${host}:${port}/ga?target=${target}`);

// Handle WebSocket Events
socket.onopen = function() {
	console.log("WebSocket opened.");
};

socket.onmessage = function(event) {
	let data = JSON.parse(event.data);
	console.log("WebSocket message received:", data)
	updateGraph(data.graphData);
	document.getElementById("bestIndividual").textContent = data.bestText; 
	if(flag){
		document.getElementById("header_text").textContent = data.bestText;
	}
};

Back-end WebSocket Handling

Now, let's explore how the server-side, specifically the Drogon framework, handles the WebSocket connection and the data being exchanged. This is the function responsable for handling a new connection, it creates a GA object and runs it for 1000 generations, sending the best individual and the average fitness of the population at each generation to the client every 50 milliseconds. The client will then update the graph and the best individual text.


std::string target;
if(req->getParameter("target").empty()){
	target = "Hello, World!";
}
else{
	target = req->getParameter("target");
}
GA ga(target);
Json::Value root;
for(int i = 0; i < 1000; i++){
	ga.runGeneration();
	root["bestText"] = ga.getBestIndividual().getChromosome();
	root["graphData"]["generation"] = i;
	root["graphData"]["bestFitness"] = ga.getBestIndividual().getFitness();
	root["graphData"]["averageFitness"] = ga.getAverageFitness();
	wsConnPtr->send(root.toStyledString());
	if(ga.getBestIndividual().getFitness() == target.length()){
		break;
	}
	std::this_thread::sleep_for(std::chrono::milliseconds(50));
}

wsConnPtr->forceClose();

Welcome to My Portfolio

About Me

Front-end WebSocket Connection

Back-end WebSocket Handling

Connect on LinkedIn

Explore My GitHub