diff --git a/Gruntfile.js b/Gruntfile.js deleted file mode 100644 index df8bc7e..0000000 --- a/Gruntfile.js +++ /dev/null @@ -1,45 +0,0 @@ -module.exports = function(grunt) { - grunt.initConfig({ - jshint: { - files: { - src: [ - '**/.html', - '**/*.js', - // excluded files - '!node_modules/**/*', - '!vendor/**/*' - ] - }, - // http://www.jshint.com/docs/options/ - options: { - browser: true, - eqeqeq: true, - extract: 'auto', // http://bahmutov.calepin.co/linting-javascript-inside-html.html - forin: true, - freeze: true, - latedef: true, - maxdepth: 4, - maxparams: 3, - maxstatements: 10, - newcap: true - } - }, - validation: { - options: { - failHard: true, - reset: true - }, - files: { - src: [ - '**/*.html', - '!node_modules/**/*' - ] - } - } - }); - - grunt.loadNpmTasks('grunt-contrib-jshint'); - grunt.loadNpmTasks('grunt-html-validation'); - - grunt.registerTask('default', ['jshint', 'validation']); -}; diff --git a/README.md b/README.md deleted file mode 100644 index 13e8362..0000000 --- a/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# "Stateful" Assignment - -Make a learning resource with some sort of workflow/progression, which can be demarcated with steps/points/awards/badges/etc. Have the project pick up where the user left off if they refresh (or close and re-open) the page. See [persistence](https://github.com/bfl-itp/syllabus/blob/master/topics/persistence.md) page in syllabus for options. diff --git a/studentchat/Procfile b/studentchat/Procfile new file mode 100644 index 0000000..1da0cd6 --- /dev/null +++ b/studentchat/Procfile @@ -0,0 +1 @@ +web: node index.js diff --git a/studentchat/README.md b/studentchat/README.md new file mode 100644 index 0000000..94c12ea --- /dev/null +++ b/studentchat/README.md @@ -0,0 +1,36 @@ +# node-js-getting-started + +A barebones Node.js app using [Express 4](http://expressjs.com/). + +This application support the [Getting Started with Node on Heroku](https://devcenter.heroku.com/articles/getting-started-with-nodejs) article - check it out. + +## Running Locally + +Make sure you have [Node.js](http://nodejs.org/) and the [Heroku Toolbelt](https://toolbelt.heroku.com/) installed. + +```sh +$ git clone git@github.com:heroku/node-js-getting-started.git # or clone your own fork +$ cd node-js-getting-started +$ npm install +$ npm start +``` + +Your app should now be running on [localhost:5000](http://localhost:5000/). + +## Deploying to Heroku + +``` +$ heroku create +$ git push heroku master +$ heroku open +``` + +## Documentation + +For more information about using Node.js on Heroku, see these Dev Center articles: + +- [Getting Started with Node.js on Heroku](https://devcenter.heroku.com/articles/getting-started-with-nodejs) +- [Heroku Node.js Support](https://devcenter.heroku.com/articles/nodejs-support) +- [Node.js on Heroku](https://devcenter.heroku.com/categories/nodejs) +- [Best Practices for Node.js Development](https://devcenter.heroku.com/articles/node-best-practices) +- [Using WebSockets on Heroku with Node.js](https://devcenter.heroku.com/articles/node-websockets) diff --git a/studentchat/app.json b/studentchat/app.json new file mode 100644 index 0000000..8810ba2 --- /dev/null +++ b/studentchat/app.json @@ -0,0 +1,7 @@ +{ + "name": "Node.js Getting Started", + "description": "A barebones Node.js app using Express 4", + "repository": "https://github.com/heroku/node-js-getting-started", + "logo": "http://node-js-sample.herokuapp.com/node.svg", + "keywords": ["node", "express", "static"] +} diff --git a/studentchat/index.js b/studentchat/index.js new file mode 100644 index 0000000..ce22d97 --- /dev/null +++ b/studentchat/index.js @@ -0,0 +1,2 @@ + +module.exports = require('./lib'); diff --git a/studentchat/npm-debug.log b/studentchat/npm-debug.log new file mode 100644 index 0000000..882a47f --- /dev/null +++ b/studentchat/npm-debug.log @@ -0,0 +1,166 @@ +0 info it worked if it ends with ok +1 verbose cli [ '/usr/local/bin/node', +1 verbose cli '/usr/local/bin/npm', +1 verbose cli 'install', +1 verbose cli 'cd', +1 verbose cli 'node_modules' ] +2 info using npm@1.4.28 +3 info using node@v0.13.0-pre +4 verbose readDependencies using package.json deps +5 verbose cache add [ 'cd', null ] +6 verbose cache add name=undefined spec="cd" args=["cd",null] +7 verbose parsed url { protocol: null, +7 verbose parsed url slashes: null, +7 verbose parsed url auth: null, +7 verbose parsed url host: null, +7 verbose parsed url port: null, +7 verbose parsed url hostname: null, +7 verbose parsed url hash: null, +7 verbose parsed url search: null, +7 verbose parsed url query: null, +7 verbose parsed url pathname: 'cd', +7 verbose parsed url path: 'cd', +7 verbose parsed url href: 'cd' } +8 verbose cache add [ 'node_modules', null ] +9 verbose cache add name=undefined spec="node_modules" args=["node_modules",null] +10 verbose parsed url { protocol: null, +10 verbose parsed url slashes: null, +10 verbose parsed url auth: null, +10 verbose parsed url host: null, +10 verbose parsed url port: null, +10 verbose parsed url hostname: null, +10 verbose parsed url hash: null, +10 verbose parsed url search: null, +10 verbose parsed url query: null, +10 verbose parsed url pathname: 'node_modules', +10 verbose parsed url path: 'node_modules', +10 verbose parsed url href: 'node_modules' } +11 silly lockFile 03477819-cd cd +12 verbose lock cd /Users/jasondunne/.npm/03477819-cd.lock +13 silly lockFile 9193e35d-node-modules node_modules +14 verbose lock node_modules /Users/jasondunne/.npm/9193e35d-node-modules.lock +15 silly lockFile 03477819-cd cd +16 silly lockFile 03477819-cd cd +17 verbose addNamed [ 'cd', '' ] +18 verbose addNamed [ null, '*' ] +19 silly lockFile 086ccedd-cd cd@ +20 verbose lock cd@ /Users/jasondunne/.npm/086ccedd-cd.lock +21 silly lockFile 9193e35d-node-modules node_modules +22 silly lockFile 9193e35d-node-modules node_modules +23 silly addNameRange { name: 'cd', range: '*', hasData: false } +24 verbose addNamed [ 'node_modules', '' ] +25 verbose addNamed [ null, '*' ] +26 silly lockFile 1f43ecc2-node-modules node_modules@ +27 verbose lock node_modules@ /Users/jasondunne/.npm/1f43ecc2-node-modules.lock +28 verbose request where is /cd +29 verbose request registry https://registry.npmjs.org/ +30 verbose request id e7bf70d92bc22eba +31 verbose url raw /cd +32 verbose url resolving [ 'https://registry.npmjs.org/', './cd' ] +33 verbose url resolved https://registry.npmjs.org/cd +34 verbose request where is https://registry.npmjs.org/cd +35 info trying registry request attempt 1 at 20:08:07 +36 http GET https://registry.npmjs.org/cd +37 silly addNameRange { name: 'node_modules', range: '*', hasData: false } +38 verbose request where is /node_modules +39 verbose request registry https://registry.npmjs.org/ +40 verbose url raw /node_modules +41 verbose url resolving [ 'https://registry.npmjs.org/', './node_modules' ] +42 verbose url resolved https://registry.npmjs.org/node_modules +43 verbose request where is https://registry.npmjs.org/node_modules +44 info trying registry request attempt 1 at 20:08:07 +45 http GET https://registry.npmjs.org/node_modules +46 http 404 https://registry.npmjs.org/node_modules +47 verbose headers { date: 'Thu, 30 Oct 2014 00:08:07 GMT', +47 verbose headers server: 'CouchDB/1.5.0 (Erlang OTP/R16B03)', +47 verbose headers 'content-type': 'application/json', +47 verbose headers 'cache-control': 'max-age=0', +47 verbose headers 'content-length': '52', +47 verbose headers 'accept-ranges': 'bytes', +47 verbose headers via: '1.1 varnish', +47 verbose headers age: '0', +47 verbose headers 'x-served-by': 'cache-atl6223-ATL', +47 verbose headers 'x-cache': 'MISS', +47 verbose headers 'x-cache-hits': '0', +47 verbose headers 'x-timer': 'S1414627687.869601,VS0,VE79', +47 verbose headers connection: 'close' } +48 silly registry.get cb [ 404, +48 silly registry.get { date: 'Thu, 30 Oct 2014 00:08:07 GMT', +48 silly registry.get server: 'CouchDB/1.5.0 (Erlang OTP/R16B03)', +48 silly registry.get 'content-type': 'application/json', +48 silly registry.get 'cache-control': 'max-age=0', +48 silly registry.get 'content-length': '52', +48 silly registry.get 'accept-ranges': 'bytes', +48 silly registry.get via: '1.1 varnish', +48 silly registry.get age: '0', +48 silly registry.get 'x-served-by': 'cache-atl6223-ATL', +48 silly registry.get 'x-cache': 'MISS', +48 silly registry.get 'x-cache-hits': '0', +48 silly registry.get 'x-timer': 'S1414627687.869601,VS0,VE79', +48 silly registry.get connection: 'close' } ] +49 silly lockFile 1f43ecc2-node-modules node_modules@ +50 silly lockFile 1f43ecc2-node-modules node_modules@ +51 http 200 https://registry.npmjs.org/cd +52 silly registry.get cb [ 200, +52 silly registry.get { date: 'Thu, 30 Oct 2014 00:08:08 GMT', +52 silly registry.get server: 'CouchDB/1.5.0 (Erlang OTP/R16B03)', +52 silly registry.get etag: '"EWAO8NWVJFVIM8PTAQPBJC1FX"', +52 silly registry.get 'content-type': 'application/json', +52 silly registry.get 'cache-control': 'max-age=60', +52 silly registry.get 'content-length': '23546', +52 silly registry.get 'accept-ranges': 'bytes', +52 silly registry.get via: '1.1 varnish', +52 silly registry.get age: '0', +52 silly registry.get 'x-served-by': 'cache-atl6226-ATL', +52 silly registry.get 'x-cache': 'MISS', +52 silly registry.get 'x-cache-hits': '0', +52 silly registry.get 'x-timer': 'S1414627687.867203,VS0,VE147', +52 silly registry.get vary: 'Accept', +52 silly registry.get connection: 'close' } ] +53 silly addNameRange number 2 { name: 'cd', range: '*', hasData: true } +54 silly addNameRange versions [ 'cd', +54 silly addNameRange [ '0.0.1', +54 silly addNameRange '0.0.2', +54 silly addNameRange '0.1.0', +54 silly addNameRange '0.1.1', +54 silly addNameRange '0.1.2', +54 silly addNameRange '0.1.3', +54 silly addNameRange '0.2.0', +54 silly addNameRange '0.2.2', +54 silly addNameRange '0.3.0', +54 silly addNameRange '0.3.1', +54 silly addNameRange '0.3.2', +54 silly addNameRange '0.3.3' ] ] +55 verbose addNamed [ 'cd', '0.3.3' ] +56 verbose addNamed [ '0.3.3', '0.3.3' ] +57 silly lockFile 88438eb9-cd-0-3-3 cd@0.3.3 +58 verbose lock cd@0.3.3 /Users/jasondunne/.npm/88438eb9-cd-0-3-3.lock +59 silly lockFile 43e09ac3-gistry-npmjs-org-cd-cd-0-3-3-tgz https://registry.npmjs.org/cd/-/cd-0.3.3.tgz +60 verbose lock https://registry.npmjs.org/cd/-/cd-0.3.3.tgz /Users/jasondunne/.npm/43e09ac3-gistry-npmjs-org-cd-cd-0-3-3-tgz.lock +61 verbose addRemoteTarball [ 'https://registry.npmjs.org/cd/-/cd-0.3.3.tgz', +61 verbose addRemoteTarball '108ecb57bff93b96b9115c54573cfef3008ef94d' ] +62 info retry fetch attempt 1 at 20:08:08 +63 verbose fetch to= /var/folders/qp/50mhjy6x0zbcwdzlv6_v4nm40000gn/T/npm-64768-flteYDca/registry.npmjs.org/cd/-/cd-0.3.3.tgz +64 http GET https://registry.npmjs.org/cd/-/cd-0.3.3.tgz +65 http 200 https://registry.npmjs.org/cd/-/cd-0.3.3.tgz +66 silly lockFile 43e09ac3-gistry-npmjs-org-cd-cd-0-3-3-tgz https://registry.npmjs.org/cd/-/cd-0.3.3.tgz +67 silly lockFile 43e09ac3-gistry-npmjs-org-cd-cd-0-3-3-tgz https://registry.npmjs.org/cd/-/cd-0.3.3.tgz +68 silly lockFile 88438eb9-cd-0-3-3 cd@0.3.3 +69 silly lockFile 88438eb9-cd-0-3-3 cd@0.3.3 +70 silly lockFile 086ccedd-cd cd@ +71 silly lockFile 086ccedd-cd cd@ +72 error 404 404 Not Found: node_modules +72 error 404 +72 error 404 'node_modules' is not in the npm registry. +72 error 404 You should bug the author to publish it +72 error 404 It was specified as a dependency of 'node-js-getting-started' +72 error 404 +72 error 404 Note that you can also install from a +72 error 404 tarball, folder, or http url, or git url. +73 error System Darwin 14.0.0 +74 error command "/usr/local/bin/node" "/usr/local/bin/npm" "install" "cd" "node_modules" +75 error cwd /Users/jasondunne/Documents/studentchat/node-js-getting-started +76 error node -v v0.13.0-pre +77 error npm -v 1.4.28 +78 error code E404 +79 verbose exit [ 1, true ] diff --git a/studentchat/package.json b/studentchat/package.json new file mode 100644 index 0000000..2691813 --- /dev/null +++ b/studentchat/package.json @@ -0,0 +1,26 @@ +{ + "name": "node-js-getting-started", + "version": "0.1.2", + "description": "A sample Node.js app using Express 4", + "main": "index.js", + "scripts": { + "start": "node index.js" + }, + "dependencies": { + "express": "^4.9.8", + "socket.io": "1.2.0" + }, + "engines": { + "node": "0.10.x" + }, + "repository": { + "type": "git", + "url": "https://github.com/heroku/node-js-getting-started" + }, + "keywords": [ + "node", + "heroku", + "express" + ], + "license": "MIT" +} diff --git a/studentchat/public/index.html b/studentchat/public/index.html new file mode 100644 index 0000000..a6710e3 --- /dev/null +++ b/studentchat/public/index.html @@ -0,0 +1,28 @@ + + + + + Socket.IO Chat Example + + + + + + + + + + \ No newline at end of file diff --git a/studentchat/public/index.js b/studentchat/public/index.js new file mode 100644 index 0000000..ce22d97 --- /dev/null +++ b/studentchat/public/index.js @@ -0,0 +1,2 @@ + +module.exports = require('./lib'); diff --git a/studentchat/public/main.js b/studentchat/public/main.js new file mode 100644 index 0000000..cff3d74 --- /dev/null +++ b/studentchat/public/main.js @@ -0,0 +1,266 @@ +$(function() { + var FADE_TIME = 150; // ms + var TYPING_TIMER_LENGTH = 400; // ms + var COLORS = [ + '#e21400', '#91580f', '#f8a700', '#f78b00', + '#58dc00', '#287b00', '#a8f07a', '#4ae8c4', + '#3b88eb', '#3824aa', '#a700ff', '#d300e7' + ]; + + // Initialize varibles + var $window = $(window); + var $usernameInput = $('.usernameInput'); // Input for username + var $messages = $('.messages'); // Messages area + var $inputMessage = $('.inputMessage'); // Input message input box + + var $loginPage = $('.login.page'); // The login page + var $chatPage = $('.chat.page'); // The chatroom page + + // Prompt for setting a username + var username; + var connected = false; + var typing = false; + var lastTypingTime; + var $currentInput = $usernameInput.focus(); + + var socket = io(); + + function addParticipantsMessage (data) { + var message = ''; + if (data.numUsers === 1) { + message += "there's 1 participant"; + } else { + message += "there are " + data.numUsers + " participants"; + } + log(message); + } + + // Sets the client's username + function setUsername () { + username = cleanInput($usernameInput.val().trim()); + + // If the username is valid + if (username) { + $loginPage.fadeOut(); + $chatPage.show(); + $loginPage.off('click'); + $currentInput = $inputMessage.focus(); + + // Tell the server your username + socket.emit('add user', username); + } + } + + // Sends a chat message + function sendMessage () { + var message = $inputMessage.val(); + // Prevent markup from being injected into the message + message = cleanInput(message); + // if there is a non-empty message and a socket connection + if (message && connected) { + $inputMessage.val(''); + addChatMessage({ + username: username, + message: message + }); + // tell server to execute 'new message' and send along one parameter + socket.emit('new message', message); + } + } + + // Log a message + function log (message, options) { + var $el = $('
  • ').addClass('log').text(message); + addMessageElement($el, options); + } + + // Adds the visual chat message to the message list + function addChatMessage (data, options) { + // Don't fade the message in if there is an 'X was typing' + var $typingMessages = getTypingMessages(data); + options = options || {}; + if ($typingMessages.length !== 0) { + options.fade = false; + $typingMessages.remove(); + } + + var $usernameDiv = $('') + .text(data.username) + .css('color', getUsernameColor(data.username)); + var $messageBodyDiv = $('') + .text(data.message); + + var typingClass = data.typing ? 'typing' : ''; + var $messageDiv = $('
  • ') + .data('username', data.username) + .addClass(typingClass) + .append($usernameDiv, $messageBodyDiv); + + addMessageElement($messageDiv, options); + } + + // Adds the visual chat typing message + function addChatTyping (data) { + data.typing = true; + data.message = 'is typing'; + addChatMessage(data); + } + + // Removes the visual chat typing message + function removeChatTyping (data) { + getTypingMessages(data).fadeOut(function () { + $(this).remove(); + }); + } + + // Adds a message element to the messages and scrolls to the bottom + // el - The element to add as a message + // options.fade - If the element should fade-in (default = true) + // options.prepend - If the element should prepend + // all other messages (default = false) + function addMessageElement (el, options) { + var $el = $(el); + + // Setup default options + if (!options) { + options = {}; + } + if (typeof options.fade === 'undefined') { + options.fade = true; + } + if (typeof options.prepend === 'undefined') { + options.prepend = false; + } + + // Apply options + if (options.fade) { + $el.hide().fadeIn(FADE_TIME); + } + if (options.prepend) { + $messages.prepend($el); + } else { + $messages.append($el); + } + $messages[0].scrollTop = $messages[0].scrollHeight; + } + + // Prevents input from having injected markup + function cleanInput (input) { + return $('
    ').text(input).text(); + } + + // Updates the typing event + function updateTyping () { + if (connected) { + if (!typing) { + typing = true; + socket.emit('typing'); + } + lastTypingTime = (new Date()).getTime(); + + setTimeout(function () { + var typingTimer = (new Date()).getTime(); + var timeDiff = typingTimer - lastTypingTime; + if (timeDiff >= TYPING_TIMER_LENGTH && typing) { + socket.emit('stop typing'); + typing = false; + } + }, TYPING_TIMER_LENGTH); + } + } + + // Gets the 'X is typing' messages of a user + function getTypingMessages (data) { + return $('.typing.message').filter(function (i) { + return $(this).data('username') === data.username; + }); + } + + // Gets the color of a username through our hash function + function getUsernameColor (username) { + // Compute hash code + var hash = 7; + for (var i = 0; i < username.length; i++) { + hash = username.charCodeAt(i) + (hash << 5) - hash; + } + // Calculate color + var index = Math.abs(hash % COLORS.length); + return COLORS[index]; + } + + // Keyboard events + + $window.keydown(function (event) { + // Auto-focus the current input when a key is typed + if (!(event.ctrlKey || event.metaKey || event.altKey)) { + $currentInput.focus(); + } + // When the client hits ENTER on their keyboard + if (event.which === 13) { + if (username) { + sendMessage(); + socket.emit('stop typing'); + typing = false; + } else { + setUsername(); + } + } + }); + + $inputMessage.on('input', function() { + updateTyping(); + }); + + // Click events + + // Focus input when clicking anywhere on login page + $loginPage.click(function () { + $currentInput.focus(); + }); + + // Focus input when clicking on the message input's border + $inputMessage.click(function () { + $inputMessage.focus(); + }); + + // Socket events + + // Whenever the server emits 'login', log the login message + socket.on('login', function (data) { + connected = true; + // Display the welcome message + var message = "Welcome to Socket.IO Chat – "; + log(message, { + prepend: true + }); + addParticipantsMessage(data); + }); + + // Whenever the server emits 'new message', update the chat body + socket.on('new message', function (data) { + addChatMessage(data); + }); + + // Whenever the server emits 'user joined', log it in the chat body + socket.on('user joined', function (data) { + log(data.username + ' joined'); + addParticipantsMessage(data); + }); + + // Whenever the server emits 'user left', log it in the chat body + socket.on('user left', function (data) { + log(data.username + ' left'); + addParticipantsMessage(data); + removeChatTyping(data); + }); + + // Whenever the server emits 'typing', show the typing message + socket.on('typing', function (data) { + addChatTyping(data); + }); + + // Whenever the server emits 'stop typing', kill the typing message + socket.on('stop typing', function (data) { + removeChatTyping(data); + }); +}); diff --git a/studentchat/public/node.svg b/studentchat/public/node.svg new file mode 100644 index 0000000..3c7e161 --- /dev/null +++ b/studentchat/public/node.svg @@ -0,0 +1,17 @@ + + + + + + + diff --git a/studentchat/public/style.css b/studentchat/public/style.css new file mode 100644 index 0000000..62cbe09 --- /dev/null +++ b/studentchat/public/style.css @@ -0,0 +1,150 @@ +/* Fix user-agent */ + +* { + box-sizing: border-box; +} + +html { + font-weight: 300; + -webkit-font-smoothing: antialiased; +} + +html, input { + font-family: + "HelveticaNeue-Light", + "Helvetica Neue Light", + "Helvetica Neue", + Helvetica, + Arial, + "Lucida Grande", + sans-serif; +} + +html, body { + height: 100%; + margin: 0; + padding: 0; +} + +ul { + list-style: none; + word-wrap: break-word; +} + +/* Pages */ + +.pages { + height: 100%; + margin: 0; + padding: 0; + width: 100%; +} + +.page { + height: 100%; + position: absolute; + width: 100%; +} + +/* Login Page */ + +.login.page { + background-color: #000; +} + +.login.page .form { + height: 100px; + margin-top: -100px; + position: absolute; + + text-align: center; + top: 50%; + width: 100%; +} + +.login.page .form .usernameInput { + background-color: transparent; + border: none; + border-bottom: 2px solid #fff; + outline: none; + padding-bottom: 15px; + text-align: center; + width: 400px; +} + +.login.page .title { + font-size: 200%; +} + +.login.page .usernameInput { + font-size: 200%; + letter-spacing: 3px; +} + +.login.page .title, .login.page .usernameInput { + color: #fff; + font-weight: 100; +} + +/* Chat page */ + +.chat.page { + display: none; +} + +/* Font */ + +.messages { + font-size: 150%; +} + +.inputMessage { + font-size: 100%; +} + +.log { + color: gray; + font-size: 70%; + margin: 5px; + text-align: center; +} + +/* Messages */ + +.chatArea { + height: 100%; + padding-bottom: 60px; +} + +.messages { + height: 100%; + margin: 0; + overflow-y: scroll; + padding: 10px 20px 10px 20px; +} + +.message.typing .messageBody { + color: gray; +} + +.username { + float: left; + font-weight: 700; + overflow: hidden; + padding-right: 15px; + text-align: right; +} + +/* Input */ + +.inputMessage { + border: 10px solid #000; + bottom: 0; + height: 60px; + left: 0; + outline: none; + padding-left: 10px; + position: absolute; + right: 0; + width: 100%; +} diff --git a/studentchat/socketiochat/socket.io b/studentchat/socketiochat/socket.io new file mode 160000 index 0000000..4a0091b --- /dev/null +++ b/studentchat/socketiochat/socket.io @@ -0,0 +1 @@ +Subproject commit 4a0091b25ad5ad583b8098369019306c4f907278