diff --git a/index.js b/index.js new file mode 100644 index 0000000..85fde90 --- /dev/null +++ b/index.js @@ -0,0 +1,25 @@ +var express = require('express'); +var socket = require('socket.io'); + +// 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')); + +// Socket setup & pass server +var io = socket(server); +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/package.json b/package.json new file mode 100644 index 0000000..7a08894 --- /dev/null +++ b/package.json @@ -0,0 +1,26 @@ +{ + "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", + "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..dfef0ed --- /dev/null +++ b/public/chat.js @@ -0,0 +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 new file mode 100644 index 0000000..cebcd46 --- /dev/null +++ b/public/index.html @@ -0,0 +1,23 @@ + + + + + WebScockets 101 + + + + + +
+

Mario Chat

+
+
+
+ + + +
+ + + + 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; +}