<div id='messagesDiv'></div>
<input type='text' id='nameInput' placeholder='Name'>
<input type='text' id='messageInput' placeholder='Message'>
<script src="https://cdn.firebase.com/js/client/1.1.3/firebase.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
var myDataRef = new Firebase('https://blazing-inferno-9999.firebaseIO.com');
$('#messageInput').keypress(function (e) {
if (e.keyCode == 13) {
var name = $('#nameInput').val();
var text = $('#messageInput').val();
myDataRef.push({name: name, text: text});
$('#messageInput').val('');
}
});
myDataRef.on('child_added', function(snapshot) {
var message = snapshot.val();
displayChatMessage(message.name, message.text);
});
function displayChatMessage(name, text) {
$('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
$('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
};
</script>
是不是很簡單
備註:
1. https://blazing-inferno-9999.firebaseIO.com 這邊要改成自己的代碼。
2. 新版的 firebase.js 不支援 IE8 ,如需支援舊版 IE 請用 1.1.3 版。官網CDN列表
No comments:
Post a Comment