From 896074c91d2e0a51a313e8fe2064202120e71e8d Mon Sep 17 00:00:00 2001 From: "dan.entous" Date: Fri, 5 Apr 2013 17:20:52 +0200 Subject: [PATCH 01/11] adding in initial draft of the chattr app --- README.md | 19 ++++++++- app.js | 77 +++++++++++++++++++++++++++++++++++++ index.html | 106 +++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 31 +++++++++++++++ 4 files changed, 232 insertions(+), 1 deletion(-) create mode 100644 app.js create mode 100644 index.html create mode 100644 package.json diff --git a/README.md b/README.md index cbba4e2..ce944a6 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,20 @@ # Real Time Web With Node.js -This is the code for the [Real Time Web with Node.js](http://www.codeschool.com/courses/real-time-web-with-nodejs) demo app. +This is the code for the [Real Time Web with Node.js](http://www.codeschool.com/courses/real-time-web-with-nodejs) demo app, __chattr__. + +## redis + +You’ll need to make sure you have a redis server running in order to use the application see the [Redis Quick Start](http://redis.io/topics/quickstart) for information on installing redis. + +## Install + +The fastest way to get __chattr__ up and running: + + * On Mac or Linux, make sure you have [nodejs][nodejs] and [npm][npm] installed + +``` +git clone git@github.com:dan-nl/realtimewebnode.git +cd realtimewebnode +npm install +npm start +``` \ No newline at end of file diff --git a/app.js b/app.js new file mode 100644 index 0000000..d8adf16 --- /dev/null +++ b/app.js @@ -0,0 +1,77 @@ +var express = require('express'); +var app = express(); +var http = require('http'); +var server = http.createServer(app); +var io = require('socket.io').listen(server); +var redis = require('redis'); +var redisClient = redis.createClient(); + +server.listen(8080); + +app.get('/', function (req, res) { + res.sendfile(__dirname + '/index.html'); +}); + +redisClient.on('error', function(err) { console.log( 'error : ' + err ); }); + +var storeMessage = function( name, data ) { + + var message = JSON.stringify({name:name, data:data}); + + // store up to 10 messages + redisClient.lpush('messages', message, function(error, response){ + redisClient.ltrim('messages', 0, 10); + }); + +}; + +io.sockets.on( 'connection', function ( client ) { + + client.on( 'join', function( name ) { + + client.set( 'nickname', name ); + client.broadcast.emit( 'add chatter', name ); // tell other chatters about this new chatter + redisClient.sadd( 'chatters', name ); // add the new chatter to the redis chatter set + + // add all current chatters to the current client’s chatters list + redisClient.smembers( 'chatters', function( error, names ) { + names.forEach( function( name ) { + client.emit( 'add chatter', name ); + }); + }); + + // add latest chat messages to current client + redisClient.lrange( 'messages', 0, -1, function( error, messages ) { + + messages = messages.reverse(); + + messages.forEach( function( message ) { + message = JSON.parse( message ); + client.emit( 'messages',message.name + ' : ' + message.data ); + }); + + }); + + }); + + + client.on( 'messages', function( message ) { + + client.get('nickname',function( error, name ) { + storeMessage( name, message ); + client.broadcast.emit( 'messages', name + ' : ' + message ); + }); + + }); + + + client.on( 'disconnect', function( name ) { + + client.get( 'nickname', function( error, name ) { + client.broadcast.emit( 'remove chatter', name ); + redisClient.srem( 'chatters', name ); + }); + + }); + +}); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..1be54bd --- /dev/null +++ b/index.html @@ -0,0 +1,106 @@ + + + + +chattr + + + +

chattr

+ + +
+ +
+
+ +
+ + + + + + + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..6fe6cef --- /dev/null +++ b/package.json @@ -0,0 +1,31 @@ +{ + "name": "chattr", + "description": "A simple chat server based on the Real Time Web with Node.js codeschool class.", + "version": "0.1.0", + "author": { + "name": "dan entous", + "email": "contact@pennlinepublishing.com" + }, + "contributors": [ + { + "name": "dan entous", + "email": "contact@pennlinepublishing.com" + } + ], + "dependencies": { + "express": "3.1.0", + "redis": "0.8.2", + "socket.io": "0.9.14" + }, + "repository": { + "type": "git", + "url": "git://github.com/dan-nl/realtimewebnode.git" + }, + "scripts": { + "start": "node app.js" + }, + "readme": "# Real Time Web With Node.js\n\nThis is the code for the [Real Time Web with Node.js](http://www.codeschool.com/courses/real-time-web-with-nodejs) demo app.\n\n## redis\n\nYou’ll need to make sure you have a redis server running in order to use the application see the [Redis Quick Start](http://redis.io/topics/quickstart) for information on installing redis.\n\n## Install\n\nThe fastest way to get __chattr__ up and running:\n\n * On Mac or Linux, make sure you have [nodejs][nodejs] and [npm][npm] installed\n\n```\ngit clone git@github.com:dan-nl/realtimewebnode.git\ncd realtimewebnode\nnpm install\nnpm start\n```", + "readmeFilename": "Readme.md", + "_id": "chattr@0.1.0", + "_from": "chattr@" +} From 78539d36a38338348d512569ede447be48363f09 Mon Sep 17 00:00:00 2001 From: "dan.entous" Date: Wed, 10 Apr 2013 04:28:13 +0200 Subject: [PATCH 02/11] adjusting the readme.md --- README.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index ce944a6..df747ae 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ # Real Time Web With Node.js -This is the code for the [Real Time Web with Node.js](http://www.codeschool.com/courses/real-time-web-with-nodejs) demo app, __chattr__. +This is the code for the [Real Time Web with Node.js][realtime] demo app, __chattr__. ## redis -You’ll need to make sure you have a redis server running in order to use the application see the [Redis Quick Start](http://redis.io/topics/quickstart) for information on installing redis. +You’ll need to make sure you have a redis server running in order to use the application see the [Redis Quick Start][redis] for information on installing redis. ## Install @@ -17,4 +17,9 @@ git clone git@github.com:dan-nl/realtimewebnode.git cd realtimewebnode npm install npm start -``` \ No newline at end of file +``` + +[nodejs]: http://nodejs.org/ +[npm]: http://npmjs.org/ +[redis]: http://redis.io/topics/quickstart +[realtime]: http://www.codeschool.com/courses/real-time-web-with-nodejs \ No newline at end of file From 508384ec05e2ff244cdc5a6c1028902bcab19527 Mon Sep 17 00:00:00 2001 From: dan-nl Date: Sun, 27 Apr 2014 12:40:31 +0200 Subject: [PATCH 03/11] a bit of clean-up MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • moved the js and css into separate files • re-located front-end assets • js linted the js files • re-styled the page a bit --- app.js | 121 ++++++++++++++++++++++----------------------- index.html | 106 --------------------------------------- public/css/css.css | 93 ++++++++++++++++++++++++++++++++++ public/index.html | 23 +++++++++ public/js/js.js | 66 +++++++++++++++++++++++++ 5 files changed, 242 insertions(+), 167 deletions(-) delete mode 100644 index.html create mode 100644 public/css/css.css create mode 100644 public/index.html create mode 100644 public/js/js.js diff --git a/app.js b/app.js index d8adf16..8e3362a 100644 --- a/app.js +++ b/app.js @@ -1,77 +1,76 @@ -var express = require('express'); -var app = express(); -var http = require('http'); -var server = http.createServer(app); -var io = require('socket.io').listen(server); -var redis = require('redis'); -var redisClient = redis.createClient(); - -server.listen(8080); - -app.get('/', function (req, res) { - res.sendfile(__dirname + '/index.html'); -}); - -redisClient.on('error', function(err) { console.log( 'error : ' + err ); }); - -var storeMessage = function( name, data ) { - - var message = JSON.stringify({name:name, data:data}); - - // store up to 10 messages - redisClient.lpush('messages', message, function(error, response){ - redisClient.ltrim('messages', 0, 10); +/*jslint node: true, nomen: true, unparam: true, white: true */ +(function() { + + 'use strict'; + + var storeMessage, + express = require( 'express' ), + app = express(), + http = require( 'http' ), + server = http.createServer(app), + io = require( 'socket.io' ).listen(server), + redis = require( 'redis' ), + redisClient = redis.createClient(), + path = require( 'path' ); + + server.listen(8080); + app.use(express.static( path.join( __dirname, 'public' ) ) ); + + app.get('/', function ( req, res ) { + res.sendfile( __dirname + '/index.html' ); }); -}; + redisClient.on('error', function(err) { console.log( 'error : ' + err ); }); -io.sockets.on( 'connection', function ( client ) { + storeMessage = function( name, data ) { + var message = JSON.stringify({name:name, data:data}); - client.on( 'join', function( name ) { + // store up to 100 messages + redisClient.lpush('messages', message, function(error, response){ + redisClient.ltrim('messages', 0, 100); + }); + }; + + io.sockets.on( 'connection', function ( client ) { + client.on( 'join', function( name ) { + client.set( 'nickname', name ); + client.broadcast.emit( 'add chatter', name ); // tell other chatters about this new chatter + redisClient.sadd( 'chatters', name ); // add the new chatter to the redis chatter set + + // add all current chatters to the current client’s chatters list + redisClient.smembers( 'chatters', function( error, names ) { + names.forEach( function( name ) { + client.emit( 'add chatter', name ); + }); + }); - client.set( 'nickname', name ); - client.broadcast.emit( 'add chatter', name ); // tell other chatters about this new chatter - redisClient.sadd( 'chatters', name ); // add the new chatter to the redis chatter set + // add latest chat messages to current client + redisClient.lrange( 'messages', 0, -1, function( error, messages ) { + messages = messages.reverse(); - // add all current chatters to the current client’s chatters list - redisClient.smembers( 'chatters', function( error, names ) { - names.forEach( function( name ) { - client.emit( 'add chatter', name ); + messages.forEach( function( message ) { + message = JSON.parse( message ); + client.emit( 'messages',message.name + ' : ' + message.data ); + }); }); }); - // add latest chat messages to current client - redisClient.lrange( 'messages', 0, -1, function( error, messages ) { - - messages = messages.reverse(); - - messages.forEach( function( message ) { - message = JSON.parse( message ); - client.emit( 'messages',message.name + ' : ' + message.data ); + client.on( 'messages', function( message ) { + client.get('nickname',function( error, name ) { + storeMessage( name, message ); + client.broadcast.emit( 'messages', name + ' : ' + message ); }); - }); - }); - - - client.on( 'messages', function( message ) { - - client.get('nickname',function( error, name ) { - storeMessage( name, message ); - client.broadcast.emit( 'messages', name + ' : ' + message ); + client.on( 'disconnect', function( name ) { + client.get( 'nickname', function( error, name ) { + client.broadcast.emit( 'remove chatter', name ); + redisClient.srem( 'chatters', name ); + }); }); - }); - - - client.on( 'disconnect', function( name ) { - - client.get( 'nickname', function( error, name ) { - client.broadcast.emit( 'remove chatter', name ); - redisClient.srem( 'chatters', name ); + client.on( 'flushall', function() { + redisClient.flushall(); }); - }); - -}); \ No newline at end of file +}()); diff --git a/index.html b/index.html deleted file mode 100644 index 1be54bd..0000000 --- a/index.html +++ /dev/null @@ -1,106 +0,0 @@ - - - - -chattr - - - -

chattr

- -
    -
    - -
    -
    - -
    - - - - - - - \ No newline at end of file diff --git a/public/css/css.css b/public/css/css.css new file mode 100644 index 0000000..e367f7a --- /dev/null +++ b/public/css/css.css @@ -0,0 +1,93 @@ +html { + font-family: sans-serif; + font-size: 16px; +} + +body { + font-size: 100%; + color: #333; + padding: 3%; +} + +h1 { + margin-top: 0; +} + +#chatters { + width: 24%; + max-width: 100px; + margin: 0 2% 0 0; + float: left; + list-style: none; +} + +#chatters, +#chat-console { + height: 300px; + overflow: auto; + padding: 1%; +} + +#chat-console, +#chatters, +#chat-form input[type=text] { + border: 1px solid #ccc; +} + +#chat-form { + margin-top: 1em; + text-align: right; + clear: both; +} + +#chat-form input[type = text] { + width: 98%; + font-size: 120%; + padding: 1%; + margin: 0; +} + +.connected { + color: #8b0000; +} + +/* http://hellohappy.org/css3-buttons/ */ +input[type=submit] { + background-color: #eeeeee; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eeeeee), color-stop(100%, #cccccc)); + background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); + background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); + background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); + background-image: -o-linear-gradient(top, #eeeeee, #cccccc); + background-image: linear-gradient(top, #eeeeee, #cccccc); + border: 1px solid #ccc; + border-bottom: 1px solid #bbb; + border-radius: 3px; + margin: 1% 0 0 0; + color: #333; + font-size: 100%; + padding: 7px 18px; + text-align: center; + text-shadow: 0 1px 0 #eee; +} + +input[type=submit]:hover { + background-color: #dddddd; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #dddddd), color-stop(100%, #bbbbbb)); + background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb); + background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb); + background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb); + background-image: -o-linear-gradient(top, #dddddd, #bbbbbb); + background-image: linear-gradient(top, #dddddd, #bbbbbb); + border: 1px solid #bbb; + border-bottom: 1px solid #999; + cursor: pointer; + text-shadow: 0 1px 0 #ddd; +} + +input[type=submit]:active { + border: 1px solid #aaa; + border-bottom: 1px solid #888; + -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; + box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; +} diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..cdf6776 --- /dev/null +++ b/public/index.html @@ -0,0 +1,23 @@ + + + + + +chattr + + + +

    chattr

    +
      +
      + +
      +
      + +
      + + + + + + diff --git a/public/js/js.js b/public/js/js.js new file mode 100644 index 0000000..289aeaa --- /dev/null +++ b/public/js/js.js @@ -0,0 +1,66 @@ +/*global io, prompt */ +/*jslint browser: true, white: true */ +(function() { + + 'use strict'; + + var nickname, + server = io.connect('http://localhost:8080'), + chatters = document.getElementById('chatters'), + chat_input = document.getElementById('chat-input'), + chat_console = document.getElementById('chat-console'); + + function removeChatter( name ) { + var current_chatters = document.querySelectorAll('[data-name]'), + i, + ii = current_chatters.length; + + for ( i = 0; i < ii; i += 1 ) { + if ( name === current_chatters[i].getAttribute('data-name') ) { + current_chatters[i].parentNode.removeChild( current_chatters[i] ); + break; + } + } + } + + function insertChatter( name ) { + var new_chatter = document.createElement('li'); + new_chatter.setAttribute( 'data-name', name ); + new_chatter.setAttribute( 'class', 'connected' ); + new_chatter.innerHTML = name; + chatters.appendChild( new_chatter ); + } + + function insertMessage( message ) { + var new_message = document.createElement('span'); + new_message.innerHTML = message + '
      '; + chat_console.appendChild( new_message ); + chat_console.scrollTop = chat_console.scrollHeight; + } + + document.getElementById('chat-form').onsubmit = function( evt ) { + evt.preventDefault(); + server.emit( 'messages', chat_input.value ); + insertMessage( nickname + ' : ' + chat_input.value ); + + if ( chat_input.value === 'flushall' ) { + server.emit( 'flushall' ); + } + + chat_input.value = null; + }; + + server.on( 'messages', function( data ) { + insertMessage( data ); + }); + + server.on( 'connect', function() { + chat_console.innerHTML = 'connected to the chat server
      '; + nickname = prompt( 'what is your nickanme?' ); + server.emit( 'join', nickname ); + }); + + server.on( 'add chatter', insertChatter ); + server.on( 'remove chatter', removeChatter ); + +}()); From 3b346fd9f7068922422384200306a3127adb11cd Mon Sep 17 00:00:00 2001 From: dan-nl Date: Sun, 27 Apr 2014 14:48:36 +0200 Subject: [PATCH 04/11] set-up for heroku --- .gitignore | 2 ++ Procfile | 1 + app.js | 33 +++++++++++++++++++++++++-------- package.json | 31 ++++++++++++++++++------------- public/index.html | 2 +- public/js/js.js | 5 +++++ 6 files changed, 52 insertions(+), 22 deletions(-) create mode 100644 .gitignore create mode 100644 Procfile diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..93f1361 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +npm-debug.log diff --git a/Procfile b/Procfile new file mode 100644 index 0000000..e1d4131 --- /dev/null +++ b/Procfile @@ -0,0 +1 @@ +web: node app.js diff --git a/app.js b/app.js index 8e3362a..2208da8 100644 --- a/app.js +++ b/app.js @@ -11,23 +11,40 @@ io = require( 'socket.io' ).listen(server), redis = require( 'redis' ), redisClient = redis.createClient(), - path = require( 'path' ); + path = require( 'path' ), + port = Number( process.env.PORT || 8080 ), + max_messages = 100; - server.listen(8080); - app.use(express.static( path.join( __dirname, 'public' ) ) ); + server.listen( port, function() { + console.log( "Listening on " + port ); + }); + + app.use( express.static( path.join( __dirname, 'public' ) ) ); app.get('/', function ( req, res ) { res.sendfile( __dirname + '/index.html' ); }); - redisClient.on('error', function(err) { console.log( 'error : ' + err ); }); + redisClient.ping( function( reply ) { + if ( reply !== null && reply.indexOf( 'ECONNREFUSED' ) > -1 ) { + console.log( 'error: cannot connect with the redis server' ); + process.exit(1); + } + }); + + redisClient.on( 'error', function( err ) { + console.log( 'error : ' + err ); + }); storeMessage = function( name, data ) { - var message = JSON.stringify({name:name, data:data}); + var message = JSON.stringify({ + name:name, + data:data + }); - // store up to 100 messages - redisClient.lpush('messages', message, function(error, response){ - redisClient.ltrim('messages', 0, 100); + // store up to max_messages + redisClient.lpush( 'messages', message, function( error, response ) { + redisClient.ltrim( 'messages', 0, max_messages ); }); }; diff --git a/package.json b/package.json index 6fe6cef..eafb200 100644 --- a/package.json +++ b/package.json @@ -1,29 +1,34 @@ { "name": "chattr", - "description": "A simple chat server based on the Real Time Web with Node.js codeschool class.", "version": "0.1.0", + "description": "A simple chat server based on the Real Time Web with Node.js codeschool class.", "author": { "name": "dan entous", "email": "contact@pennlinepublishing.com" }, - "contributors": [ - { - "name": "dan entous", - "email": "contact@pennlinepublishing.com" - } - ], - "dependencies": { - "express": "3.1.0", - "redis": "0.8.2", - "socket.io": "0.9.14" - }, "repository": { "type": "git", - "url": "git://github.com/dan-nl/realtimewebnode.git" + "url": "https://github.com/dan-nl/realtimewebnode.git" }, + "homepage": "https://github.com/dan-nl/realtimewebnode", + "license": "GPLv3", + "keywords": [ + "codeschool", + "websockets", + "chat" + ], + "main": "app.js", "scripts": { "start": "node app.js" }, + "engines": { + "node": "0.10.26" + }, + "dependencies": { + "express": "3.1.0", + "redis": "0.8.2", + "socket.io": "0.9.14" + }, "readme": "# Real Time Web With Node.js\n\nThis is the code for the [Real Time Web with Node.js](http://www.codeschool.com/courses/real-time-web-with-nodejs) demo app.\n\n## redis\n\nYou’ll need to make sure you have a redis server running in order to use the application see the [Redis Quick Start](http://redis.io/topics/quickstart) for information on installing redis.\n\n## Install\n\nThe fastest way to get __chattr__ up and running:\n\n * On Mac or Linux, make sure you have [nodejs][nodejs] and [npm][npm] installed\n\n```\ngit clone git@github.com:dan-nl/realtimewebnode.git\ncd realtimewebnode\nnpm install\nnpm start\n```", "readmeFilename": "Readme.md", "_id": "chattr@0.1.0", diff --git a/public/index.html b/public/index.html index cdf6776..8819270 100644 --- a/public/index.html +++ b/public/index.html @@ -1,5 +1,5 @@ - + diff --git a/public/js/js.js b/public/js/js.js index 289aeaa..4e01abf 100644 --- a/public/js/js.js +++ b/public/js/js.js @@ -4,6 +4,11 @@ 'use strict'; + if ( window.io === undefined ) { + console.log( 'oops ... socket.io did’t load' ); + return; + } + var nickname, server = io.connect('http://localhost:8080'), chatters = document.getElementById('chatters'), From 1c7ffc648cd713e2e3e371fcaa15d0ada6e69e87 Mon Sep 17 00:00:00 2001 From: dan-nl Date: Sun, 27 Apr 2014 15:04:10 +0200 Subject: [PATCH 05/11] set-up for heroku MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • see if the process.exit() method can send a message to the heroku log --- app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app.js b/app.js index 2208da8..17c06a5 100644 --- a/app.js +++ b/app.js @@ -28,7 +28,7 @@ redisClient.ping( function( reply ) { if ( reply !== null && reply.indexOf( 'ECONNREFUSED' ) > -1 ) { console.log( 'error: cannot connect with the redis server' ); - process.exit(1); + process.exit( 'error: cannot connect with the redis server' ); } }); From bfdd30ecbe405c930c0e0a4dc2ed89f6ee457e04 Mon Sep 17 00:00:00 2001 From: dan-nl Date: Sun, 27 Apr 2014 15:44:07 +0200 Subject: [PATCH 06/11] set-up redis add-on for heroku --- app.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index 17c06a5..64be8ae 100644 --- a/app.js +++ b/app.js @@ -3,14 +3,15 @@ 'use strict'; - var storeMessage, + var redisToGo, + redis, + redisClient, + storeMessage, express = require( 'express' ), app = express(), http = require( 'http' ), server = http.createServer(app), io = require( 'socket.io' ).listen(server), - redis = require( 'redis' ), - redisClient = redis.createClient(), path = require( 'path' ), port = Number( process.env.PORT || 8080 ), max_messages = 100; @@ -25,6 +26,16 @@ res.sendfile( __dirname + '/index.html' ); }); + if ( process.env.REDISTOGO_URL ) { + redisToGo = require( 'url' ).parse( process.env.REDISTOGO_URL ); + redis = require( 'redis' ); + redisClient = redis.createClient( redisToGo.port, redisToGo.hostname ); + redisClient.auth( redisToGo.auth.split( ':' )[1] ); + } else { + redis = require( 'redis' ); + redisClient = redis.createClient(); + } + redisClient.ping( function( reply ) { if ( reply !== null && reply.indexOf( 'ECONNREFUSED' ) > -1 ) { console.log( 'error: cannot connect with the redis server' ); From 82ced721cd1d2e5392ee816acddd483efedf3794 Mon Sep 17 00:00:00 2001 From: dan-nl Date: Sun, 27 Apr 2014 20:41:41 +0200 Subject: [PATCH 07/11] set-up for heroku MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • trying to sort out the best set-up for websockets on heroku --- public/js/js.js | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/public/js/js.js b/public/js/js.js index 4e01abf..fda3942 100644 --- a/public/js/js.js +++ b/public/js/js.js @@ -10,18 +10,23 @@ } var nickname, - server = io.connect('http://localhost:8080'), - chatters = document.getElementById('chatters'), - chat_input = document.getElementById('chat-input'), - chat_console = document.getElementById('chat-console'); + + server = io.connect( + '//' + + window.location.hostname + + ( window.location.port ? ':' + window.location.port : '' ) + ), + chatters = document.getElementById( 'chatters' ), + chat_input = document.getElementById( 'chat-input' ), + chat_console = document.getElementById( 'chat-console' ); function removeChatter( name ) { - var current_chatters = document.querySelectorAll('[data-name]'), - i, - ii = current_chatters.length; + var i, + current_chatters = document.querySelectorAll( '[data-name]' ), + ii = current_chatters.length; for ( i = 0; i < ii; i += 1 ) { - if ( name === current_chatters[i].getAttribute('data-name') ) { + if ( name === current_chatters[i].getAttribute( 'data-name' ) ) { current_chatters[i].parentNode.removeChild( current_chatters[i] ); break; } @@ -43,7 +48,7 @@ chat_console.scrollTop = chat_console.scrollHeight; } - document.getElementById('chat-form').onsubmit = function( evt ) { + document.getElementById( 'chat-form' ).onsubmit = function( evt ) { evt.preventDefault(); server.emit( 'messages', chat_input.value ); insertMessage( nickname + ' : ' + chat_input.value ); From f675860656f0df4567bec6a5f5211b41af9326ef Mon Sep 17 00:00:00 2001 From: dan-nl Date: Sun, 27 Apr 2014 21:20:06 +0200 Subject: [PATCH 08/11] adding an easter egg --- app.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index 64be8ae..5cff9a7 100644 --- a/app.js +++ b/app.js @@ -84,9 +84,13 @@ }); client.on( 'messages', function( message ) { - client.get('nickname',function( error, name ) { - storeMessage( name, message ); - client.broadcast.emit( 'messages', name + ' : ' + message ); + client.get( 'nickname', function( error, name ) { + if ( message.indexOf( 'udacity' ) > -1 ) { + client.broadcast.emit( 'messages', name + ' : ' + '

      Education is no longer a one-time event but a lifelong experience. Education should be less passive listening (no long lectures) and more active doing. Education should empower students to succeed not just in school but in life.

      We are reinventing education for the 21st century by bridging the gap between real-world skills, relevant education, and employment. Our students will be fluent in new technology, modern mathematics, science, and critical thinking. They will marry skills with creativity and humanity to learn, think, and do. Udacians are curious and engaged world citizens.

      Interested in working with us? View our openings.

      ' ); + } else { + storeMessage( name, message ); + client.broadcast.emit( 'messages', name + ' : ' + message ); + } }); }); From 6538b51c006384e2738bcfed61b58c13193cc14b Mon Sep 17 00:00:00 2001 From: dan-nl Date: Sun, 27 Apr 2014 21:27:52 +0200 Subject: [PATCH 09/11] small adjustment to the readme --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index df747ae..586f35e 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,16 @@ -# Real Time Web With Node.js +# RealTime Web with Node.js -This is the code for the [Real Time Web with Node.js][realtime] demo app, __chattr__. +This is the code is bases on the [Real Time Web with Node.js][realtime] demo app, __chattr__. ## redis -You’ll need to make sure you have a redis server running in order to use the application see the [Redis Quick Start][redis] for information on installing redis. +You’ll need to make sure you have a redis server running in order to use chattr. See the [Redis Quick Start][redis] for information on installing redis. -## Install +## install The fastest way to get __chattr__ up and running: - * On Mac or Linux, make sure you have [nodejs][nodejs] and [npm][npm] installed + * Make sure you have [nodejs][nodejs] and [npm][npm] installed ``` git clone git@github.com:dan-nl/realtimewebnode.git @@ -22,4 +22,4 @@ npm start [nodejs]: http://nodejs.org/ [npm]: http://npmjs.org/ [redis]: http://redis.io/topics/quickstart -[realtime]: http://www.codeschool.com/courses/real-time-web-with-nodejs \ No newline at end of file +[realtime]: http://www.codeschool.com/courses/real-time-web-with-nodejs From f17fed8e9d17230a366c9c89bd97e14474bd43ab Mon Sep 17 00:00:00 2001 From: dan-nl Date: Sun, 27 Apr 2014 21:29:51 +0200 Subject: [PATCH 10/11] file clean-up --- app.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index 5cff9a7..60cb9c7 100644 --- a/app.js +++ b/app.js @@ -10,8 +10,8 @@ express = require( 'express' ), app = express(), http = require( 'http' ), - server = http.createServer(app), - io = require( 'socket.io' ).listen(server), + server = http.createServer( app ), + io = require( 'socket.io' ).listen( server ), path = require( 'path' ), port = Number( process.env.PORT || 8080 ), max_messages = 100; @@ -78,7 +78,7 @@ messages.forEach( function( message ) { message = JSON.parse( message ); - client.emit( 'messages',message.name + ' : ' + message.data ); + client.emit( 'messages', message.name + ' : ' + message.data ); }); }); }); From 0cfe946d7461257db24bf53954b16514df83ebed Mon Sep 17 00:00:00 2001 From: dan-nl Date: Mon, 28 Apr 2014 07:24:45 +0200 Subject: [PATCH 11/11] modified the front-end object --- app.js | 1 + package.json | 4 +- public/js/js.js | 120 ++++++++++++++++++++++++++---------------------- 3 files changed, 67 insertions(+), 58 deletions(-) diff --git a/app.js b/app.js index 60cb9c7..4d393d8 100644 --- a/app.js +++ b/app.js @@ -105,4 +105,5 @@ redisClient.flushall(); }); }); + }()); diff --git a/package.json b/package.json index eafb200..9419633 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,5 @@ "socket.io": "0.9.14" }, "readme": "# Real Time Web With Node.js\n\nThis is the code for the [Real Time Web with Node.js](http://www.codeschool.com/courses/real-time-web-with-nodejs) demo app.\n\n## redis\n\nYou’ll need to make sure you have a redis server running in order to use the application see the [Redis Quick Start](http://redis.io/topics/quickstart) for information on installing redis.\n\n## Install\n\nThe fastest way to get __chattr__ up and running:\n\n * On Mac or Linux, make sure you have [nodejs][nodejs] and [npm][npm] installed\n\n```\ngit clone git@github.com:dan-nl/realtimewebnode.git\ncd realtimewebnode\nnpm install\nnpm start\n```", - "readmeFilename": "Readme.md", - "_id": "chattr@0.1.0", - "_from": "chattr@" + "readmeFilename": "Readme.md" } diff --git a/public/js/js.js b/public/js/js.js index fda3942..bfd37e6 100644 --- a/public/js/js.js +++ b/public/js/js.js @@ -1,76 +1,86 @@ -/*global io, prompt */ +/*global console, io, prompt */ /*jslint browser: true, white: true */ (function() { 'use strict'; + if ( window.io === undefined ) { console.log( 'oops ... socket.io did’t load' ); return; } - var nickname, - - server = io.connect( - '//' + - window.location.hostname + - ( window.location.port ? ':' + window.location.port : '' ) - ), - chatters = document.getElementById( 'chatters' ), - chat_input = document.getElementById( 'chat-input' ), - chat_console = document.getElementById( 'chat-console' ); - - function removeChatter( name ) { - var i, - current_chatters = document.querySelectorAll( '[data-name]' ), - ii = current_chatters.length; - - for ( i = 0; i < ii; i += 1 ) { - if ( name === current_chatters[i].getAttribute( 'data-name' ) ) { - current_chatters[i].parentNode.removeChild( current_chatters[i] ); - break; + + var chattr = { + + nickname: undefined, + server: io.connect( + '//' + + window.location.hostname + + ( window.location.port ? ':' + window.location.port : '' ) + ), + chatters: document.getElementById( 'chatters' ), + chat_form: document.getElementById( 'chat-form' ), + chat_input: document.getElementById( 'chat-input' ), + chat_console: document.getElementById( 'chat-console' ), + + + handleFormSubmit: function( evt ) { + evt.preventDefault(); + chattr.server.emit( 'messages', chattr.chat_input.value ); + chattr.insertMessage( chattr.nickname + ' : ' + chattr.chat_input.value ); + + if ( chattr.chat_input.value === 'flushall' ) { + chattr.server.emit( 'flushall' ); } - } - } - function insertChatter( name ) { - var new_chatter = document.createElement('li'); - new_chatter.setAttribute( 'data-name', name ); - new_chatter.setAttribute( 'class', 'connected' ); - new_chatter.innerHTML = name; - chatters.appendChild( new_chatter ); - } + chattr.chat_input.value = null; + }, - function insertMessage( message ) { - var new_message = document.createElement('span'); - new_message.innerHTML = message + '
      '; - chat_console.appendChild( new_message ); - chat_console.scrollTop = chat_console.scrollHeight; - } + handleServerConnect: function() { + chattr.chat_console.innerHTML = 'connected to the chat server
      '; + chattr.nickname = prompt( 'what is your nickanme?' ); + chattr.server.emit( 'join', chattr.nickname ); + }, - document.getElementById( 'chat-form' ).onsubmit = function( evt ) { - evt.preventDefault(); - server.emit( 'messages', chat_input.value ); - insertMessage( nickname + ' : ' + chat_input.value ); + init: function() { + chattr.chat_form.addEventListener( 'submit', chattr.handleFormSubmit, false ); + chattr.server.on( 'messages', chattr.insertMessage ); + chattr.server.on( 'connect', chattr.handleServerConnect ); + chattr.server.on( 'add chatter', chattr.insertChatter ); + chattr.server.on( 'remove chatter', chattr.removeChatter ); + }, - if ( chat_input.value === 'flushall' ) { - server.emit( 'flushall' ); - } + insertChatter: function( name ) { + var new_chatter = document.createElement('li'); + new_chatter.setAttribute( 'data-name', name ); + new_chatter.setAttribute( 'class', 'connected' ); + new_chatter.innerHTML = name; + chattr.chatters.appendChild( new_chatter ); + }, - chat_input.value = null; - }; + insertMessage: function( message ) { + var new_message = document.createElement('span'); + new_message.innerHTML = message + '
      '; + chattr.chat_console.appendChild( new_message ); + chattr.chat_console.scrollTop = chattr.chat_console.scrollHeight; + }, - server.on( 'messages', function( data ) { - insertMessage( data ); - }); + removeChatter: function( name ) { + var i, + current_chatters = document.querySelectorAll( '[data-name]' ), + ii = current_chatters.length; - server.on( 'connect', function() { - chat_console.innerHTML = 'connected to the chat server
      '; - nickname = prompt( 'what is your nickanme?' ); - server.emit( 'join', nickname ); - }); + for ( i = 0; i < ii; i += 1 ) { + if ( name === current_chatters[i].getAttribute( 'data-name' ) ) { + current_chatters[i].parentNode.removeChild( current_chatters[i] ); + break; + } + } + } + + }; - server.on( 'add chatter', insertChatter ); - server.on( 'remove chatter', removeChatter ); + chattr.init(); }());