PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ลองใช้ firebase กับการแสดงข้อมูล realtime ฝึกหัดจากตัวอย่าง ตอนที่ 1

16 August 2014 By


เคยพูดถึง firebase เว็บไซต์ ให้บริการ เก็บข้อมูลและซิงค์ข้อมูล แบบ realtime
จากการศึกษา angularjs ตอนที่ 3
 
ในเนื้อหานี้ จะเอาตัวอย่าง demo ของ firebase ที่ใช้งานร่วมกับ jquery
มาทดสอบ และลองอธิบาย ทำความเข้าใจการทำงานคร่าวๆ ดูก่อน
 
สำหรับใครอยากมีพื้นที เก็บข้อมูลส่วนตัว ทาง firebase มีบริการแบบฟรี
ลองไปสมัครสมาชิก เขาจะส่ง url คล้ายๆ กับ server เฉพาะให้เรา 
สามารถเอามาทดสอบ หรือใช้งานได้

https://www.firebase.com/

 
ส่วนตัวอย่างด้านล่าง เขามีตัว url server ทดสอบมาให้เราแล้ว รูปแบบ
ก็จะเป็น  ประมาณนี้
 
https://w7ybgymtinr.firebaseio-demo.com/  
 
ถ้าเราสมัครสมาชิก ก็จะได้ url แบบนี้มาไว้ ใช้งาน
 
ตัวอย่าง 
 


 
ตัวอย่างที่เขาทดสอบให้ดูการทำงาน ก็จะเป็นในลักษณะ การ chat
การทำงาน พอเราพิมพ์ ชื่อ และ ข้อความ แล้วกดปุ่ม enter ข้อมูลก็จะถูกส่ง
ไปเก็บที่ server พอฝั่ง server มีการอัพเดทข้อความ ก็จะส่งคำสั่งกลับมา
แสดงข้อมูล แบบ realtime 
 
สังเกตว่า โค้ดนี้จะไม่มีการตั้ง interval หรือกำหนดเวลา 
ให้ไปดึงข้อมูลฝั่ง server ทุกๆ กี่วินาที แล้วมาอัพเดท 
แต่เป็นไปในลักษณะ server ส่งข้อมูลกลับมาแสดงทันที ที่มีการอัพเดท 
 
ถ้าจะดูการทำงานแบบให้เห็นชัด ให้เราลองเป็น เพจหน้านี้ สอง window
หรือ ไม่ก็ให้เพื่อนจากอีกเครื่อง ทดสอบเข้าหน้านี้ดู  แล้วแต่ละคน ทดลองพิมพ์
ก็จะเห็นข้อความ จากฝั่ง server ที่อัพเดทแล้ว จะแสดงที่หน้าจอของทั้งสองคน
เหมือนกัน แบบ realtime  เห็นแบบนี้แล้ว พอจะมองประโยชน์ รุปแบบการทำงานนี้มั้ย
 
เช่น เอาไปประยุกต์กับการทำ notification หรือการแจ้งเตือน เมื่อมีข้อมูลใหม่
แนวๆ นี้เป็นต้น
 
 
คำอธิบายแสดงในโค้ด
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<style type="text/css">
div#messagesDiv{
	display: block;
	height: 180px;
	overflow: auto;
	background-color: #FDFDE0;
	width: 400px;
	margin: 5px 0px;
	border: 1px solid #CCC;
}
</style>
</head>

<body>

<div id="messagesDiv"></div>
<div class="bg-info" style="width:400px;padding:5px 0px;">
<div class="row">
  <div class="col-xs-4">
	<input type="text" class="form-control" id="nameInput" placeholder="Name">
  </div>
  <div class="col-xs-5">
    <input type="text" class="form-control" id="messageInput" placeholder="Message">
  </div>
</div>
</div>



    <script src="https://cdn.firebase.com/js/client/1.0.15/firebase.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
    <script>
	// สร้าง instance ตัวแปร เรียกใช้งาน firebase server
      var myDataRef = new Firebase("https://w7ybgymtinr.firebaseio-demo.com/");
      $("#messageInput").keypress(function (e) { // เมื่อกดที่ ช่องข้อความ
        if (e.keyCode == 13) { // ถ้ากดปุ่ม enter
          var name = $("#nameInput").val(); // เก็บค่าชื่อ
          var text = $("#messageInput").val();  // เก็บค่าข้อความ
          myDataRef.push({name: name, text: text}); // อันนี้ น่าจะเป็นการ ส่งข้อมูลไปยัง server
          $("#messageInput").val(""); // ล้างค่าช่องข้อความ ให้พร้อมป้อนข้อความใหม่
        }
      });
	  // อันนี้ น่าจะเป็น ส่วนสำคัญที่ฝั่ง server ทำการส่งข้อมูล กลับมา
      myDataRef.on("child_added", function(snapshot) { // ให้เข้าใจว่า พอ server รู้ว่ามีข้อมูลใหม่ถูกเพิ่ม
		// ส่งค่ากลับมาผ่าน instance ชื่อ snapshot 
        var message = snapshot.val();  // กำหนดตัวแปรสำหรับรับค่า สังเกต ว่าจะเป็น ตัวแปร object
        displayChatMessage(message.name, message.text); // อันนี้เป็นฟังก์ชั่น แสดงข้อมูลธรรมดา ที่เราสร้างไว้
      });
      function displayChatMessage(name, text) {// ส่งข้อมูลมาเข้าฟ้งก์ชั่น เพื่อจัดรูปแบบการแสดง
		// อันนี้เป็นการจัดรูปแบบการแสดง ของ jquery ธรรมดา ใครไม่คุ้น ศึกษาได้จากหน้าเว็บ jquery
		// จะได้รูปแบบ <div><em>ชื่อ: </em>ข้อความ</div> แล้วนำไปแสดงต่อเข้าไปใน  div#messagesDiv 
        $("<div/>").text(text).prepend($("<em/>").text(name+": ")).appendTo($("#messagesDiv"));
		// จัดการเลื่อนข้อความที่แสดง ในตำแหน่ง ความสูงที่เลื่อน scrollbar
        $("#messagesDiv")[0].scrollTop = $("#messagesDiv")[0].scrollHeight; 
      };
    </script>
    
    </body>
</html>
 
 
ถ้ามีการประยุกต์ใช้งานเพิ่มเติม จะเขียนเป็นเนื้อหา ไว้เป็นข้อมูล
รอติดตามต่อไป 

Tags:: angularjs firebase realtime

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





URL สำหรับอ้างอิง