firebaseためしてみた
Firebase - Build Realtime Apps
無料アカウント作って
5 min. tutorial
ってのをすると簡易チャットの出来上がり(下記ソース)
<html> <head> <script src='https://cdn.firebase.com/js/client/1.0.11/firebase.js'></script> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script> </head> <body> <div id='messagesDiv'></div> <input type='text' id='nameInput' placeholder='Name'> <input type='text' id='messageInput' placeholder='Message'> <script> var myDataRef = new Firebase('https://baxzzmi04ol.firebaseio-demo.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> </body> </html>
たしかに簡単
ついでに気になってた
AngularJS + Firebase
でAngularFireってのも
5 min. tutorial
あったのでやってみた
<html ng-app="myapp"> <head> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js'></script> <script src='https://cdn.firebase.com/js/client/1.0.11/firebase.js'></script> <script src='https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js'></script> </head> <body ng-controller="MyController"> <div id="messagesDiv"> <div ng-repeat="msg in messages"><em>{{msg.from}}</em>: {{msg.body}}</div> </div> <input type="text" ng-model="name" placeholder="Name"> <input type="text" ng-model="msg" ng-keydown="addMessage($event)" placeholder="Message..."> <script> var app = angular.module("myapp", ["firebase"]); function MyController($scope, $firebase) { var ref = new Firebase("https://gq6zmt4xgt1.firebaseio-demo.com/"); $scope.messages = $firebase(ref); $scope.addMessage = function(e) { if (e.keyCode != 13) return; $scope.messages.$add({from: $scope.name, body: $scope.msg}); $scope.msg = ""; }; } </script> </body> </html>
初AngularJSなのでよくわかんないけど
これでjquery版と全く同じ機能
コード量が減って見通しはよくなった?