Skip to content

Quick demo showing how a real-time light dimmer could be built with CanJS

Notifications You must be signed in to change notification settings

ccummings/light-dimmer-demo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Light Dimmer Demo

Control a mock dimmer switch using can-connect hooked up to a real-time socket.io backend.

The Demo

Short Video of Demo in two browser windows

Live Demo

All clients that connect to the app will be modifiying the exact same light. Changes made in a client immediately affect all of the others.

The up / down arrows increment /decrement the light's power by 10. The progress bar indicates the current power of the light.

Clicking one of the buttons will spawn a "demo" on the server that changes the power of the light every second for a certain duration.

So clicking "-50 over 3 seconds" will decrease the light's power by ~16 every second for a total change of -50.

Folder Structure

  • public - CanJS application
  • public/app - components
  • public/models - models
  • src - Feathers real-time backend

Real Time with CanJS' Model Layer

It's very easy to hook up CanJS' model layer to any real-time API. The model for the light is an example of this. Lines 37-40 is the only code needed to add real-time capabilities. This example uses feathers, but I could have just as easily used socket.io, primus or native WebSockets.

About

Quick demo showing how a real-time light dimmer could be built with CanJS

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published