<!doctype html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Chat Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://genealogiabiblica.com.br/files/layouts/css/theme/lumen/bootstrap.min.css">
<script src='https://cdn.firebase.com/js/client/1.0.17/firebase.js'></script>
</head>
<body>
<style>
.panel {
margin-top: 10px;
}
</style>
<script>
var APP = new Firebase('https://chat-ao-vivo.firebaseio.com/');
$(document).ready(function(){
var container = $('#messages');
function carregaMensagem(nome,mensagem){
$('<li/>').text(mensagem).addClass('list-group-item')
.prepend($('<strong/>').text(nome + ': '))
.prependTo(container);
}
APP.on('child_added',function(snap) {
var newMessage = snap.val();
carregaMensagem(newMessage.username,newMessage.message);
});
$('#form').submit(function(){
var msg = this.message.value;
var user = this.name.value;
if(/^\s*$/.test(msg) || /^\s*$/.test(user))
return false;
APP.push({username:user,message:msg});
this.message.value = '';
return false;
});
});
</script>
<div class="page-header">
<h1 class='text-center'>Chat Online <small> <a href="http://reiandroidinformatica.blogspot.com">(Rei Android Informatica)</a></small></h1>
</div>
<div class="container">
<div class="jumbotron">
<form role="form" id='form'>
<div class="form-group">
<label for="exampleInputEmail1">Nome</label>
<input type="text" class="form-control" id="inputName" placeholder="Digite seu nome" name='nome'>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Mensagem</label>
<input type="text" class="form-control" id="einputText" placeholder="Digite sua Mensagem" name='message'>
</div>
<button type="submit" class="btn btn-default">Enviar</button>
</form>
<div class="panel panel-primary">
<div class="panel-heading">
Mensagens
</div>
<ul class="list-group" id='messages'>
</ul>
</div>
</div>
</div>
</body>
</html>
Aprenda Novos Receitas
terça-feira, 21 de julho de 2015
Codigo
Assinar:
Postar comentários (Atom)
Nenhum comentário:
Postar um comentário