Share this

ว่าด้วยเรื่องการทำ Realtime App

Issues
April
Programmer
Categories:
#Back-end Tools
Inspired by: Anusorn, Natchaya
Views

อะไรคือการทำ Realtime App ?

ในปัจจุบันการทำงานของระบบไม่ว่าจะเป็นการทำผ่าน Web Application หรือ Application ล้วนมีการทำงานแบบ Realtime ซึ่งหมายถึงการทำงานที่ต้องแสดลผลหรือตอบสนองทันทีทันใด ต่อการทำงานของผู้ใช้งานในระบบ
 
ตัวอย่างเช่น เมื่อเราได้รับข้อความผ่านแชท เเล้วมีการแจ้งเตือนตอบกลับปรากฎมาทันที หรือ การทำกราฟ/ Dashboard แสดงผลการทำรายงานต่างๆ ที่ต้องมีการปรับเปลี่ยน และแสดงผลที่ถูกต้องแบบ Realtime
 
ดังนั้นเราจึงต้องมาตั้งค่าระบบ เพื่อให้รองรับการทำงานแบบ Realtime เหล่านี้ โดยเทคนิคการทำ Realtime จะมีหลากหลายเเบบให้เลือก  โดยจะเลือกแบบไหนก็ขึ้นอยู่กับเทคนิคไหนเหมาะต่อการทำงานเรามากที่สุด
 

เทคนิคต่างๆในการทำ Realtime App

การทำ Realtime App ในปัจจุบันสามารถทำได้ด้วยหลากหลายวิธีการ ซึ่งแต่ละวิธีจะมีขั้นตอน และหลักการทำงานที่แตกต่างกัน ดังนั้นผู้ใช้งานจะสามารถเลือกวิธีการทำ Realtime ตามความเหมาะสมของการใช้งาน โดยจะมีเทคนิคหลักสำหรับการทำ Realtime อยู่ 4 แบบ
 

1. Polling คือการ Send Request และยิงตาม Period ที่ตั้งเอาไว้ เช่น ตั้งค่าในการใช้ Polling ทุกๆ 1 นาที ระบบจะทำการ Send Request ทุก 1 นาที

  • Pros: สามารถทำตามได้ง่าย
  • Cons: ใช้ทรัพยากรเยอะ เนื่องจากจะมีการยิง Request ตามช่วงเวลาที่กำหนด โดยหากมีผู้ใช้งานเป็นจำนวนมาก จะทำให้ระบบต้องรองรับจำนวน Request มากเกินความจำเป็น
 
หลักการทำงานของ Polling
 

2. Long Polling คล้ายกับการทำงานแบบ Polling ที่กล่าวไปข้างต้น แต่มีการเพิ่มการหน่วงเวลาทางฝั่ง Backend ภายใต้เงื่อนไขที่ว่าต้องมีข้อความใหม่ก่อน จึงจะดำเนินการส่งกลับได้

  • Pros: ใช้ทรัพยากรน้อยกว่าแบบ Polling เนื่องจากไม่ต้องยิง Request ตามรอบเวลาที่กำหนด
  • Cons: มีความเสี่ยงที่จะทำให้เกิดเชื่อมต่อมีข้อผิดพลาด (Connection Timeout) ได้ง่าย จึงทำให้ข้อมูลหาย เนื่องจากไม่มีการส่งข้อมูลกลับไป

 

                                               หลักการทำงานของ Long Polling
 

3. Web Sockets จะเป็นการทำงานอยู่บน Socket ที่เป็น Connection แบบ TCP (Transmission Control Protocol) รองรับการทำงานแบบ Bidirectional Communication หรือการสื่อสารแบบสองทิศทาง

  • Pros: ทำงานได้เร็วที่สุด เเละ มี Library ที่ครอบคลุมเกือบทุกภาษา
  • Cons: ต้อง Handle การทำงานค่อนข้างเยอะ และ อาจมีปัญหาที่ตามมาเยอะเช่นกัน
                     
หลักการทำงานของ Web Sockets
 

4. Server-Sent Event (SSE) ทำงานคล้ายๆกับ Web Socket แต่จะเป็นการทำงานแบบ Unidirectional คือการส่งข้อมูลด้านเดียว และได้ Response หรือการส่งกลับตามที่ตั้งค่าไว้ใน Code

  • Pros:
    1.ใช้งานได้ง่าย
    2.มี Data Efficiency สูง
    3.ในกรณีที่มีปัญหาไม่สามารถ Connect ได้ สามารถดำเนินการ Reconnect ได้ทันที
    4.ประหยัด Source กว่า Short และ Long Polling
    5.เขียนง่ายไม่ต้องใช้ Library
  • Cons: ไม่รอบรับการทำงานบน Internet Explorer
หลักการทำงานของ Server-Sent Event (SSE)
 
เนื่องด้วย  CODIUM ได้ใช้เลือกวิธีการทำ Realtime App แบบ SSE เพราะจากที่ได้ลองมาทุกวิธี พบว่าเเบบ SSE เหมาะต่อการทำงานของเรามากที่สุด ประกอบกับเราใช้ Django เป็น BE บทความนี้จึงจะขออธิบายวิธีการทำ Realtime App แบบ SSE บน Django  
 

การใช้งาน Server-Sent Event กับ Django

 
Step 1: Import Package
 
Step 2 Send Event
 
Step 3 Establish Event Source (FE)
 
Step 4 Add Event Listener (FE) : ทำเพื่อรับค่า Event ที่ส่งมา

ตอน Send Event จะมีการส่งค่า “Type” มาด้วย ดังนั้นหาก Type ไม่ตรงก็จะไม่เข้า Listener

 
ตัวอย่าง

เมื่อเข้า Web Portal และมีการยิง Request จะมาการสร้าง Event ขึ้นมา

 
จากนั้นจะมีการรับ Request และส่งกลับข้อมูล โดยในกรณีนี้จะส่งกลับเป็นข้อความที่ Config ไว้ใน Server
 
โดยทุกๆครั้งที่มีการยิง Request  API จะเปิดทิ้งไว้ จนกว่าจะมีการ Response กลับมา
 
ทั้งหมดนี้คือการทำ Realtime แบบต่างๆ รวมถึงข้อดีข้อเสียของเทคนิคแต่ละชนิด และยังมีขั้นตอนการทำและตัวอย่างการทำ Realtime แบบ SSE สั้นๆมาให้เพื่อนๆลองศึกษา หากเพื่อนๆมีความสนใจ ข้อสงสัย หรืออยากเรียนรู้การทำ Realtime มากขึ้น สามารถทักมาหาพวกเราได้เลยที่
 
Facebook : Bite on IT
Line : CODIUM
Website: CODIUM
 
You may also like
Low Code Framework ทำงานอย่างไร?
Low Code Framework ทำงานอย่างไร?
มิ.ย. 06, 2024อ่านเมื่อ 1 วันที่แล้ว
Back-end Tools
Front-end Tools
Automated Process
วิธีสร้าง Chatbot ในแบบฉบับง่ายๆ ไม่ใช่ คนTech ก็ทำได้
วิธีสร้าง Chatbot ในแบบฉบับง่ายๆ ไม่ใช่ คนTech ก็ทำได้
มิ.ย. 06, 2024อ่านเมื่อ 2 ชั่วโมงที่แล้ว
Back-end Tools
Front-end Tools
Digital Transformation
HR Bot สร้างขึ้นมาได้อย่างไร
HR Bot สร้างขึ้นมาได้อย่างไร
มิ.ย. 06, 2024อ่านเมื่อ 3 วันที่แล้ว
Bot
Automated Process
Front-end Tools
5 ปัจจัยหลัก ที่ใช้ประเมินการทำงาน Developer
5 ปัจจัยหลัก ที่ใช้ประเมินการทำงาน Developer
มิ.ย. 06, 2024อ่านเมื่อ 4 ชั่วโมงที่แล้ว
Front-end Tools
Back-end Tools

SUBSCRIBE TO OUR

NEWS
LETTER .

Code , Consult , Communicate

โคเดียมสัญญาว่าจะให้ความคุ้มครองข้อมูลส่วนบุคคลของคุณ และเราจะใช้ข้อมูลส่วนบุคคลของคุณเท่าที่จำเป็นสำหรับการนำเสนอผลิตภัณฑ์/บริการที่คุณร้องขอมาเท่านั้น

ในบางกรณีเราอาจจะติดต่อไปหาคุณเพื่อการนำเสนอผลิตภัณฑ์, บริการ หรือกิจกรรมที่ตรงกับความต้องการของคุณ ถ้าหากคุณต้องการให้เราติดต่อไปเพื่อวัตถุประสงค์ดังกล่าว โปรดเลือกให้ความยินยอมกับเราในกรณีต่อไปนี้




* คุณสามารถถอนความยินยอมของคุณได้ทุกเมื่อ สำหรับช่องทางการติดต่อเพื่อขอถอนความยินยอม และรายละเอียดการคุ้มครองข้อมูล ส่วนบุคคลของคุณ โปรดอ่านได้ที่ ประกาศความเป็นส่วนตัวของเรา