การได้รับ real-time notifications ขณะนำทางในเว็บแอปพลิเคชันเป็นเรื่องปกติ การแจ้งเตือนอาจมาจาก chat bot, ระบบแจ้งเตือน หรือถูกกระตุ้นโดย event ที่แอป push ให้ผู้ใช้หนึ่งหรือหลายคน ไม่ว่าจะเป็นแหล่งที่มาของการแจ้งเตือน นักพัฒนากำลังใช้ Redis สร้าง notification services มากขึ้น
ในแอปพลิเคชันสมัยใหม่ที่ขับเคลื่อนโดยสถาปัตยกรรม microservices Redis มักถูกใช้เป็น simple cache และเป็น primary database แต่ยังถูกใช้เป็น communication layer ระหว่าง services โดยใช้ persistent messaging layer ที่ขับเคลื่อนโดย Redis Streams, ระบบ eventing แบบ輕量 ใช้คำสั่ง Pub/Sub (Publish/Subscribe) ที่รู้จักกันดี
ในบล็อกนี้ เราจะแสดงว่าสร้าง notification service ขนาดเล็กโดยใช้ Redis Pub/Sub ส่งข้อความไปยังเว็บแอปพลิเคชันที่พัฒนาด้วย Vue.js, Node.js, และ WebSockets นั้นง่ายเพียงใด
ข้อกำหนดเบื้องต้น
บริการสาธิตนี้ใช้:
- Docker
- Redis 5.0.x หรือใหม่กว่า (สาธิตนี้ใช้ Redis Docker container)
- Node.js 10.x พร้อม Node package manager (npm)
- nodemon, เครื่องมือง่ายๆ ที่ restart แอปพลิเคชันอัตโนมัติระหว่างการพัฒนา
- Vue CLI
เริ่มต้น Redis server
หากคุณยังไม่มี Redis instance ที่รันอยู่ คุณสามารถเริ่มต้นได้ด้วย Docker ใน terminal รันคำสั่งนี้:
> docker run -it --rm --name redis-server -p 6379:6379 redis
Redis ควรพร้อมทำงานและรับการเชื่อมต่อแล้ว
สร้าง WebSocket server ด้วย Node.js
เพื่อกำหนดค่าโปรเจกต์ด้วยโครงสร้างที่เหมาะสม ให้เปิด terminal และใส่คำสั่งต่อไปนี้:
สร้าง Node.js project ใหม่ด้วย npm (พารามิเตอร์ -y จะตั้งค่าทั้งหมดเป็นค่าเริ่มต้น):
คำสั่งสุดท้ายด้านบนเพิ่ม WebSocket และ Redis dependencies เข้าโปรเจกต์ของคุณ คุณพร้อมเขียนโค้ดแล้ว!
เขียน WebSocket server
เปิด code editor สำหรับ Node.js ที่คุณชอบ (ผมใช้ Visual Studio Code) และพิมพ์ "code ." เพื่อเปิด directory ปัจจุบัน ใน editor สร้างไฟล์ใหม่ชื่อ server.js
โปรแกรม Node.js ง่ายนี้จำกัดเพื่อการสาธิต และโฟกัสที่:
- เชื่อมต่อกับ Redis (บรรทัดที่ 9)
- Subscribe ข้อความจาก channel "app:notifications" (บรรทัดที่ 10)
- เริ่ม WebSocket server (บรรทัดที่ 13)
- ลงทะเบียน user client connections (บรรทัดที่ 16)
- ฟัง Redis subscribe events (บรรทัดที่ 19)
- และส่งข้อความไปยัง WebSocket clients ทั้งหมด (บรรทัดที่ 21)
บรรทัดที่ 5 และ 6 ใช้เพียงแค่กำหนดค่าตำแหน่ง Redis server และพอร์ตสำหรับ Web Socket server ตามที่เห็น มันง่ายมาก
รัน WebSocket server
หากคุณยังไม่ติดตั้ง nodemon ติดตั้งตอนนี้ แล้วเริ่ม WebSocket server ด้วยคำสั่ง:
ตอนนี้มาสร้าง frontend ที่จะรับ notifications และพิมพ์ให้ผู้ใช้เห็น
สร้าง frontend ด้วย Vue.js
เปิด terminal ใหม่ และรันคำสั่งต่อไปนี้จาก directory notifications:
หากคุณยังไม่ติดตั้ง Vue CLI tool ให้ติดตั้งตอนนี้ด้วยคำสั่ง npm install -g @vue/cli
คำสั่งนี้สร้าง Vue project ใหม่ที่พร้อมรันและขยาย
แพ็กเกจสุดท้ายที่ต้องติดตั้งสำหรับการสาธิตนี้คือ BootstrapVue ซึ่งทำให้ใช้ CSS library และ components จาก Bootstrap framework ยอดนิยมได้ง่ายขึ้น
เปิด directory web-client ใน code editor ที่คุณชอบ แล้วเริ่ม Vue application ที่สร้างใหม่:
คำสั่งสุดท้ายเริ่ม Vue development server ที่จะ serve หน้า และ reload หน้าอัตโนมัติเมื่อคุณเปลี่ยนแปลง
เปิดเบราว์เซอร์ ไปที่ https://localhost:8080 คุณควรเห็นหน้า歡迎 Vue เริ่มต้น:
เพิ่ม WebSocket เข้า frontend
Vue framework ค่อนข้างง่าย และสำหรับโพสต์นี้ เราจะทำโค้ดให้ง่ายที่สุด มาดูโครงสร้าง directory ระดับราก:
├── README.md ├── babel.config.js ├── node_modules ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src ├── App.vue ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue └── main.js
ไฟล์ที่ระดับราก (babel.config.js, package.json, package-lock.json, node_modules) ใช้สำหรับกำหนดค่าโปรเจกต์ ส่วนที่น่าสนใจที่สุด ตอนนี่ อยู่ใน directory src:
- ไฟล์ main.js เป็นไฟล์ JavaScript หลักของแอปพลิเคชัน ซึ่งจะโหลด common elements ทั้งหมดและเรียก App.vue main screen เราจะแก้ไขมันภายหลังเพื่อเพิ่ม Bootstrap support
- App.vue เป็นไฟล์ที่ประกอบด้วย HTML, CSS, และ JavaScript สำหรับหน้าหรือ template เฉพาะ เป็น entry point ของแอปพลิเคชัน ส่วนนี้ถูกแชร์โดยหน้าจอทั้งหมดโดยค่าเริ่มต้น ดังนั้นจึงเป็นที่เหมาะสมที่จะเขียน notification-client piece ในไฟล์นี้
public/index.html เป็น entry point แบบ static ที่ DOM จะโหลด หากคุณดู คุณจะเห็น <div id="app"> ซึ่งใช้โหลด Vue application
การสาธิตนี้ง่ายมาก คุณจะต้องแก้ไขเพียงสองไฟล์: App.vue และ main.js ในแอปพลิเคชันจริง คุณอาจสร้าง Vue.js component ที่จะนำกลับมาใช้ในหลายที่
อัปเดต App.vue เพื่อแสดงข้อความ WebSocket
เปิดไฟล์ App.vue ใน editor และเพิ่มข้อมูลด้านล่าง ที่ด้านล่างของหน้า ก่อนแท็ก </div> ให้เพิ่ม HTML block ต่อไปนี้:
ด้วย {{message}} notation คุณบอก Vue ให้พิมพ์เนื้อหาของตัวแปร message ซึ่งคุณจะกำหนดในบล็อกถัดไป
ใน <script> ให้แทนที่เนื้อหาด้วย:
บรรทัดโค้ดน้อยๆ นี้ใช้เพื่อ:
- เชื่อมต่อกับ WebSocket server (บรรทัดที่ 13)
- Consume ข้อความจาก server และส่งไปยังตัวแปร message ท้องถิ่น (บรรทัดที่ 13-17)
หากคุณดูอย่างละเอียดว่ามีอะไรเปลี่ยนไป คุณจะเห็นว่าคุณได้เพิ่ม:
- data() function ที่บอก Vue component ว่าคุณกำหนด local variables ที่สามารถ bind เข้ากับหน้าจอได้ (บรรทัดที่ 6-10)
- created() function ที่ถูกเรียกโดย Vue component อัตโนมัติเมื่อ initialized
ส่งข้อความจาก Redis ไปยัง Vue application ของคุณ
WebSocket server และ Vue frontend ควรทำงานและเชื่อมต่อกันแล้ว ขอบคุณบรรทัด JavaScript น้อยๆ ที่คุณเพิ่ม มาทดสอบ!
ใช้ Redis CLI หรือ RedisInsight publish ข้อความไปที่ channel app:notifications ตัวอย่างเช่น หากคุณเริ่ม Redis ด้วย Docker คุณสามารถเชื่อมต่อได้ด้วยคำสั่งต่อไปนี้และเริ่ม publish ข้อความ:
คุณควรเห็นข้อความปรากฏที่ด้านล่างของแอปพลิเคชันในเบราว์เซอร์:
ตามที่เห็น มันง่ายมากที่จะ push เนื้อหาไปยัง web frontend แบบ real-time ใช้ WebSocket ตอนนี้มาปรับปรุงดีไซน์และเพิ่ม interface ที่ user-friendly มากขึ้นด้วย Bootstrap
สร้าง alert block ด้วย Bootstrap
ในส่วนนี้ เราจะแสดงวิธีใช้ Bootstrap alert component ซึ่งปรากฏเมื่อรับข้อความใหม่ และหายไปอัตโนมัติหลังจากไม่กี่วินาที ใช้ countdown เรียบง่าย
ไฟล์ Main.js
เปิดไฟล์ main.js และเพิ่มบรรทัดต่อไปนี้หลัง import สุดท้าย:
บรรทัดสี่บรรทัดนี้ import และลงทะเบียน Bootstrap components ใน Vue application ของคุณ
ไฟล์ App.js
ในไฟล์ App.vue แทนที่โค้ดที่คุณเพิ่มก่อนหน้านี้ (ทุกอย่างระหว่างสองแท็ก <hr/> และแท็กเอง) ด้วยสิ่งต่อไปนี้:
Component นี้ใช้ attributes หลายอย่าง:
- id="notification" เป็น element id ใช้สำหรับอ้างอิง element ใน JavaScript หรือ CSS code :show="dismissCountDown" บ่งชี้ว่า component มองเห็นได้ก็ต่อเมื่อตัวแปร dismissCountDown ไม่ใช่ null และไม่ใช่ 0
- dismissible เพิ่มไอคอนเล็กใน alert ให้ผู้ใช้ปิดด้วยตนเองได้
- @dismissed="dismissCountDown=0" แสดงว่า alert box จะปิดเมื่อค่า dismissCountDown เท่ากับ 0
- @dismiss-count-down="countDownChanged" เป็น countdown method
มาเพิ่มบรรทัด JavaScript เพื่อกำหนดตัวแปรและ methods ที่ alert component ใช้:
ในส่วนนี้ คุณมี:
- เพิ่ม dismissSecs และ dismissCountDown และ variables เข้า data() method (บรรทัดที่ 4-5) ใช้ควบคุม timer ที่แสดง alert ก่อนซ่อนอีกครั้ง
- สร้าง methods เพื่อแสดงและซ่อน alert component (บรรทัดที่ 10-26)
- เรียก showAlert() method เมื่อรับข้อความใหม่ (บรรทัดที่ 13)
ลองดู!
กลับไปที่ redis-cli หรือ Redis Insight และ post ข้อความใหม่ไปที่ channel app:notifications
ตามที่เห็น มันง่ายที่จะใช้ Redis สร้าง notification service ที่ทรงพลังสำหรับแอปพลิเคชันของคุณ ตัวอย่างนี้พื้นฐานมาก ใช้ single channel และ server และ broadcast ไปยัง clients ทั้งหมด
เป้าหมายคือให้วิธีเริ่มต้นที่ง่ายกับ WebSocket และ Redis Pub/Sub เพื่อ push ข้อความจาก Redis ไปยังเว็บแอปพลิเคชัน มีตัวเลือกมากมายในการส่งข้อความไปยัง clients เฉพาะโดยใช้ channels ต่างๆ และการ scale และ secure แอปพลิเคชัน
คุณยังสามารถใช้ WebSocket server ในทิศทางตรงข้าม เพื่อ consume ข้อความและ push ข้อความไปยัง clients ได้ แต่เป็นหัวข้อกใหญ่สำหรับบล็อกอื่น อย่างไรก็ตาม ติดตามบล็อกเพิ่มเติมเกี่ยวกับวิธีใช้ Redis Gears เพื่อจับ events โดยตรงในฐานข้อมูล Redis และ push events บางอย่างไปยัง clients ต่างๆ
สำหรับข้อมูลเพิ่มเติม ดูทรัพยากรเหล่านี้:
- Redis Microservices for Dummies (free ebook)
- Introduction to Redis Streams (Redis documentation)
- Redis Pub/Sub (Redis documentation)
- เรียนคอร์สออนไลน์ฟรีที่ Redis University
- ดู Redis Enterprise Cloud
