Chat Room Demo
How do I make an chat room demo?
This is an easy way to read and write json objects using Firebase.. What is a chat room demo? How do you make a chat room demo? This script and codes were developed by Dave Alger on 11 August 2022, Thursday.
Chat Room Demo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Chat Room Demo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="controls"> <h2>Simple <a href="https://www.firebase.com/tutorial/#gettingstarted">Firebase</a> Chat Demo</h2> <input type="text" id="n" placeholder="Name (optional)" maxlength="50" title="try using a valid hex string as your name such as #f00"> <input type="text" id="m" placeholder="Message (required)" maxlength="200" title="you are awesome so keep it clean"> <button id="go" onclick="addMessage()">Enter</button>
</div>
<div id="msg"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script> <script src="js/index.js"></script>
</body>
</html>
Chat Room Demo - Script Codes CSS Codes
h2 { font-family: sans-serif; }
input { padding: 10px 4px; }
#controls { padding: 4px 10px 20px 10px; background: #dadada; }
#go { padding: 10px 20px; }
#n { width: 10%; }
#m { width: 40%; }
#msg { border-top: 1px dotted #ccc; padding-top: 6px; margin-top: 6px; }
.out-row { font-family: courier; font-size: 18px; border-bottom: 1px dotted #ccc; padding-left: 16px; padding-bottom: 6px; margin-bottom: 6px; line-height: 40px;
}
.out-name { text-transform: capitalize; color: #999;
}
.anon { display: inline-block; float: left; margin-right: 10px; width: 32px; height: 32px; background-image: url('data:image/gif;base64,R0lGODlhIAAgAOMQAIWHhI6QjZeZlqGin6qsqbO1sru9ucHDwMfJxtHT0Nnb2OPl4uvt6vP18vv9+v3//CH+OUNSRUFUT1I6IGdkLWpwZWcgdjEuMCAodXNpbmcgSUpHIEpQRUcgdjYyKSwgcXVhbGl0eSA9IDkwCgAsAAAAACAAIAAABP7wPSenpDZXvTHOn9SM41Z51/RhzYIUxCAIQ5EwqmmhVKMYhELBQCzIAAEDjgOqMIC31ImBEAQSzBRlUTg0pLqRAaBrPgbK5orCWAjMnUfX8mWSGAVUds5IHBILU34HCw0IZSYOBF5+A0gJW44CBggLC3onKmhOBwIEDA4HAQUKXyNLOWABhw8kCAZfCUojFA6BtYkSVw8JMAcIBAq2LgQEaQNaGg4OqwkBAEhQEgoDAdYIDAEhtR8DCArfCgoLBKxtlgsMDQEXessSBhoN5VIe7JlxZ6AVC96IqKl0CKh0bgyWBuoucFm2ooyAA+UaJIhxsBCDHwTe5NNTQ8gIcIGBMhhDcI9HvgHUHvYS4gWPsQPJEOn6ZQTaECQBgih4EwIOhgETE4BTIMuAgj7xduCS6cDAgQJt1JWwxDMLIgcqHzAgEEBBq60yw0oYYDEjKIlkeorFVUCilQQ+2KkVm2HUGABOq9LV8SEnkoxz94KBBi2XYGUPiBL1EDjsNjgyIwAAOw==');
}
Chat Room Demo - Script Codes JS Codes
var myDataRef = new Firebase('https://g08x5yt6vu1.firebaseio-demo.com/');
$('#m').keypress(function (e) { if (e.keyCode == 13) { addMessage(); }
});
myDataRef.on('child_added', function(snapshot) { var message = snapshot.val(); displayChatMessage(message.name, message.text);
});
function addMessage() { var name = $('#n').val(); var text = $('#m').val(); if ( /^\s*$/.test(name) ) { name = "(anonymous)"; } if ( /^\s*$/.test(text) ) { // only whitespace or empty string } else { myDataRef.push({name: name.substring(0,50), text: text.substring(0,200)}); } $('#m').val('');
}
function displayChatMessage(name, text) { // only show last 100 $('#msg div.out-row:nth-child(n+100)').remove(); if ( name === '(anonymous)' ) { $('<div class="out-row" />').prepend($('<span class="out-message"/>')).text(text).prepend($('<div class="anon" />')).prependTo($('#msg')); } else if (name.search(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/im) != -1) { $('<div class="out-row" />').prepend($('<span class="out-message" />')).text(text).prepend($('<div class="anon" style="border: 3px solid '+name+';" />')).prependTo($('#msg')); } else { $('<div class="out-row" />').prepend($('<span class="out-message"/>')).text(text).prepend($('<span class="out-name"/>').text(name+': ')).prependTo($('#msg')); } $('#msg')[0].scrollTop = $('#msg')[0].scrollHeight;
};
Developer | Dave Alger |
Username | run-time |
Uploaded | August 11, 2022 |
Rating | 4 |
Size | 3,277 Kb |
Views | 36,432 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Catapult Game | 3,109 Kb |
Pink Slime | 8,353 Kb |
Editable Fire Text | 3,997 Kb |
Color Picker | 3,410 Kb |
Rainbow Spider | 7,749 Kb |
Download Speed Calculator | 3,412 Kb |
Basic FAQ | 2,365 Kb |
Chat Room Demo | 3,277 Kb |
Phone Input Field | 2,255 Kb |
Easy to understand paginator | 3,647 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Pomodoro Clock | Yas46 | 3,328 Kb |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 Kb |
Whyutils | LeYvan | 3,752 Kb |
Mesmerizing octopus | Jllodra | 3,549 Kb |
Flexbox Test | Icutpeople | 2,486 Kb |
Calculator | Rzencoder | 4,572 Kb |
CSS eye follow | Pedrocampos | 2,592 Kb |
Animated Donut Chart | Jplhomer | 3,808 Kb |
Table Exercise | Fresco | 9,585 Kb |
Realistic Buttons | Stoypenny | 2,248 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!