站內搜尋

Tuesday, May 24, 2016

[Firebase] 免費線上即時資料庫 (google支援的服務) (以聊天室為範例)

簡易的聊天室code
<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