Archive

websockets css javascript loading

We live in the noSQL world, how about noHTTP, noREST approach to the web?

I have put together an experiment where I load all the resources (css/javascript/html/json) through websockets, actually could also load images if I think about it.

In theory, this approach could be lighting fast way to load websites, since all that we need to load would a continuous stream form the server, all packaged on the fly. Why to over optimize so much. We in the mobile world we are still working over very slow connections in most cases, websites can take over 10 seconds to load, on the other hand we have available full HTML5 complaint browsers.

Here is the server-side node.js code:

// References.
var http = require('http'),
    lightnode = require('lightnode'),
    fs = require('fs'),
		c = require('../config');

// Create server.
var server = new http.Server();
server.listen(c.config.portNumber);

// Website static server.
var website = new lightnode.FileServer(c.config.staticContentPath);

// Request.
website.delegateRequest = function(req, resp) {
	return website;
};

// When a request comes to the ip server.
server.addListener('request', function(req, resp) {
	website.receiveRequest(req, resp);
});

// Sockets listerner.
var io = require('socket.io').listen(server);

io.sockets.on('connection', function (socket) {

	  // Service chanel.
	socket.on('service', function (url, callBack) {
		
		if(url === 'css/get'){
			fs.readFile(c.config.appPath + '/web/css/main.css', function (err, content) {
				callBack(content.toString())
			});
		} else if(url === 'js/jquery'){
			fs.readFile(c.config.appPath + '/web/js/jquery.js', function (err, content) {
				callBack(content.toString())
			});
		} else {
			callBack({foo: 'none'})
		}
  });
});

io.sockets.on('message', function(obj){
	console.log(obj);
}); 

console.log('running on port: ' + c.config.portNumber + '');

And here comes the client side: 

<!DOCTYPE html>  
  <html> 
    <head>  
    	<title>NINJA</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
  <body>
  
	<script src="socket.io/socket.io.js"></script>
	<script type="text/javascript">
	(function(){
	
		var socket = io.connect(),
				oHead = document.getElementsByTagName('head')[0];
		
		// Load js libs.
		socket.emit('service', 'js/jquery', function (d) {
		
			var oScript = document.createElement('script');
	    oScript.setAttribute('type', 'text/javascript');
	    oScript.innerHTML = d;
			oHead.appendChild(oScript);
		});
		
		// Load styles.
		socket.emit('service', 'css/get', function (d) {
			
			var oStyle = document.createElement('style');
	    oStyle.innerHTML = d;
			oHead.appendChild(oStyle);
		});
	}());
	</script>
  </body>
</html>

I have not done any real benchmarking yet, so will see how this works in real world. I can think of at least two drawbacks so far: no HTTP caching, and the battery consumption when having websockets connection open.

Comments: