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 |
Phone Input Field | 2,255 Kb |
Download Speed Calculator | 3,412 Kb |
ASCII Tree Logo | 4,202 Kb |
Basic FAQ | 2,365 Kb |
Pink Slime | 8,353 Kb |
Editable Fire Text | 3,997 Kb |
Catapult Game | 3,109 Kb |
JavaScript Fingerprint | 13,935 Kb |
Fireflies | 2,940 Kb |
JavaScript water droplet effect | 3,189 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 |
BlueBox Fork | Huskynation | 12,675 Kb |
Two tables and header with jspdf-autotable | Someatoms | 2,245 Kb |
12 DAYS OF XMAS | Proto78 | 2,313 Kb |
Freecodecamp - Tribute Page | Samoht513 | 3,583 Kb |
Animate a paper plane along an SVG path, looking ahead | PotatoDie | 3,734 Kb |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
IE11 Test | Boostnewmedia | 4,998 Kb |
Save for later... | Victorfreire | 1,359 Kb |
Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
Progressively reveal dots on a Bezier curve | GreenSock | 2,489 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!