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