Murillo Ventura Mendonça

A live genetic algorithm demo streamed from the backend over WebSockets.

How it works

The server evolves a string toward the target text in real time and streams progress updates to the chart and preview text. This is a small systems experiment, not the main focus of the portfolio.

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();

Backend Engineer Building Lean, Observable Systems

About Me

Front-end WebSocket Connection

Back-end WebSocket Handling

LinkedIn

GitHub