• Stars
    star
    219
  • Rank 181,133 (Top 4 %)
  • Language
    JavaScript
  • Created about 14 years ago
  • Updated about 14 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Realtime apps made easy with templating

Nodestream

Nodestream aims to make the most common use cases for realtime web applications easy to implement, by connecting event listeners to template rendering.

Example

Use-case

Consider the following example, written in Express. The following two routes show and save items respectively

app.get('/', function(req, res){
	database.getItems(function(items){
		res.render('my.items.jade', {locals: { items: items }})
	})
})

app.post('/save/item', function(req, res){
	database.saveItem(req.body, function(){
		res.redirect('/');
	})
})

And the following template displays them

- each item in items
	div.item
		p This is an item titled #{item.title}

When a user loads the page, he'll see all the items that are in the database at that particular moment. When he adds one, he'll be redirected and the page will be refreshed entirely.

The need for realtime

Even though this model works fine for really simple applications, reloading the page after a save is often undesirable. Developers usually turn to ajax, which means after a save a chunk of html is taken and appended it to the list.

This approach has drawbacks:

  • If a user has multiple tabs open with your applicaiton, only one tab will be updated.

  • If multiple users are editing concurrently, only your own changes are shown, but not changes from others.

The nodestream solution

Building on top of the powerful jade template engine filters, nodestream solves the problems listed above by making only two changes to your applications:

  1. Firing events

    database.saveItem(item){ ... nodestream.emit('newitem', item) }

  2. Adding a line of code to your template (:realtime)

    :realtime(append: 'newitem', local: 'items', obj: 'item') div.item p This is an item titled #{item.title}

How to use

  1. Include socket.io and nodestream:

    var io = require('socket.io'); require('nodestream');

  2. Attach socket.io to your http.Server and load nodestream

    var nodestream = io.listen(httpserver).nodestream();

  3. In the client side, load public/nodestream.js and attach it to your io.Socket

    var mySocket = new io.Socket(): mySocket.connect(); Nodestream(mySocket);

  4. In your code, fire events and edit your templates!

API

The :realtime filter takes the following options

local: The local variable passed to your template that your piece of html interacts with

obj: Required for append, the name of the local used when the collection is looped through.

append: Append event

repaint: Repaint event name. If it finished on ., the id property is appended to it for every item on a collection (dynamic event name)

remove: Remove event name. If it finished on ., the id property is appended to it for every item on a collection (dynamic event name)

id: The name of the key to look for an unique identifier to append to events finished in .

Example

Showing how many users are browsing your website

On the server side:

var connections = 0;
var nodestream = io.listen(app).nodestream()
  .on('connect', function(){
    connections++;
    this.emit('connections', connections);
  })
  .on('disconnect', function(){
    connections--;
    this.emit('connections', connections);
  });

On the client side:

:realtime(repaint: 'connections', local: 'connections')
  .connections
    - if (connections > 1)
      p #{connections} people are editing right now
    - else
      p You're all alone, loser

Credits

Guillermo Rauch <[email protected]> (guille)

License

(The MIT License)

Copyright (c) 2010 LearnBoost <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

More Repositories

1

cluster

Node.JS multi-core server manager with plugins support.
JavaScript
2,292
star
2

up

Zero-downtime reloads and requests load balancer based on distribute.
JavaScript
540
star
3

soda

Selenium Node.JS adapter
JavaScript
466
star
4

express-mongoose

Plugin for easy rendering of Mongoose async Query results.
JavaScript
451
star
5

tobi

Tobi: Expressive server-side functional testing with jQuery
JavaScript
411
star
6

websocket.io

JavaScript
329
star
7

console-trace

Adds a handy `trace` flag to the console object to prepend the file and line number.
JavaScript
296
star
8

socket.io-spec

Specification for the Socket.IO Protocol (0.9)
225
star
9

distribute

Distribute is a middleware-based API to expressively perform request routing / load balancing in Node.JS.
JavaScript
219
star
10

superagent-oauth

node-oauth signing plugin for superagent requests
JavaScript
87
star
11

shorty

LearnBoost URL shortening/redirection service.
JavaScript
79
star
12

CSS3-Overlay

A CSS3 Overlay system for modal dialogs.
65
star
13

up-hook

UP middleware to enable seamless zero-downtime HTTP server reloads upon GitHub post-receive webhooks.
JavaScript
51
star
14

jadevu

Minimal precompiled Jade templates exposed to the client.
JavaScript
50
star
15

texty

Canvas text
JavaScript
48
star
16

Socket.IO-node-client

[WIP] Socket.IO 0.7 Node.JS client implementation, with simulated browser transports
JavaScript
43
star
17

drawback

The Drawback framework provides a seamless way to render 2D drawings on the client side using HTML5 technologies with a server-side backend.
JavaScript
38
star
18

stylus

Placeholder repo for keeping Stylus docs in place
34
star
19

connect-timeout

Requests timeout middleware
JavaScript
32
star
20

socket.io-node

32
star
21

cfg.js

Minimal Node.JS configuration interface with support for overrides, environments and inheritance.
JavaScript
30
star
22

cluster-mail

Cluster exceptions in your inbox
JavaScript
26
star
23

superagent-queue

Adds request queueing capabilities to superagent
JavaScript
18
star
24

cluster-log

Advanced logging plugin for cluster
JavaScript
15
star
25

engine.io-flash

1
star