Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Grand finale #21

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Grand finale #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f63205f
added lesson 1 code
May 3, 2017
6afe82e
added lesson 2 code
May 3, 2017
33448a5
added lesson 3 code
May 3, 2017
ba02bae
added lesson 4 code
May 3, 2017
bf9fbb2
replace semi-colon with comma
sattamjh Jun 26, 2017
1d40da3
Merge pull request #1 from sattamjh/patch-1
Jun 26, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
});

});
26 changes: 26 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
}
22 changes: 22 additions & 0 deletions public/chat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 += '<p><strong>' + data.handle + ': </strong>' + data.message + '</p>';
});
23 changes: 23 additions & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebScockets 101</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.js"></script>
<link href="/styles.css" rel="stylesheet" />
</head>
<body>

<div id="mario-chat">
<h2>Mario Chat</h2>
<div id="chat-window">
<div id="output"></div>
</div>
<input id="handle" type="text" placeholder="Handle" />
<input id="message" type="text" placeholder="Message" />
<button id="send">Send</button>
</div>

</body>
<script src="/chat.js"></script>
</html>
69 changes: 69 additions & 0 deletions public/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}