Server-to-client two way binding using WebSockets


BoyDog is an experimental, Angular-like framework with a server-side $scope that allows you to easily create real-time webpage experiences.

Open this page in a second window or computer and start interacting.

Examples


BoyDog has a back-end scope (called boy scope), and a front-end scope (called dog scope). To make an input real-time collaborative across all users who are currently in this webpage, create the variable in boy and bind it in dog.

var scope = {
  word: "starting word",
};
<input type="text" dog-value="word">

You can add as many scope variables as you wish. They will all keep in sync:

var scope = {
  word: "starting word",
  title: "initial title",
  subject: "random subject",
};
<input type="text" dog-value="word">
<input type="text" dog-value="title">
<input type="text" dog-value="subject">

A scope variable may have as many levels as you want. To bind them just access them like you would do normally:

var scope = {
  data: {
    name: "John Doe",
    address: "74 Henry Road",
  }
};
<input type="text" dog-value="data.name">
<input type="text" dog-value="data.address">

Parent objects can also be read (but not written) as a JSON string. Let's bind the previous object to a paragraph's innerHTML:

var scope = {
  data: {
    name: "John Doe",
    address: "74 Henry Road",
  }
};
<p dog-html="data"></p>

There are more directives you can use:

var scope = {
  thing: "red"
};
<input type="text" dog-value="thing">
<blockquote dog-html="thing"></blockquote>
<span dog-class="thing">Try "red", "blue" or "bold italic green"</span>

As an class: Try "red", "blue" or "bold italic green"

Getting started


Install boy:

npm install --save boydog

Include it:

var boy = require('boydog')(express_server);

And assign a boy's scope:

var scope = { sample: "collaborative variable" }; //Boy scope
boy.assign(scope);

Load dog (client), automatically injected route in your express route:

<script src="/boydog-client"></script>

Add a component binding its value to the variable:

<input dog-value="sample">

And attach it:

<script>
  var scope = "html"; //Dog scope
  dog.assign(scope);
</script>

Contributing


The boydog-demo page (this page)

The boydog server module.

The boydog-client client module.