Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 168 lines (126 sloc) 6.996 kB
a9d84f2 @codelotus initial import
codelotus authored
1 Title: Node.js and Redis Pub-Sub
2 Author: James R. Bracy
9fd609a @creationix Update publish date
authored
3 Date: Wed Dec 01 2010 20:36:43 GMT-0800 (PST)
a9d84f2 @codelotus initial import
codelotus authored
4 Node: v0.2.0
5
2f7f451 @codelotus block quote intro
codelotus authored
6 > This is the 7th in a series of posts leading up to [Node.js Knockout](http://nodeknockout.com/) on how to use [node.js](http://nodejs.org/). This post, [cross-posted from GitHub](http://github.com/waratuman/flight-stream), was written by [James Bracy](http://github.com/waratuman), founder of [Redis To Go](http://redistogo.com). [Redis To Go](http://redistogo.com) is a dead simple solution for managed Redis instances.
7
8 ## Node.js and Redis Pub-Sub
a9d84f2 @codelotus initial import
codelotus authored
9
10 [Node.js](http://nodejs.org/) is a perfect platform for creating event driven
11 applications. [Redis](http://code.google.com/p/redis/) and [WebSockets](http://en.wikipedia.org/wiki/WebSockets)
12 are great companions to Node.js. The following tutorial will walk through the
13 steps to build a web application that streams real time flight information
14 using Node.js, Redis, and WebSockets.
15
16 ## Dependencies
17
18 Node.js, Redis, and a WebSocket enabled browser ([Firefox 4](http://www.mozilla.com/en-US/firefox/beta/),
19 [Google Chrome 4](http://www.google.com/chrome), or [Safari 5](http://www.apple.com/safari/))
20 are required. A tutorial covering the installation of Node.js can be found
21 [here](http://nodeknockout.posterous.com/countdown-to-knockout-post-1-how-to-install-n).
22
23 The easiest way to get a Redis instance would be to use [Redis To Go](http://redistogo.com/).
24 The free plan is all that is needed for this tutorial. If you wish to install
25 locally run the following commands:
26
27 $ git clone http://github.com/antirez/redis.git
28 $ cd redis/src
29 $ make
30 $ sudo make install
31 $ cd ../..
32 $ rm -rf redis
33
34 Now you can start a Redis instance locally using the `redis-server` command.
35
36 ## Create the Project
37
38 Create a directory for the project. We will name the project "Flight Stream".
39
40 $ mkdir flight-stream
41 $ cd flight-stream
42
43 The project will require the Node.js Redis client [`redis-client`](http://github.com/fictorial/redis-node-client),
44 the WebSocket library [`node-websocket-server`](http://github.com/miksago/node-websocket-server),
45 and the MIME library [node-mime](http://github.com/bentomas/node-mime). Create
46 a `lib` directory and copy the libraries to this directory.
47
48 $ mkdir lib
49 $ cd lib
50 $ curl -O http://github.com/fictorial/redis-node-client/raw/master/lib/redis-client.js \
51 -O http://github.com/bentomas/node-mime/raw/master/mime.js \
52 -O http://github.com/miksago/node-websocket-server/raw/master/lib/ws.js
53 $ mkdir ws
54 $ cd ws
55 $ curl -O http://github.com/miksago/node-websocket-server/raw/master/lib/ws/connection.js \
56 -O http://github.com/miksago/node-websocket-server/raw/master/lib/ws/manager.js
57 $ cd ../..
58
59 ## Create the Server
60
61 Initially the Node.js server will simply server the static index.html file that
62 will be create. Create the `server.js` file and add the following code:
63
64 <redis-pubsub/server.js>
65
66 The `httpServer` serves the static files in the `public` directory. The
67 `server` is what will be handling the WebSocket connections.
68
69 Create the `public` directory:
70
71 $ mkdir public
72
73 Now copy the source for the index and stylesheets from [github](http://github.com/waratuman/flight-stream).
74
75 $ cd public
76 $ curl -O http://github.com/waratuman/flight-stream/raw/master/public/application.css \
77 -O http://github.com/waratuman/flight-stream/raw/master/public/reset.css \
78 -O http://github.com/waratuman/flight-stream/raw/master/public/jquery.js \
79 -O http://github.com/waratuman/flight-stream/raw/master/public/text.css \
80 -O http://github.com/waratuman/flight-stream/raw/master/public/index.html
81 $ mkdir images
82 $ cd images
83 $ curl -O http://github.com/waratuman/flight-stream/raw/master/public/images/background.png \
84 -O http://github.com/waratuman/flight-stream/raw/master/public/images/red.png \
85 -O http://github.com/waratuman/flight-stream/raw/master/public/images/orange.png \
86 -O http://github.com/waratuman/flight-stream/raw/master/public/images/green.png \
87 -O http://github.com/waratuman/flight-stream/raw/master/public/images/blue.png
88
89 At this point you should be able to run `node server.js` and see the index
90 page when you got to `localhost:8000`.
91
92 Now lets get `redis-client` working in the server. The following lines
93 establish a connection to Redis. The `connected` and `reconnected` listeners
94 authenticate the connection after it has been established.
95
96 <redis-pubsub/redis-client.js>
97
98 <cite style="float: right;">View the full source [here](http://github.com/waratuman/flight-stream/blob/master/server.js)</cite>
99 <br /><br />
100
101 Now subscribe to the `flight_stream` channel on Redis.
102
103 <redis-pubsub/redis-subscribe.js>
104
105 <cite style="float: right;">View the full source [here](http://github.com/waratuman/flight-stream/blob/master/server.js)</cite>
106 <br /><br />
107
108 Whenever a message is published the function passed to the `subscribeTo`
109 method will get called. In this case we try to parse the message as JSON then
110 publish it to all of the clients if the flight is leaving Boston or arriving
111 at Boston.
112
113 # Client
114
115 Next the client will need to be coded. I previously created the HTML for this
116 app, so all that we need to do is set up the WebSockets.
117
118 Open `public/application.js` and insert the following code. This code will
119 create a WebSocket if the browser supports it and if it does, create a
120 connection with the server. When a message is received, another row will be
121 inserted on the page displaying the flight.
122
123 <redis-pubsub/application.js>
124
125 The functions `delay_color` and `delay_name` are helper functions for
126 displaying text and selecting the right class for styling.
127
128 Now you can start the server, go to [http://localhost:8000/](http://localhost:8000/)
129 and you should start seeing updates roll in. If you are using your own Redis,
130 you are going to need to publish something to the `flight_stream`. Here is a
131 sample message that you can use:
132
133 {
134 "number": "482",
135 "status": "Scheduled",
136 "origin": {
137 "gate_delay": 0,
138 "icao": "KSFO",
139 "name": "San Francisco International Airport",
140 "iata": "SFO",
141 "gate": "3-88"
142 },
143 "destination": {
144 "gate_delay": 0,
145 "icao": "KBOS",
146 "name": "Denver International Airport",
147 "iata": "BOS",
148 "gate": "-"
149 },
150 "airline": {
151 "icao": "UAL",
152 "name": "United Airlines",
153 "iata": "UA"
154 }
155 }
156
157 If you are using the Redis instance used throughout the tutorial, you will
158 start seeing flight come up. I will be publishing some data every few seconds
159 to the instance for the coming days.
160
161 ## Basic Operations
162
163 Basic operations were not really covered in this tutorial, so here are some
164 examples to get you started.
165
166 <redis-pubsub/basic-operations.js>
167
Something went wrong with that request. Please try again.