From f63205f3120970dce9abf8b029f271d479c79bcd Mon Sep 17 00:00:00 2001 From: iamshaunjp Date: Wed, 3 May 2017 19:33:50 +0100 Subject: [PATCH 1/3] added lesson 1 code --- package.json | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 package.json diff --git a/package.json b/package.json new file mode 100644 index 0000000..1157da3 --- /dev/null +++ b/package.json @@ -0,0 +1,22 @@ +{ + "name": "websockets-playlist", + "version": "1.0.0", + "description": "A chat app using WebSockets", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/iamshaunjp/websockets-playlist.git" + }, + "author": "The Net Ninja", + "license": "ISC", + "bugs": { + "url": "https://github.com/iamshaunjp/websockets-playlist/issues" + }, + "homepage": "https://github.com/iamshaunjp/websockets-playlist#readme", + "dependencies": { + "express": "^4.15.2" + } +} From 6afe82ec4764e90c70e64b9beb8f1850f2aa550f Mon Sep 17 00:00:00 2001 From: iamshaunjp Date: Wed, 3 May 2017 20:48:28 +0100 Subject: [PATCH 2/3] added lesson 2 code --- index.js | 10 +++++++ package.json | 3 +++ public/index.html | 11 ++++++++ public/styles.css | 69 +++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 93 insertions(+) create mode 100644 index.js create mode 100644 public/index.html create mode 100644 public/styles.css diff --git a/index.js b/index.js new file mode 100644 index 0000000..0f74b43 --- /dev/null +++ b/index.js @@ -0,0 +1,10 @@ +var express = require('express'); + +// App setup +var app = express(); +var server = app.listen(4000, function(){ + console.log('listening for requests on port 4000,'); +}); + +// Static files +app.use(express.static('public')); diff --git a/package.json b/package.json index 1157da3..f5a9c24 100644 --- a/package.json +++ b/package.json @@ -18,5 +18,8 @@ "homepage": "https://github.com/iamshaunjp/websockets-playlist#readme", "dependencies": { "express": "^4.15.2" + }, + "devDependencies": { + "nodemon": "^1.11.0" } } diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..8a23772 --- /dev/null +++ b/public/index.html @@ -0,0 +1,11 @@ + + + + + WebScockets 101 + + + +

Woo, you see me!

+ + diff --git a/public/styles.css b/public/styles.css new file mode 100644 index 0000000..a28e285 --- /dev/null +++ b/public/styles.css @@ -0,0 +1,69 @@ +body{ + font-family: 'Nunito'; +} + +h2{ + font-size: 18px; + padding: 10px 20px; + color: #575ed8; +} + +#mario-chat{ + max-width: 600px; + margin: 30px auto; + border: 1px solid #ddd; + box-shadow: 1px 3px 5px rgba(0,0,0,0.05); + border-radius: 2px; +} + +#chat-window{ + height: 400px; + overflow: auto; + background: #f9f9f9; +} + +#output p{ + padding: 14px 0px; + margin: 0 20px; + border-bottom: 1px solid #e9e9e9; + color: #555; +} + +#feedback p{ + color: #aaa; + padding: 14px 0px; + margin: 0 20px; +} + +#output strong{ + color: #575ed8; +} + +label{ + box-sizing: border-box; + display: block; + padding: 10px 20px; +} + +input{ + padding: 10px 20px; + box-sizing: border-box; + background: #eee; + border: 0; + display: block; + width: 100%; + background: #fff; + border-bottom: 1px solid #eee; + font-family: Nunito; + font-size: 16px; +} + +button{ + background: #575ed8; + color: #fff; + font-size: 18px; + border: 0; + padding: 12px 0; + width: 100%; + border-radius: 0 0 2px 2px; +} From 33448a5638859e64c7ed7e6bb59ece077f7ab338 Mon Sep 17 00:00:00 2001 From: iamshaunjp Date: Wed, 3 May 2017 21:01:42 +0100 Subject: [PATCH 3/3] added lesson 3 code --- index.js | 9 +++++++++ package.json | 3 ++- public/chat.js | 2 ++ public/index.html | 3 +++ 4 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 public/chat.js diff --git a/index.js b/index.js index 0f74b43..32a10d7 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,5 @@ var express = require('express'); +var socket = require('socket.io'); // App setup var app = express(); @@ -8,3 +9,11 @@ var server = app.listen(4000, function(){ // Static files app.use(express.static('public')); + +// Socket setup & pass server +var io = socket(server); +io.on('connection', (socket) => { + + console.log('made socket connection', socket.id); + +}); diff --git a/package.json b/package.json index f5a9c24..7a08894 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,8 @@ }, "homepage": "https://github.com/iamshaunjp/websockets-playlist#readme", "dependencies": { - "express": "^4.15.2" + "express": "^4.15.2", + "socket.io": "^1.7.3" }, "devDependencies": { "nodemon": "^1.11.0" diff --git a/public/chat.js b/public/chat.js new file mode 100644 index 0000000..84b5877 --- /dev/null +++ b/public/chat.js @@ -0,0 +1,2 @@ +// Make connection +var socket = io.connect('http://localhost:4000'); diff --git a/public/index.html b/public/index.html index 8a23772..5aeaeff 100644 --- a/public/index.html +++ b/public/index.html @@ -3,9 +3,12 @@ WebScockets 101 +

Woo, you see me!

+ +