browsy

Introduction

Browsy provides functionality to serve content by directly manipulating the connected browser's DOM over socket.io.

As a result, writing a server with multiple browser clients feels like you're writing a stand-alone desktop app, where the clients can be likened to windows.

Due to probable performance issues, the target use-case is not production quality websites with many users to be served over an internet connection, but rather apps running perhaps on a LAN with a handful of users, who, nonetheless, require realtime interaction with each other and with the app's underlying resources.

In its current, very experimental state, browsy does not encourage good programming practices because it makes it very easy to mix up model, view and controller. Instead, it could in future provide the basis for libraries encouraging server-side MVC separation built on top of it.

Example: A really basic chat app

Create a new express app and install browsy:

express browsychat
cd browsychat
npm install
npm install browsy --save

Then in app.js replace the lines

app.get('/', routes.index);
app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

with

var server = http.createServer(app);

var browsy = require('browsy').listen(server);
var html = require('browsy/html');
var clients = [];

app.get("/", browsy.handler(function(browser) {
	
	browser.body.append(html.h1).text("My chat application");

	var msg = "";
	var inputMessage = browser.body.append(html.input)
		.change(function(value) {
			msg = value;
		});

	browser.body.append(html.button)
		.text("Send")
		.click(function() {
			for(var k in clients) {
				clients[k].body.append(html.p).text(msg);
			}
			inputMessage.val("");
			msg = "";
		});

	clients.push(browser);
}));

server.listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

Run node app and point multiple browsers to http://localhost:3000/