Skip to content

Simple code example #3

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

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

Simple code example #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
59ed9d0
first commit, file set up
Dec 7, 2016
2c791a7
added pug as view engine; modified package.json; opened websocket
Dec 7, 2016
95fc451
finished message functionality
Dec 7, 2016
34d9068
working on rendering
Dec 7, 2016
4403937
deleted old dependencies and files; added new package.json and depend…
Dec 7, 2016
611c963
added html elements and first scripts to send message to server
Dec 7, 2016
88186ad
fixed render to HTML issue; added css styles to index.html
Dec 8, 2016
e9cf145
deleted css file
Dec 8, 2016
8e1ba8b
Adding username functionality
lizzkats Dec 8, 2016
0cf8741
Usernames work, need to work on styling
lizzkats Dec 8, 2016
d1ca50d
Adds some styling
lizzkats Dec 8, 2016
214cf8d
username functionality
lizzkats Dec 8, 2016
756793b
restored post lunch branches
Dec 8, 2016
b08f8e4
basic css styling
Dec 9, 2016
6dc21bd
Merge pull request #1 from alfonsotech/css-work1
alfonsotech Dec 9, 2016
de18f1f
minor css fixes
Dec 9, 2016
2b28384
add css styles details to make app feel lighter
Dec 9, 2016
89f5b6f
Update README.md
alfonsotech Dec 9, 2016
e1e56c2
Update README.md
alfonsotech Dec 9, 2016
a9ebd92
Merge pull request #2 from alfonsotech/css-additions
alfonsotech Dec 9, 2016
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
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
56 changes: 55 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,55 @@
# cat-chat
# Gruesome-Lynx chat-room-app

## Description

Build a simple, live, multi-user chat room - that's it!

Building this app will require use of HTML, CSS, JavaScript, homebrew/npm, Node.js, and other technologies or libraries (i.e. jQuery, Bootstrap, etc.) as needed. Developers will also have the opportunity to explore ["material design"](https://material.google.com/#) principles to make what could be a visually boring task more interesting.


## Context

Chat rooms are ubiquitous to online community building projects. If that is your sort of thing, chances are that you will want to build a chat room at some point in the near future. This project asks you to build your first, simple, live chat room for multiple users, and includes a number of stretch goals to allow you to make it more fancy (such as allowing users to log in, storing chat histories, creating chat threads, etc.), as allowed by time and experience.

Inspiration for this project can be found in [this tutorial](http://www.oreilly.com/pub/e/2266) by Peter Cooper.


## Specifications

- [x] Include a text input area and a chat window in a simple yet appealing User Inerface.
- [x] Use of material design principles to make chat room "feel" good.
- [x] Build Node.js server( and install dependencies, using brew and/or npm) .
- [x] Type message into a text box.
- [x] On enter/return, message is sent to chat window (and text input box is cleared).
- [x] Chat window displays multi-user's messages in real time using [websockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API).
- [x] Attach user info (like a name) to each message; in order to do this, developers will need to ask for and save a user's name, or assign user a handle or number.


## Stretch Goals
- [ ] Deploy using Heroku.
- [ ] Store chat histories for later retrieval (create persistence layer) .
- [ ] Enable users to search chat histories.
- [ ] Enable user to chat privately with any other user.
- [ ] Enable users to log in (using Github oAuth, for example).


### Required

_Do not remove these specs - they are required for all goals_.

- [ ] The artifact produced is properly licensed, preferably with the [MIT license][mit-license].

## Quality Rubric

- More than one user is able to chat back and forth using this web app: 50 point value
- Creative use of two dimensional space to make chat room "feel" good (e.g., through material design principles): 25 point value
- Readable, DRY Code: 25 point value

---

<!-- LICENSE -->

<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png" /></a>
<br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.

[mit-license]: https://opensource.org/licenses/MIT
41 changes: 41 additions & 0 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
var nicknames = [];


server.listen(5000);


app.get('/', function(request, response){
response.sendFile(__dirname + '/index.html');
});

// app.use(express.static('public'))
//
// app.use('/static', express.static(path.join(__dirname, 'public')))

io.sockets.on('connection', function(socket){
socket.on('new user', function(data, callback){
if (nicknames.indexOf(data) != -1) {
callback(false);
} else {
callback(true);
socket.nickname = data;
nicknames.push(socket.nickname);
updateNicknames();
}
});
function updateNicknames() {
io.sockets.emit('usernames', nicknames);
}
socket.on('disconnect', function(data) {
if(!socket.nickname) return;
nicknames.splice(nicknames.indexOf(socket.nickname), 1);
updateNicknames();
})
socket.on('send message', function(data) {
io.sockets.emit('new message', {msg: data, nick: socket.nickname});
});
});
Binary file added img-noise-361x370.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
287 changes: 287 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,287 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Chat</title>
<!-- <link rel="stylesheet" href="public/styles.css"> -->

<style>
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans|Roboto" rel="stylesheet">
<style>
* {
box-sizing: border-box;
/*outline: 1px dotted red;*/
}
html {
font-family: 'Roboto','Noto Sans', sans-serif;
background-color: #00BCD4;
color: #F0FDFF;

font-weight: lighter;
}
ul {
list-style: none;
}
.top-banner {
background-color: #00BCD4;
padding: 25px;
margin-bottom: 40px;
text-align: center;
width: 100%;
-webkit-box-shadow: 6px 7px 21px -6px rgba(255,255,255,0.76);
-moz-box-shadow: 6px 7px 21px -6px rgba(255,255,255,0.76);
box-shadow: 6px 7px 21px -6px rgba(255,255,255,0.76);

}
.title {
font-family: 'Roboto', sans-serif;
font-weight: 900;
color: #F0FDFF;
text-shadow: 2px 2px #0097A7;
}
h1 {
font-size: 3.25em;
}
h2 {
font-size: 1.5em;
}
p, li {
font-size: 1em;
padding: 1%;
line-height: 1.5;

}
#nick-wrap {
position: absolute;
top: 50%;
right: 30%;
}
#nickname {
padding: 5px;
margin-top: 3px;
}
#message {
border: 0;
padding: 2%;
width: 90%;
margin-left: 1%;
list-style-type: none;
-webkit-box-shadow: 6px 7px 21px -6px rgba(255,255,255,0.76);
-moz-box-shadow: 6px 7px 21px -6px rgba(255,255,255,0.76);
box-shadow: 6px 7px 21px -6px rgba(255,255,255,0.76);
margin-bottom: 2%;
}
.form-button {
border-radius: 50%;
width: 8%;
border: none;
padding: 10px;
padding-right: 50px;
text-align: center;
-webkit-box-shadow: 6px 7px 21px -6px rgba(255,255,255,0.76);
-moz-box-shadow: 6px 7px 21px -6px rgba(255,255,255,0.76);
box-shadow: 6px 7px 21px -6px rgba(255,255,255,0.76);
background-color: rgba(255,255,255,0.76);
margin-bottom: 2%;
}
#chat-wrap {
display: none;
}
#message, #nickname {
background-color: rgba(255,255,255, .2);
}
#chat-wrap, #users {
margin: 0 auto;
display: inline-block;
width: 49%;
padding: 30px;
background-color: rgba(255,255,255, .2);
-webkit-box-shadow: 6px 7px 21px -6px rgba(255,255,255,0.76);
-moz-box-shadow: 6px 7px 21px -6px rgba(255,255,255,0.76);
box-shadow: 6px 7px 21px -6px rgba(255,255,255,0.76);
}
#users {
float: right;

}
#content-wrap {
margin: 0 auto;
padding: 30px;
display: block;
width: 100%;
}
#message-wrap {
clear: both;
position: fixed;
bottom: 0;
margin: 0 auto;
width: 100%;
padding: 30px;
}
.hidden {
visibility: hidden;
}
hr {
opacity: .5;
width: 50%;
float: left;
display: block;
}
.clear {
clear: both;
}

/*#messages li {
padding: 5px 10px;
margin: 50px;
}
#messages li:nth-last-child(odd) {
background: #EEE;
}*/

</style>

</head>
<body>
</div>
<div class="top-banner">
<h1 class="title">Simple Chat Room</h1>
</div>

<div id="nick-wrap">
<p>Enter a Username:</p>
<p id="nick-error"></p>
<form id="set-nickname">
<input size="35" id="nickname">
<input type="submit" class="form-button">
</form>
</div>

<div id="content-wrap" class="hidden">

<div id="chat-wrap">
<h2 class="title">Chat Box</h2>
<hr>
<ul class="clear">
<li id="chat"></li>
</ul>
</div>
<div id="users" >
<h2 class="title">Users</h2>
<hr>
<div class="clear">

</div>
</div>


</div>

<div id="message-wrap" class="hidden">
<form id="send-message">
<input id="message" type="text" >
<input class="form-button" type="submit">
</form>
</div>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>

<script>
$(document).ready(function() {
var $users = $('#users');
var socket = io.connect();
var $nickForm = $('#set-nickname');
var $nickError = $('#nick-error');
var $nickBox = $('#nickname');
var $messageForm = $('#send-message');
var $messageBox = $('#message');
var $chat = $('#chat');

$nickForm.submit(function(event){
event.preventDefault();
socket.emit('new user', $nickBox.val(), function(data){
if(data){
$('#nick-wrap').hide();
$('#content-wrap').removeClass('hidden');
$('#message-wrap').removeClass('hidden');
} else {
$nickError.html('That username is already taken! Try again.');
}
});
$nickBox.val('');
});

socket.on('usernames', function(data){

var html = '';
for(var i=0; i<data.length; i++){
html += data[i] + '<br/>';
}
$users.append(html);
});

$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message', $messageBox.val());
$messageBox.val('');
});

socket.on('new message', function(data) {
$chat.append('<b>' + data.nick + ': </b>' + data.msg + '<br/>');
});


}); //Document ready close
</script>
</body>
</html>
Loading