Skip to content

Instantly share code, notes, and snippets.

@furenku

furenku/chat.css

Last active February 4, 2017 22:02
Show Gist options
  • Save furenku/0dd0082fffb92bd5d8644f50fe7ad6c0 to your computer and use it in GitHub Desktop.
Save furenku/0dd0082fffb92bd5d8644f50fe7ad6c0 to your computer and use it in GitHub Desktop.
Download ZIP
chat
Raw
chat.css
* {
outline: 1px solid #def;
}
/* RESETS: */
ul, li {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
background-color: #eee;
padding: 16px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.h-100 {
height: 100%;
}
@media screen and (min-width: 0px ) {
.h-xs-30 {
height: 30%;
}
.h-xs-70 {
height: 70%;
}
}
@media screen and (min-width: 960px ) {
.h-md-100 {
height: 100%;
}
}
.scroll-y {
overflow-y: auto;
}
#main-header {
height: 96px;
}
#user-actions {
height: 64px;
}
#main-container {
height: calc( 100vh - 160px );
}
#main-container {
/*ovya*/
overflow-y: auto;
}
/* COLORES */
#main-container {
background-color: #bbb;
}
#main-container li {
background-color: #bbb;
}
#messages .chat-message:nth-child(even) {
background-color: #eee;
}
#messages .chat-message:nth-child(odd) {
background-color: #ddd;
}
input {
padding: 8px;
font-size: 12px;
height: 32px;
border-radius: 0;
border:none;
}
input[type=submit] {
background-color: #333;
color: white;
}
#main-header, #main-container, #user-actions {
display: none;
}
#welcome-screen form {
height: 40vh;
margin: 30vh 0;
}
.new-user {
font-size: 11px;
color: #75ca00;
}
.user-gone {
font-size: 11px;
color: #bbb;
}
.chat-message {}
.chat-message .username {
color: #aaa;
font-weight: bold;
margin-right: 8px;
}
.chat-message .message {
color: #222
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
Introducción a NodeJS
</title>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/assets/stylesheets/chat.css">
</head>
<body>
<!-- section#welcome-screen.container-fluid-h-100 -->
<section id="welcome-screen" class="container-fluid h-100">
<form action="" class="box text-center">
<h1>
Bienvenid@
</h1>
<p>
Introduce tu nombre de usuario
</p>
<input
id="username"
type="text"
name="username"
placeholder="Nombre de usuario">
<input
type="submit"
value="Enviar">
</form>
</section>
<header id="main-header" class="box container-fluid">
<h2>
Chat
</h2>
</header>
<!-- main#main-container.box.container-fluid -->
<main id="main-container" class="box container-fluid">
<ul id="users" class="col-md-3 h-xs-30 h-md-100 scroll-y">
</ul>
<ul id="messages" class="col-md-9 h-xs-70 h-md-100 scroll-y">
</ul>
</main>
<footer id="user-actions" class="box container-fluid">
<form action="">
<!-- input.col-xs-9.col-md-10.col-lg-11[type=text][name=message] -->
<input
id="message"
type="text"
class="col-xs-9 col-md-10 col-lg-11"
name="message"
placeholder="Escribe tu mensaje"
>
<input
type="submit"
class="col-xs-3 col-md-2 col-lg-1"
value="Enviar">
</form>
</footer>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io()
var username = ""
$('#welcome-screen form').submit(function(){
var new_username = $('#username').val()
if( new_username != "" ) {
// almacenarlo en una variable global para uso futuro
username = new_username
socket.emit('set username', username)
// ocultar pantalla de bienvenida
$('#welcome-screen').animate({
opacity: 0
}, 1000, function(){
$('#welcome-screen').css({
display: 'none'
})
var elementsToShow = $('#main-header, #main-container, #user-actions')
// hacer transparentes para que al mostrarlos no se vean de golpe
elementsToShow.css({
opacity:0,
display: 'block'
})
elementsToShow.animate({
opacity: 1
}, 1000)
})
// mostrar componentes ocultos
}
return false
});
$('#user-actions form').submit(function(){
// leer valor de input en una variable
var message = $('#message').val();
socket.emit('chat message', message )
// vaciar valor de input
$('#message').val('')
return false
});
socket.on('chat message', function( object ){
newText = '<a href="/user" class="username" target="_blank">' + object.username + ':</a>'
newText += '<span class="message">' + object.message + '</span>'
showNewMessage( newText, 'chat-message' );
})
socket.on('new user', function(msg){
console.log( msg )
showNewMessage( msg.message, 'new-user' );
$('#users').html('');
for( i in msg.data ) {
//crear nuevo elemento li con jquery
nuevoElemento = $('<li>').html( msg.data[i].name )
nuevoElemento.attr('data-id', msg.data[i].id )
//añadir nuevo elemento li con jquery
$('#users').append( nuevoElemento )
}
})
socket.on('user gone', function(msg){
showNewMessage( msg, 'user-gone' );
})
function showNewMessage( msg, classes ) {
// crear nuevo elemento html
newLi = $('<li>')
// añadir clase "box"
.addClass('box')
.addClass( classes )
// introducir mensaje como contenido:
.html(msg)
// añadimos el nuevo Li al final de la UL
$('#messages').append(newLi)
}
</script>
</body>
</html>
Raw
index.js
var express = require('express')
var app = express()
var http = require('http').Server(app)
var io = require('socket.io')(http)
// un Objeto para almacenar los usuarios:
var users = {}
// línea necesaria para poder servir recursos desde nuestro HTML:
app.use('/bower_components', express.static('bower_components') )
// app.use('/socket.io', express.static('socket.io') )
app.use('/assets', express.static('public/assets') )
app.get('/', function (req, res) {
res.sendFile( __dirname + '/views/index.html' )
});
app.get('/user', function (req, res) {
res.send('Ver usuario');
// res.sendFile( __dirname + '/views/index.html' )
});
io.on('connection', function(socket){
console.log('a user connected', socket.id )
users[ socket.id ] = {
username: "Sin Nombre"
}
// console.log(users.length, users);
socket.on('disconnect', function(){
console.log('user disconnected', socket.id );
displayMessage = users[ socket.id ].username + " salió."
delete users[socket.id]
var userData = getUsersData()
io.emit('user gone', {
message: displayMessage,
data: userData
});
console.log(
"todavía quedan "
+ Object.keys(users).length
+ " usuarios"
)
});
socket.on('chat message', function(msg){
console.log('message: ', socket.id, msg);
io.emit('chat message', {
username: users[socket.id].username,
message: msg
});
});
socket.on('set username', function(msg){
console.log('set username: ' + msg);
users[ socket.id ].username = msg;
var userData = getUsersData()
displayMessage = users[ socket.id ].username + " acaba de entrar."
io.emit('new user', {
message: displayMessage,
data: userData
});
});
});
function getUsersData() {
usersArray = []
// Metemos los datos relevantes de cada usuario:
for( indice in users ) {
// Introducimos cada usuario al arreglo
usersArray.push({
id: indice,
name: users[indice].username
})
}
return usersArray
}
http.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment