[jquery + Firebase] jquery + Firebaseでリアルタイムに変化するWEBページを作成

2018年7月7日 Bluebear-IO 997 Views 0 Comments

jquery + Firebaseでリアルタイムに変化するWEBページを作成するには以下のコード

firebaseでtextという項目を作成しておく

<html lang="en">
<head>
 <meta charset="utf-8"/>
<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase.js"></script>
<script>
 // Initialize Firebase
 var config = {
 apiKey: "APIKEY",
 authDomain: "vauthDomain",
 databaseURL: "databaseURL",
 projectId: "projectId",
 storageBucket: "storageBucket",
 messagingSenderId: "messagingSenderId"
 };
 firebase.initializeApp(config);
</script>
 </head>
 <body>
<textarea rows="10" cols="60" id='messageInput'></textarea>
<script type='text/javascript'>
 var messagesRef = firebase.database().ref('/text');

 
 $( '#messageInput' ).keypress( function ( e ) {
 if ( e.which == 13 ) {
 submitToFirebase();
 $('#messageInput').val('');
 }
 } );
function submitToFirebase(){
 var textMessage = $('#messageInput').val();
 
 messagesRef.push({textMessage});
}
 
</script>
 </body>
</html>