Skip to content

Instantly share code, notes, and snippets.

@mzaksana

mzaksana/real-time-chat.html

Created April 10, 2020 16:39
Show Gist options
  • Save mzaksana/e5136d5893d83d4b58d8d8b577bf0390 to your computer and use it in GitHub Desktop.
Save mzaksana/e5136d5893d83d4b58d8d8b577bf0390 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
real-time-chat.html
<html>
<head>
<title>Realtime Chat</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.message-bubble
{
padding: 10px 0px 10px 0px;
}
.message-bubble:nth-child(even) { background-color: #F5F5F5; }
.message-bubble > *
{
padding-left: 10px;
}
.panel-body { padding: 0px; }
.panel-heading { background-color: #3d6da7 !important; color: white !important; }
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
<div class="container" id="chat_data">
</div>
<div class="panel-footer">
<div class="row">
<div class="col-md-4">
<input type="text" id="name" class="form-control">
</div>
<div class="col-md-8">
<div class="input-group">
<input type="text" id="msg" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Send</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/3.6.3/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAygvocp935N0QOTR8sjzwjmvqhviLm8X8",
authDomain: "ceritayuk-48.firebaseapp.com",
databaseURL: "https://ceritayuk-48.firebaseio.com",
projectId: "ceritayuk-48",
storageBucket: "ceritayuk-48.appspot.com",
messagingSenderId: "530508899608",
appId: "1:530508899608:web:9ce5f3b6e47d096329aa6d",
measurementId: "G-4KQGYLL7B7"
};
firebase.initializeApp(config);
$(document).ready(function(){
var rootchatref = firebase.database().ref('/');
var chatref = firebase.database().ref('/Chat');
chatref.on('child_added', function(snapshot) {
var data = snapshot.val();
//console.log(data);
$('#chat_data').prepend('<div class="row message-bubble"><p class="text-muted">'+data.user+'</p><span>'+data.msg+'</span></div>');
});
});
function writeChat(user, msg) {
// A post entry.
var postData = {
msg : msg,
user: user,
};
// Get a key for a new Post.
var newPostKey = firebase.database().ref().child('Chat').push().key;
// Write the new post's data simultaneously in the posts list and the user's post list.
var updates = {};
updates['/Chat/'+newPostKey] = postData;
return firebase.database().ref().update(updates);
}
$("#msg").keypress(function(e) {
var name = $('#name').val();
var msg = $('#msg').val();
if(e.which == 13) {
if(name == ''){
alert('Isi nama terlebih dahulu..');
$('#name').focus();
return false;
}
if(msg == ''){
alert('Pesan tidakk boleh kosong');
$('#msg').focus();
return false;
}
writeChat(name, msg);
$('#msg').val('');
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment