ฐานข้อมูลเรียลไทม์
11 นาที
วิธีการใช้ parse server live query บทนำ live queries ถูกออกแบบมาเพื่อใช้ใน แอปพลิเคชันที่ตอบสนองแบบเรียลไทม์ , ซึ่งการใช้พาราดิ้มการค้นหาแบบดั้งเดิมอาจทำให้เกิดปัญหาหลายอย่าง เช่น เวลาในการตอบสนองที่เพิ่มขึ้นและการใช้เครือข่ายและเซิร์ฟเวอร์ที่สูง live queries ควรใช้ในกรณีที่คุณต้องการอัปเดตหน้าเว็บอย่างต่อเนื่องด้วยข้อมูลใหม่จากฐานข้อมูล ซึ่งมักเกิดขึ้นใน (แต่ไม่จำกัดเฉพาะ) เกมออนไลน์, โปรแกรมส่งข้อความ และรายการสิ่งที่ต้องทำที่แชร์กัน ส่วนนี้อธิบายวิธีการใช้ live query ของ back4app ในสภาพแวดล้อม javascript ผ่าน back4app สำหรับบทเรียนนี้ ในฐานะตัวอย่าง คุณจะสร้าง รายการ todo ออนไลน์ โดยใช้ live queries ตามที่แสดงด้านล่าง ดูรายการ todo online list โครงการทั้งหมดที่ โครงการ live query todo list https //github com/igor ribeiiro/onlinetodolist ดูข้อมูลเพิ่มเติมเกี่ยวกับ parse sdk ที่ เอกสารอ้างอิง javascript sdk api https //parseplatform org/parse sdk js/api/4 3 1/ และ เอกสารเปิดแหล่งข้อมูล parse สำหรับ javascript sdk https //docs parseplatform org/js/guide/#live queries ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี แอป javascript พื้นฐานที่เชื่อมต่อกับ back4app หรือ โครงการ live query todo list https //github com/igor ribeiiro/onlinetodolist หมายเหตุ คุณสามารถใช้แอปที่สร้างขึ้นใน javascript install parse sdk https //www back4app com/docs/javascript/parse javascript sdk บทเรียนของเรา หรือ โครงการ live query todo list https //github com/igor ribeiiro/onlinetodolist ความรู้เพียงพอเกี่ยวกับ javascript parse queries https //docs parseplatform org/js/guide/#queries (แต่ไม่จำเป็น) 1 เปิดใช้งาน live query ก่อนที่คุณจะเริ่มเขียนโค้ด จำเป็นต้องมีคลาสในฐานข้อมูลของคุณเพื่อเปิดใช้งาน live query เพื่อทำเช่นนั้น เพียงแค่ค้นหาแอปของคุณที่ เว็บไซต์ back4app https //www back4app com/ , และคลิกที่ \<font color="#2166ae">แดชบอร์ด\</font> > \<font color="#2166ae">สร้างคลาส\</font> , ตามที่แสดงด้านล่าง หมายเหตุ ที่นี่ คลาสนี้จะถูกเรียกว่า \<font color="#2166ae">ข้อความ\</font> ตอนนี้ เพื่อเปิดใช้งานฟีเจอร์ live query ให้เข้าสู่ระบบบัญชีของคุณที่ เว็บไซต์ back4app https //www back4app com/ , ค้นหาแอปของคุณ และคลิกที่ \<font color="#2166ae">การตั้งค่าแอป\</font> > \<font color="#2166ae">การตั้งค่าเซิร์ฟเวอร์\</font> มองหาบล็อก “url เซิร์ฟเวอร์และ live query” และคลิกที่ \<font color="#2166ae">การตั้งค่า\</font> บล็อก “url เซิร์ฟเวอร์และ live query” จะมีลักษณะดังนี้ จากนั้น คุณจะมาถึงหน้าที่เหมือนกับด้านล่างนี้ ในหน้านี้คุณจะต้องตรวจสอบ \<font color="#2166ae">เปิดใช้งานซับโดเมน back4app ของคุณ\</font> ตัวเลือก, \<font color="#2166ae">เปิดใช้งาน live query\</font> ตัวเลือก, และทุกคลาสที่คุณต้องการให้เปิดใช้งาน live query ตามที่แสดงด้านล่าง จำเป็นต้องเปิดใช้งานซับโดเมนของคุณเพื่อใช้ live queries เพราะมันจะทำงานเป็นเซิร์ฟเวอร์สด 2 สมัครสมาชิกสำหรับ query ของคุณ เพื่อเริ่มใช้ livequeries คุณต้องสร้าง \<font color="#2166ae">livequeryclient\</font> ที่จะจัดการการเชื่อมต่อ websocket สำหรับคุณ เพื่อทำเช่นนี้ คุณจะต้องให้ id ของแอปพลิเคชัน, คีย์ javascript ของมันเพื่อการตรวจสอบ, และยังต้องมี url ของเซิร์ฟเวอร์ที่ควรเป็นโดเมนที่คุณได้ตั้งค่าในขั้นตอนก่อนหน้า นี่คือโค้ดสำหรับ \<font color="#2166ae">livequeryclient\</font> livequeryclient js 1 var client = new parse livequeryclient({ 2 applicationid 'your app id here', 3 serverurl 'wss\ //' + 'your domain here', // example 'wss\ //livequerytutorial back4app io' 4 javascriptkey 'your javascript key here' 5 }); 6 client open(); หลังจากทำตามขั้นตอนที่กล่าวถึงข้างต้นแล้ว คุณควรสร้างการค้นหาสำหรับประเภทของวัตถุที่คุณต้องการสมัครสมาชิก การสมัครสมาชิกเป็น ตัวปล่อยเหตุการณ์ ซึ่งจะเกิดเหตุการณ์เมื่อมีการเปลี่ยนแปลงเกิดขึ้นกับวัตถุที่ตรงตามการค้นหาของคุณ ในตัวอย่างนี้ คุณจะทำการค้นหาพื้นฐานและจะสมัครสมาชิกการเปลี่ยนแปลงทั้งหมดที่เกิดขึ้นกับ วัตถุ \<font color="#2166ae">todo\</font> ดูข้อมูลเพิ่มเติมเกี่ยวกับการค้นหาที่ เอกสารการค้นหาของ parse อย่างเป็นทางการ https //docs parseplatform org/js/guide/#queries ด้านล่างคือโค้ดสำหรับ \<font color="#2166ae">querysubscribe\</font> querysubscribe js 1 var query = new parse query('todo'); 2 query ascending('createdat') limit(5); 3 var subscription = client subscribe(query); 3 ฟังเหตุการณ์ เมื่อการตั้งค่าพร้อมแล้ว จำเป็นต้องเขียนโค้ดว่าคุณจะทำอะไรในแอปเมื่อเกิดเหตุการณ์ ในส่วนนี้ เราจะโชว์วิธีการฟังเหตุการณ์เหล่านี้ในตัวอย่างที่เป็นรูปธรรม ตัวอย่าง todo online list จะเป็นแนวทางสำหรับโปรเจกต์ของคุณเพราะมีโค้ดพื้นฐานที่ใช้เพียงเล็กน้อยหรือไม่มีเลย สองเหตุการณ์หลักที่คุณจะใช้ที่นี่คือเหตุการณ์ \<font color="#2166ae">create\</font> และเหตุการณ์ \<font color="#2166ae">delete\</font> รายการเหตุการณ์ทั้งหมดสามารถพบได้ ที่นี่ http //docs parseplatform org/js/guide/#event handling 3 1 สร้างเหตุการณ์ เหตุการณ์ \<font color="#2166ae">createevent\</font> จะถูกเรียกทุกครั้งที่มีการสร้าง \<font color="#2166ae">parseobject\</font> และตรงตามเงื่อนไขการค้นหาที่คุณได้ใส่ไว้ เหตุการณ์นี้จะส่งคืนวัตถุที่ถูกสร้างขึ้น ในตัวอย่าง todo online list อาร์เรย์ของกิจกรรมจะถูกเก็บไว้ใน \<font color="#2166ae">this todos\</font> ตัวแปร และเราจะเพิ่มวัตถุใหม่จากฐานข้อมูลของเราในอาร์เรย์นี้เมื่อเกิดเหตุการณ์สร้างขึ้น โค้ดสำหรับ \<font color="#2166ae">createevent\</font> แสดงด้านล่าง createevent js 1 subscription on('create', todo => { 2 this todos add(todo); 3 console log('on create event'); 4 }); 3 2 ลบเหตุการณ์ ทุกครั้งที่มีการลบ \<font color="#2166ae">parseobject\</font> ที่ตรงตามเงื่อนไขการค้นหาของคุณจากฐานข้อมูล คุณจะได้รับเหตุการณ์นี้ ซึ่งจะส่งคืนวัตถุที่ถูกลบ ในตัวอย่าง todo online list คุณต้องลบวัตถุจากรายการทุกครั้งที่มันถูกลบจากฐานข้อมูล มองหาหมายเลข id ที่ตรงกันระหว่างเซิร์ฟเวอร์และโค้ด เพื่อระบุวัตถุที่ถูกลบ โค้ดสำหรับ \<font color="#2166ae">deleteevent\</font> คือดังนี้ deleteevent js 1 subscription on('delete', todo => { 2 this todos foreach(t => { 3 if (t id === todo id) { 4 console log('on delete event'); 5 this todos delete(t); 6 } 7 }); 8 }); เสร็จสิ้น! ในจุดนี้ คุณรู้วิธีการใช้ live queries เพื่อสร้างแอปพลิเคชันที่ตอบสนองแบบเรียลไทม์ คุณยังรู้วิธีการตั้งค่า live query ที่ถูกต้องโดยใช้ back4app และสามารถเริ่มต้นการใช้งานในแอปของคุณได้