From 0c32d63637499886a942bdb9e0cb2d806a85b694 Mon Sep 17 00:00:00 2001 From: William Whitworth Date: Wed, 5 Apr 2017 09:05:32 -0600 Subject: [PATCH 01/32] general file structure built --- .gitignore | 2 ++ README.md | 2 ++ app.js | 21 +++++++++++++++++++++ package.json | 31 +++++++++++++++++++++++++++++++ public/javascripts/sockets.js | 13 +++++++++++++ routes/index.js | 8 ++++++++ views/index.handlebars | 0 views/layouts/main.handlebars | 17 +++++++++++++++++ 8 files changed, 94 insertions(+) create mode 100644 .gitignore create mode 100644 app.js create mode 100644 package.json create mode 100644 public/javascripts/sockets.js create mode 100644 routes/index.js create mode 100644 views/index.handlebars create mode 100644 views/layouts/main.handlebars diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..63110f8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules/ +dump.rdb diff --git a/README.md b/README.md index 299362a..53b8adb 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,4 @@ # project_superchat Build a realtime multi-room chat application. Make it super. + +Renzo Tomlinson and Will Whitworth diff --git a/app.js b/app.js new file mode 100644 index 0000000..114d4eb --- /dev/null +++ b/app.js @@ -0,0 +1,21 @@ +const express = require("express"); +const app = express(); +const server = require("http").createServer(app); +const io = require("socket.io")(server); +const path = require("path"); +const index = require("./routes/index.js"); + +// Set up handlebars +const exphbs = require("express-handlebars"); +app.engine("handlebars", exphbs({ defaultLayout: "main" })); +app.set("view engine", "handlebars"); + +// Set up body-parser +const bodyParser = require("body-parser"); +app.use(bodyParser.urlencoded({ extended: false })); + +app.use(express.static(path.join(__dirname, "public"))); + +app.use("/", index); + +server.listen(3000); diff --git a/package.json b/package.json new file mode 100644 index 0000000..fd733a5 --- /dev/null +++ b/package.json @@ -0,0 +1,31 @@ +{ + "name": "project_superchat", + "version": "1.0.0", + "description": "Build a realtime multi-room chat application. Make it super.", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "start": "nodemon app.js" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/William-Charles/project_superchat.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/William-Charles/project_superchat/issues" + }, + "homepage": "https://github.com/William-Charles/project_superchat#readme", + "dependencies": { + "body-parser": "^1.17.1", + "express": "^4.15.2", + "express-handlebars": "^3.0.0", + "http": "0.0.0", + "path": "^0.12.7", + "redis": "^2.7.1", + "shorthash": "0.0.2", + "socket.io": "^1.7.3", + "socket.io-client": "^1.7.3" + } +} diff --git a/public/javascripts/sockets.js b/public/javascripts/sockets.js new file mode 100644 index 0000000..b48eb12 --- /dev/null +++ b/public/javascripts/sockets.js @@ -0,0 +1,13 @@ +$(document).ready(function() { + var currentUrl = $(location).attr("href"); + console.log(location); + var socket = io.connect(currentUrl); + socket.on("new count", function(obj) { + var id = "#" + obj.id; + $(id).text(obj.clicks); + }); + + $(".shortlink").click(function() { + socket.emit("increment", { href: $(this).attr("href") }); + }); +}); diff --git a/routes/index.js b/routes/index.js new file mode 100644 index 0000000..7e544e0 --- /dev/null +++ b/routes/index.js @@ -0,0 +1,8 @@ +const express = require("express"); +const router = express.Router(); + +router.get("/", (req, res) => { + res.render("index"); +}); + +module.exports = router; diff --git a/views/index.handlebars b/views/index.handlebars new file mode 100644 index 0000000..e69de29 diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars new file mode 100644 index 0000000..5f46adc --- /dev/null +++ b/views/layouts/main.handlebars @@ -0,0 +1,17 @@ + + + + + + + Url Shortener + + + + + + + {{{body}}} + + + From 0758b10ab4a9074093cca0b2ec422b83bdb6d309 Mon Sep 17 00:00:00 2001 From: Renzo Tomlinson Date: Wed, 5 Apr 2017 15:37:04 +0000 Subject: [PATCH 02/32] Add notes to README.md --- README.md | 33 +++++++++++++++++++++++++++++++++ app.js | 34 +++++++++++++++++++++++++++++++++- views/error.handlebars | 3 +++ 3 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 views/error.handlebars diff --git a/README.md b/README.md index 53b8adb..54ab68a 100644 --- a/README.md +++ b/README.md @@ -2,3 +2,36 @@ Build a realtime multi-room chat application. Make it super. Renzo Tomlinson and Will Whitworth + + + +Notes: + +If user has username cookie, +Send them to the chat page +If not, then require them to submit a username which sets the cookie +and redirects them to the chatpage + + + +They get a default chatroom +--Get a list of chatrooms that they can click on +Only one chatroom displayed at a time + + +They can submit posts to the chatroom +Posts submitted through chatroom are handled with websockets +New room submissions are handled with websocks + +Handle chatroom changes with a post request (partials? Possible to just use websockets) + + + + + + + +It should update in realtime on every browser that is connected to the server + + + diff --git a/app.js b/app.js index 114d4eb..565dfa7 100644 --- a/app.js +++ b/app.js @@ -3,8 +3,15 @@ const app = express(); const server = require("http").createServer(app); const io = require("socket.io")(server); const path = require("path"); + + +//Require routes const index = require("./routes/index.js"); + + + + // Set up handlebars const exphbs = require("express-handlebars"); app.engine("handlebars", exphbs({ defaultLayout: "main" })); @@ -18,4 +25,29 @@ app.use(express.static(path.join(__dirname, "public"))); app.use("/", index); -server.listen(3000); + + + +// catch 404 and forward to error handler +app.use(function(req, res, next) { + var err = new Error('Not Found'); + err.status = 404; + next(err); +}); + +// error handler +app.use(function(err, req, res, next) { + // set locals, only providing error in development + res.locals.message = err.message; + res.locals.error = req.app.get('env') === 'development' ? err : {}; + // render the error page + res.status(err.status || 500); + res.render('error'); +}); + + + + + + +server.listen(process.env.PATH || 3000); diff --git a/views/error.handlebars b/views/error.handlebars new file mode 100644 index 0000000..b475b0c --- /dev/null +++ b/views/error.handlebars @@ -0,0 +1,3 @@ +

{{message}}

+

{{error.status}}

+
{{error.stack}}
\ No newline at end of file From 1bb187ff09f0e1878bb16ec2fc9cf7ebd5331e9f Mon Sep 17 00:00:00 2001 From: William Whitworth Date: Wed, 5 Apr 2017 10:04:19 -0600 Subject: [PATCH 03/32] building html of login --- app.js | 23 ++++++----------------- package.json | 1 + routes/index.js | 7 +++++++ views/chat.handlebars | 0 views/index.handlebars | 30 ++++++++++++++++++++++++++++++ views/layouts/main.handlebars | 13 ++++++++++++- 6 files changed, 56 insertions(+), 18 deletions(-) create mode 100644 views/chat.handlebars diff --git a/app.js b/app.js index 565dfa7..a67ed5d 100644 --- a/app.js +++ b/app.js @@ -3,21 +3,18 @@ const app = express(); const server = require("http").createServer(app); const io = require("socket.io")(server); const path = require("path"); - +const cookieParser = require("cookie-parser"); //Require routes const index = require("./routes/index.js"); - - - - // Set up handlebars const exphbs = require("express-handlebars"); app.engine("handlebars", exphbs({ defaultLayout: "main" })); app.set("view engine", "handlebars"); // Set up body-parser +app.use(cookieParser()); const bodyParser = require("body-parser"); app.use(bodyParser.urlencoded({ extended: false })); @@ -25,12 +22,9 @@ app.use(express.static(path.join(__dirname, "public"))); app.use("/", index); - - - // catch 404 and forward to error handler app.use(function(req, res, next) { - var err = new Error('Not Found'); + var err = new Error("Not Found"); err.status = 404; next(err); }); @@ -39,15 +33,10 @@ app.use(function(req, res, next) { app.use(function(err, req, res, next) { // set locals, only providing error in development res.locals.message = err.message; - res.locals.error = req.app.get('env') === 'development' ? err : {}; + res.locals.error = req.app.get("env") === "development" ? err : {}; // render the error page res.status(err.status || 500); - res.render('error'); + res.render("error"); }); - - - - - -server.listen(process.env.PATH || 3000); +server.listen(process.env.PORT || 3000); diff --git a/package.json b/package.json index fd733a5..62656cf 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "homepage": "https://github.com/William-Charles/project_superchat#readme", "dependencies": { "body-parser": "^1.17.1", + "cookie-parser": "^1.4.3", "express": "^4.15.2", "express-handlebars": "^3.0.0", "http": "0.0.0", diff --git a/routes/index.js b/routes/index.js index 7e544e0..fd36a26 100644 --- a/routes/index.js +++ b/routes/index.js @@ -3,6 +3,13 @@ const router = express.Router(); router.get("/", (req, res) => { res.render("index"); + + // let user = req.cookie.user; + // if (user) { + // res.render("chat"); + // } else { + // res.render("index"); + // } }); module.exports = router; diff --git a/views/chat.handlebars b/views/chat.handlebars new file mode 100644 index 0000000..e69de29 diff --git a/views/index.handlebars b/views/index.handlebars index e69de29..713205e 100644 --- a/views/index.handlebars +++ b/views/index.handlebars @@ -0,0 +1,30 @@ +
+
+ + + +
+
+ + +
+
+ + +
+
+ + +

Example block-level help text here.

+
+
+ +
+ +
+ + +
+
diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars index 5f46adc..9fe45d2 100644 --- a/views/layouts/main.handlebars +++ b/views/layouts/main.handlebars @@ -11,7 +11,18 @@ - {{{body}}} + + + +
+ {{{body}}} +
From df65d2b35a86ca671322d5c712ce258aa5502998 Mon Sep 17 00:00:00 2001 From: Renzo Tomlinson Date: Wed, 5 Apr 2017 16:34:20 +0000 Subject: [PATCH 04/32] Add websocket connection --- app.js | 13 +++++++++++++ public/javascripts/sockets.js | 9 ++------- routes/index.js | 22 ++++++++++++++-------- views/chat.handlebars | 24 ++++++++++++++++++++++++ views/index.handlebars | 25 +++---------------------- views/layouts/main.handlebars | 1 - 6 files changed, 56 insertions(+), 38 deletions(-) diff --git a/app.js b/app.js index a67ed5d..f57dd62 100644 --- a/app.js +++ b/app.js @@ -39,4 +39,17 @@ app.use(function(err, req, res, next) { res.render("error"); }); +///////////////////// +io.on('connection', (client) => { + console.log("New connection!"); + client.emit('connection'); + + + +}); + + + + + server.listen(process.env.PORT || 3000); diff --git a/public/javascripts/sockets.js b/public/javascripts/sockets.js index b48eb12..c110bc7 100644 --- a/public/javascripts/sockets.js +++ b/public/javascripts/sockets.js @@ -2,12 +2,7 @@ $(document).ready(function() { var currentUrl = $(location).attr("href"); console.log(location); var socket = io.connect(currentUrl); - socket.on("new count", function(obj) { - var id = "#" + obj.id; - $(id).text(obj.clicks); - }); - - $(".shortlink").click(function() { - socket.emit("increment", { href: $(this).attr("href") }); + socket.on("connection", (data) => { + console.log("We got connected!"); }); }); diff --git a/routes/index.js b/routes/index.js index fd36a26..ada177b 100644 --- a/routes/index.js +++ b/routes/index.js @@ -2,14 +2,20 @@ const express = require("express"); const router = express.Router(); router.get("/", (req, res) => { - res.render("index"); - - // let user = req.cookie.user; - // if (user) { - // res.render("chat"); - // } else { - // res.render("index"); - // } + let user = req.cookies.user; + if (user) { + res.render("chat"); + } else { + res.render("index"); + } }); + +router.post('/', (req, res) => { + let username = req.body.username; + res.cookie('user', username); + res.redirect('/'); +}); + + module.exports = router; diff --git a/views/chat.handlebars b/views/chat.handlebars index e69de29..c33d55d 100644 --- a/views/chat.handlebars +++ b/views/chat.handlebars @@ -0,0 +1,24 @@ +

THE GREATEST CHAT ROOM EVER!

+ + + + + + + + + + + + + + + + + + + + + + + diff --git a/views/index.handlebars b/views/index.handlebars index 713205e..e8a8c47 100644 --- a/views/index.handlebars +++ b/views/index.handlebars @@ -1,30 +1,11 @@
- - - -
+
- - -
-
- - -
-
- - -

Example block-level help text here.

-
-
- + +
- -
diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars index 9fe45d2..8ec43b4 100644 --- a/views/layouts/main.handlebars +++ b/views/layouts/main.handlebars @@ -7,7 +7,6 @@ Url Shortener - From ac3140251706eb087b019c89c722f24020509fc1 Mon Sep 17 00:00:00 2001 From: William Whitworth Date: Wed, 5 Apr 2017 11:05:59 -0600 Subject: [PATCH 05/32] more layout html --- app.js | 19 ++++++++-------- lib/ioOps.js | 1 + lib/redisOps.js | 10 ++++++++ public/javascripts/sockets.js | 2 +- views/chat.handlebars | 43 ++++++++++++++++++++++++++++++++++- 5 files changed, 63 insertions(+), 12 deletions(-) create mode 100644 lib/ioOps.js create mode 100644 lib/redisOps.js diff --git a/app.js b/app.js index f57dd62..0410057 100644 --- a/app.js +++ b/app.js @@ -4,6 +4,7 @@ const server = require("http").createServer(app); const io = require("socket.io")(server); const path = require("path"); const cookieParser = require("cookie-parser"); +const ioOps = require("./lib/ioOps"); //Require routes const index = require("./routes/index.js"); @@ -40,16 +41,14 @@ app.use(function(err, req, res, next) { }); ///////////////////// -io.on('connection', (client) => { - console.log("New connection!"); - client.emit('connection'); - - - +io.on("connection", client => { + console.log("New connection!"); + client.emit("connection"); + //new room + //ioOps.newRoom(name) + + //ioOps.js + //redisOps.js }); - - - - server.listen(process.env.PORT || 3000); diff --git a/lib/ioOps.js b/lib/ioOps.js new file mode 100644 index 0000000..a67da9a --- /dev/null +++ b/lib/ioOps.js @@ -0,0 +1 @@ +const redisOps = require("./redisOps"); diff --git a/lib/redisOps.js b/lib/redisOps.js new file mode 100644 index 0000000..f4a71c5 --- /dev/null +++ b/lib/redisOps.js @@ -0,0 +1,10 @@ +//const redisClient = require("redis").createClient(); + +function createChatRoom(roomName) { + let listOfMessages = []; + redisClient.hsetnx("rooms", roomName, listOfMessages, (err, data) => { + callback(shortUrl); + }); +} + +module.exports = {}; diff --git a/public/javascripts/sockets.js b/public/javascripts/sockets.js index c110bc7..5116355 100644 --- a/public/javascripts/sockets.js +++ b/public/javascripts/sockets.js @@ -2,7 +2,7 @@ $(document).ready(function() { var currentUrl = $(location).attr("href"); console.log(location); var socket = io.connect(currentUrl); - socket.on("connection", (data) => { + socket.on("connection", data => { console.log("We got connected!"); }); }); diff --git a/views/chat.handlebars b/views/chat.handlebars index c33d55d..5b86278 100644 --- a/views/chat.handlebars +++ b/views/chat.handlebars @@ -1,9 +1,50 @@

THE GREATEST CHAT ROOM EVER!

+
+
+ + + + + + + + + + + +
First Name
Mark
+
+
+ + + + + + + + + + + +
First Name
Mark
+
+
+
+
+ + +
+ +
+
+
+ @@ -19,6 +60,6 @@ - + From c6dcf058783b85d11cddc517723c7d857ee03a1e Mon Sep 17 00:00:00 2001 From: Renzo Tomlinson Date: Wed, 5 Apr 2017 18:09:13 +0000 Subject: [PATCH 06/32] Add socket listeners on client --- app.js | 27 ++++++++++--- lib/ioOps.js | 16 ++++++++ lib/redisOps.js | 72 ++++++++++++++++++++++++++++++++--- public/javascripts/sockets.js | 22 +++++++++++ views/chat.handlebars | 6 +-- 5 files changed, 129 insertions(+), 14 deletions(-) diff --git a/app.js b/app.js index 0410057..4628bd5 100644 --- a/app.js +++ b/app.js @@ -5,6 +5,10 @@ const io = require("socket.io")(server); const path = require("path"); const cookieParser = require("cookie-parser"); const ioOps = require("./lib/ioOps"); +const redisOps = require('./lib/redisOps'); + + + //Require routes const index = require("./routes/index.js"); @@ -42,13 +46,24 @@ app.use(function(err, req, res, next) { ///////////////////// io.on("connection", client => { - console.log("New connection!"); - client.emit("connection"); - //new room - //ioOps.newRoom(name) + console.log("New connection!"); + client.emit("connection"); + //new room + console.log("after the emit connection"); + //ioOps.newRoom(name) + client.on('new room', (data) => { + console.log(`data from client ${ data }`); + redisOps.createChatRoom(data); + //io.emit(new room) tells all the clients to update their rooms + + let stringOHTML = ioOps.makeNewRoomHTML(data); + io.emit('new room', stringOHTML); + + + + - //ioOps.js - //redisOps.js + }); }); server.listen(process.env.PORT || 3000); diff --git a/lib/ioOps.js b/lib/ioOps.js index a67da9a..5fa4bc7 100644 --- a/lib/ioOps.js +++ b/lib/ioOps.js @@ -1 +1,17 @@ const redisOps = require("./redisOps"); + +let ioOps = {}; + + +ioOps.makeNewRoomHTML = function makeNewRoomHTML(roomName) { + + let htmlString = `${ roomName }`; + return htmlString +} + + + + + + +module.exports = ioOps; \ No newline at end of file diff --git a/lib/redisOps.js b/lib/redisOps.js index f4a71c5..e4bee5a 100644 --- a/lib/redisOps.js +++ b/lib/redisOps.js @@ -1,10 +1,72 @@ -//const redisClient = require("redis").createClient(); +const redisClient = require("redis").createClient(); function createChatRoom(roomName) { - let listOfMessages = []; - redisClient.hsetnx("rooms", roomName, listOfMessages, (err, data) => { - callback(shortUrl); + let listOfMessages = "[]"; + return new Promise((resolve, reject) => { + redisClient.hsetnx("rooms", roomName, listOfMessages, (err, data) => { + if (err) { + reject(err); + } + resolve(data); + }); }); } -module.exports = {}; + +function getChatRoomMessages(roomName) { + getChatRoom(roomName) + .then((data) => { + return data; + }, (err) => { + return err; + }); +} + + +function getChatRoom(roomName) { + return new Promise((resolve, reject) => { + redisClient.hget("rooms", roomName, (err, data) => { + if (err) { + reject(err); + } + resolve(data); + }); + }); +} + +function getAllChatRooms() { + return _getAllOfHash("rooms"); +}; + + + +function _getAllOfHash(hash) { + return new Promise((resolve, reject) => { + redisClient.hgetall(hash, (err, data) => { + if (err) { + reject(err); + } + resolve(data); + }); + }); +} + + + + + + + + +module.exports = { + createChatRoom, + getChatRoom, + getChatRoomMessages + +}; + + + + + + diff --git a/public/javascripts/sockets.js b/public/javascripts/sockets.js index 5116355..1655a08 100644 --- a/public/javascripts/sockets.js +++ b/public/javascripts/sockets.js @@ -5,4 +5,26 @@ $(document).ready(function() { socket.on("connection", data => { console.log("We got connected!"); }); + + socket.on("new room", stringOHTML => { + //find the rooms table + //and append it to the end of the table + $("#rooms tbody").append(stringOHTML); + + + }); + + + + $('#newRoom').submit((event) => { + console.log("submit event caught before emit"); + event.preventDefault(); + socket.emit('new room', 'bunnies'); + return false; + }); + + + + + }); diff --git a/views/chat.handlebars b/views/chat.handlebars index 5b86278..5712468 100644 --- a/views/chat.handlebars +++ b/views/chat.handlebars @@ -3,7 +3,7 @@
- +
@@ -18,7 +18,7 @@
-
First Name
+
@@ -34,7 +34,7 @@
-
+
First Name