From f63205f3120970dce9abf8b029f271d479c79bcd Mon Sep 17 00:00:00 2001 From: iamshaunjp Date: Wed, 3 May 2017 19:33:50 +0100 Subject: [PATCH 1/5] 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/5] 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/5] 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!

+ + From ba02bae2369ca15d6c4e5bdb725a7f112dacc189 Mon Sep 17 00:00:00 2001 From: iamshaunjp Date: Wed, 3 May 2017 21:07:48 +0100 Subject: [PATCH 4/5] added lesson 4 code --- index.js | 6 ++++++ public/chat.js | 20 ++++++++++++++++++++ public/index.html | 13 +++++++++++-- 3 files changed, 37 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 32a10d7..85fde90 100644 --- a/index.js +++ b/index.js @@ -16,4 +16,10 @@ io.on('connection', (socket) => { console.log('made socket connection', socket.id); + // Handle chat event + socket.on('chat', function(data){ + // console.log(data); + io.sockets.emit('chat', data); + }); + }); diff --git a/public/chat.js b/public/chat.js index 84b5877..bfa26e5 100644 --- a/public/chat.js +++ b/public/chat.js @@ -1,2 +1,22 @@ // Make connection var socket = io.connect('http://localhost:4000'); + +// Query DOM +var message = document.getElementById('message'); + handle = document.getElementById('handle'), + btn = document.getElementById('send'), + output = document.getElementById('output'); + +// Emit events +btn.addEventListener('click', function(){ + socket.emit('chat', { + message: message.value, + handle: handle.value + }); + message.value = ""; +}); + +// Listen for events +socket.on('chat', function(data){ + output.innerHTML += '

' + data.handle + ': ' + data.message + '

'; +}); diff --git a/public/index.html b/public/index.html index 5aeaeff..cebcd46 100644 --- a/public/index.html +++ b/public/index.html @@ -7,8 +7,17 @@ -

Woo, you see me!

+ +
+

Mario Chat

+
+
+
+ + + +
- + From bf9fbb27f32509a7bdcb063aff7d59da8109e52a Mon Sep 17 00:00:00 2001 From: Sattam Date: Mon, 26 Jun 2017 03:59:50 +0300 Subject: [PATCH 5/5] replace semi-colon with comma at the first line of DOM Query ( end of message variable line) --- public/chat.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/chat.js b/public/chat.js index bfa26e5..dfef0ed 100644 --- a/public/chat.js +++ b/public/chat.js @@ -2,7 +2,7 @@ var socket = io.connect('http://localhost:4000'); // Query DOM -var message = document.getElementById('message'); +var message = document.getElementById('message'), handle = document.getElementById('handle'), btn = document.getElementById('send'), output = document.getElementById('output');