Server-to-client two way binding using WebSockets


BoyDog is a web framework based on Express.JS and ShareDB that allows you to
build real-time collaborative webpages in 3 lines of code.

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

Examples


BoyDog has a back-end scope, and a front-end scope in HTML. To make an input real-time collaborative across all users who are viewing the page just create the variable in back-end and bind it in front-end.

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

The scope can have as many keys as you wish. Boydog will keep them all keep in sync using Operational Transformations (OT):

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

More complex scopes are also valid. To bind them just write its full path:

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

You can bind other attributes too:

var scope = {
  thing: "red"
};
<input type="text" bd-value="thing">
<blockquote bd-html="'The quote is: ' + thing"></blockquote>
<span bd-class="'my other classes ' + thing">Try "red", "blue" or "italic blue"</span>
<img bd-src="'/img/' + thing + '.jpg'" />
As a class. Try "red", "blue" or "italic blue".

As a src (cats are called "red", "blue", "yellow", "bold" and "italic"):

Scope changes from the server are also broadcasted to all connected users:

var scope = {
  number: 0
};

setInterval(() => {
  scope.number = String(Math.random())
}, 1000)
<p bd-html="'Random number: ' + number"></p>

Getting started


Install boydog:

npm install --save boydog

Init boydog in your Express server:

const express = require("express")
const boydog = require("boydog")

const app = express()
app.all("/", (req, res) => { /* My routes */ })
const server = app.listen(8080)

let scope = {
  name: "John Doe",
}
boydog.init(scope, server)

Finally, bind your scope variables. Don't forget to load boydog-client before the closing body tag:

<body>
  <input type="text" bd-value="name">
  
  <script src="/boydog-client"></script>
  <script>
    boydog.init() // Or `boydog.init("#my_div", "my_host:9090")` for a custom scope and host
  </script>
</body>

Contributing


The boydog-demo page (this page)

The boydog NPM module.