{"id":3617,"date":"2015-04-02T21:07:58","date_gmt":"2015-04-02T21:07:58","guid":{"rendered":"http:\/\/webninjataylor.com\/library\/?p=3617"},"modified":"2015-04-02T21:13:25","modified_gmt":"2015-04-02T21:13:25","slug":"firebase-notes","status":"publish","type":"post","link":"https:\/\/webninjataylor.com\/library\/firebase-notes\/","title":{"rendered":"Firebase Notes"},"content":{"rendered":"
\n

A powerful API to store and sync data in realtime.<\/em><\/strong><\/p>\n

Steps<\/h2>\n
    \n
  1. Install<\/strong>\n
    <script src='https:\/\/cdn.firebase.com\/js\/client\/2.2.1\/firebase.js'><\/script><\/pre>\n<\/li>\n
  2. Reference<\/strong> (URL for your Firebase data)\n
    var myDataRef = new Firebase('https:\/\/xze3eg07ah9.firebaseio-demo.com\/');<\/pre>\n<\/li>\n
  3. Write data with\u00a0.set()<\/span> method on a Firebase reference (write an object too) – myDataRef.set({name: name, text: text});<\/span> \u2026 In this example, when the object {name: name, text: text}<\/span> is set, locations for name and text are automatically created as children of the location referenced by myDataRef<\/span><\/li>\n
  4. Firebase can support number, boolean, and string data types \u2014 the same as a normal JavaScript object<\/li>\n
  5. Use .push()<\/span> method to append to a list – Firebase lists use chronologically-ordered, globally-unique IDs as the keys for items… This means that many clients can add to the same list without conflict<\/li>\n
  6. We need to tell Firebase to notify us when chat messages arrive. We do this by adding a callback to the list of chat messages using the .on()<\/span> method, as shown below:\n
    myDataRef.on('child_added', function(snapshot) {\r\n    var message = snapshot.val();\r\n    displayChatMessage(message.name, message.text);\r\n});<\/pre>\n<\/li>\n<\/ol>\n
    With Firebase, you always read data using callbacks. This allows us to guarantee that Firebase applications always update in real-time. Note that when your app starts, Firebase will call your callback for all existing chat messages and then continue to call it for any new messages that arrive. There’s intentionally no distinction between “initial” data and “new” data. This allows you to write your message handling logic once rather than having to handle these two cases separately.<\/p>\n
    <html>\r\n <head>\r\n   <script src='https:\/\/cdn.firebase.com\/js\/client\/2.2.1\/firebase.js'><\/script>\r\n   <script src='https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js'><\/script>\r\n <\/head>\r\n <body>\r\n   <div id='messagesDiv'><\/div>\r\n   <input type='text' id='nameInput' placeholder='Name'>\r\n   <input type='text' id='messageInput' placeholder='Message'>\r\n   <script>\r\n     var myDataRef = new Firebase('https:\/\/xze3eg07ah9.firebaseio-demo.com\/');\r\n     $('#messageInput').keypress(function (e) {\r\n       if (e.keyCode == 13) {\r\n         var name = $('#nameInput').val();\r\n         var text = $('#messageInput').val();\r\n         myDataRef.push({name: name, text: text});\r\n         $('#messageInput').val('');\r\n       }\r\n     });\r\n     myDataRef.on('child_added', function(snapshot) {\r\n       var message = snapshot.val();\r\n       displayChatMessage(message.name, message.text);\r\n     });\r\n     function displayChatMessage(name, text) {\r\n       $('<div\/>').text(text).prepend($('<em\/>').text(name+': ')).appendTo($('#messagesDiv'));\r\n       $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;\r\n     };\r\n   <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
    Resources<\/h2>\n