Chat Room Demo

Developer
Size
3,277 Kb
Views
36,432

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 Previews

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;
};
Chat Room Demo - Script Codes
Chat Room Demo - Script Codes
Home Page Home
Developer Dave Alger
Username run-time
Uploaded August 11, 2022
Rating 4
Size 3,277 Kb
Views 36,432
Do you need developer help for Chat Room Demo?

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!

Dave Alger (run-time) Script Codes
Create amazing SEO content with AI!

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!