วิธีสร้างบริการแจ้งเตือนด้วย Redis, Websockets และ Vue.js

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

ในแอปพลิเคชันสมัยใหม่ที่ขับเคลื่อนโดยสถาปัตยกรรมไมโครเซอร์วิส Redis มักใช้เป็นแคชธรรมดาและเป็นฐานข้อมูลหลัก แต่ยังใช้เป็นเลเยอร์การสื่อสารระหว่างบริการต่างๆ โดยใช้เลเยอร์การส่งข้อความแบบถาวรซึ่งขับเคลื่อนโดย Redis Streams ซึ่งเป็นระบบเหตุการณ์ขนาดเล็กโดยใช้คำสั่ง Pub/Sub (เผยแพร่/สมัครรับข้อมูล) ที่เป็นที่รู้จัก

ในบล็อกโพสต์นี้ เราจะแสดงให้คุณเห็นว่าการสร้างบริการแจ้งเตือนขนาดเล็กโดยใช้ Redis Pub/Sub เพื่อส่งข้อความไปยังเว็บแอปพลิเคชันนั้นง่ายเพียงใด ซึ่งพัฒนาด้วย Vue.js, Node.js และ WebSockets

ข้อกำหนดเบื้องต้น

บริการสาธิตนี้ใช้:

• นักเทียบท่า
• Redis 5.0.x หรือใหม่กว่า  (การสาธิตนี้ใช้คอนเทนเนอร์ Redis Docker)
• Node.js 10.x พร้อมตัวจัดการแพ็คเกจโหนด (npm)
• nodemon เครื่องมือง่ายๆ ที่จะรีสตาร์ทแอปพลิเคชันของคุณโดยอัตโนมัติในระหว่างการพัฒนา
• Vue CLI

การเริ่มต้นเซิร์ฟเวอร์ Redis

หากคุณไม่ได้ใช้งานอินสแตนซ์ Redis อยู่แล้ว คุณสามารถเริ่มต้นได้โดยใช้ Docker ในเทอร์มินัล ให้รันคำสั่งนี้:

> docker run -it --rm --name redis-server -p 6379:6379 redis

ตอนนี้ Redis ควรจะพร้อมใช้งานและพร้อมที่จะยอมรับการเชื่อมต่อ

การสร้างเซิร์ฟเวอร์ WebSocket ด้วย Node.js

ในการกำหนดค่าโครงการด้วยโครงสร้างที่เหมาะสม ให้เปิดเทอร์มินัลแล้วป้อนคำสั่งต่อไปนี้:

สร้างโปรเจ็กต์ Node.js ใหม่โดยใช้ npm (พารามิเตอร์ -y จะตั้งค่าทั้งหมดเป็นค่าเริ่มต้น) :

คำสั่งสุดท้ายด้านบนจะเพิ่มการพึ่งพา WebSocket และ Redis ให้กับโปรเจ็กต์ของคุณ ตอนนี้คุณพร้อมที่จะเขียนโค้ดแล้ว!

การเขียนเซิร์ฟเวอร์ WebSocket

เปิดตัวแก้ไขโค้ดที่คุณชื่นชอบสำหรับ Node.js (ฉันใช้ Visual Studio Code) และเพียงป้อนรหัส “code .” เพื่อเปิดไดเร็กทอรีปัจจุบัน ในตัวแก้ไขของคุณ ให้สร้างไฟล์ใหม่ชื่อ server.js .

โปรแกรม Node.js แบบง่ายนี้จำกัดเฉพาะการสาธิตและเน้นที่:

• กำลังเชื่อมต่อกับ Redis (สาย 9)
• สมัครรับข้อความจาก “app:notifications” ช่อง (บรรทัดที่ 10)
• การเริ่มต้นเซิร์ฟเวอร์ WebSocket (บรรทัดที่ 13)
• การลงทะเบียนการเชื่อมต่อไคลเอ็นต์ของผู้ใช้ (บรรทัดที่ 16)
• ฟังกิจกรรมการสมัครรับข้อมูล Redis (บรรทัดที่ 19)
• และส่งข้อความไปยังไคลเอ็นต์ WebSocket ทั้งหมด (21)

บรรทัดที่ 5 และ 6 ใช้เพื่อกำหนดค่าตำแหน่งเซิร์ฟเวอร์ Redis และพอร์ตที่จะใช้สำหรับเซิร์ฟเวอร์ Web Socket อย่างที่คุณเห็นมันค่อนข้างง่าย

การเรียกใช้เซิร์ฟเวอร์ WebSocket

หากคุณยังไม่ได้ติดตั้ง nodemon , ติดตั้งเลย จากนั้นเริ่มเซิร์ฟเวอร์ WebSocket โดยใช้คำสั่งต่อไปนี้:

มาสร้างฟรอนท์เอนด์ที่จะรับการแจ้งเตือนและพิมพ์ไปยังผู้ใช้กัน

การสร้างส่วนหน้าด้วย Vue.js

เปิดเทอร์มินัลใหม่และเรียกใช้คำสั่งต่อไปนี้จาก การแจ้งเตือน ไดเรกทอรี:

หากคุณยังไม่ได้ติดตั้งเครื่องมือ Vue CLI ให้ทำตอนนี้โดยใช้คำสั่ง npm install -g @vue/cli .

คำสั่งนี้สร้างโครงการ Vue ใหม่ที่พร้อมดำเนินการและขยาย

แพ็คเกจสุดท้ายที่จะติดตั้งสำหรับการสาธิตนี้คือ BootstrapVue ซึ่งทำให้ง่ายต่อการใช้ไลบรารี CSS และส่วนประกอบจากเฟรมเวิร์ก Bootstrap ยอดนิยม

เปิดไดเร็กทอรีเว็บไคลเอ็นต์ในตัวแก้ไขโค้ดที่คุณชื่นชอบ จากนั้นเริ่มแอปพลิเคชัน Vue ที่สร้างขึ้นใหม่:

คำสั่งสุดท้ายจะเริ่มต้นเซิร์ฟเวอร์การพัฒนา Vue ที่จะให้บริการเพจและโหลดหน้าซ้ำโดยอัตโนมัติเมื่อคุณทำการเปลี่ยนแปลง

เปิดเบราว์เซอร์ของคุณและไปที่ https://localhost:8080; ที่ที่คุณควรเห็นหน้าต้อนรับเริ่มต้นของ Vue:

การเพิ่ม WebSocket ในส่วนหน้า

เฟรมเวิร์กของ Vue นั้นค่อนข้างเรียบง่าย และสำหรับโพสต์นี้ เราจะรักษาโค้ดให้เรียบง่ายที่สุด มาดูโครงสร้างไดเร็กทอรีกัน:

├── 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 ) ใช้ในการกำหนดค่าโครงการ ส่วนที่น่าสนใจที่สุด อย่างน้อยตอนนี้ก็อยู่ใน src ไดเรกทอรี:

• The main.js file เป็นไฟล์ JavaScript หลักของแอปพลิเคชัน ซึ่งจะโหลดองค์ประกอบทั่วไปทั้งหมดและเรียก App.vue หน้าจอหลัก เราจะแก้ไขในภายหลังเพื่อเพิ่มการรองรับ Bootstrap
• The App.vue เป็นไฟล์ที่มีใน HTML, CSS และ JavaScript สำหรับหน้าหรือเทมเพลตเฉพาะ เป็นจุดเริ่มต้นสำหรับแอปพลิเคชัน ส่วนนี้จะถูกแชร์โดยหน้าจอทั้งหมดโดยค่าเริ่มต้น ดังนั้นจึงเป็นสถานที่ที่ดีในการเขียนส่วนการแจ้งไคลเอ็นต์ในไฟล์นี้

public/index.html เป็นจุดเริ่มต้นคงที่จากตำแหน่งที่จะโหลด DOM หากคุณดูคุณจะเห็น

เมื่อใช้สัญกรณ์ {{message}} คุณกำหนดให้ Vue พิมพ์เนื้อหาของตัวแปรข้อความ ซึ่งคุณจะกำหนดในบล็อกถัดไป

ใน

Redis Enterprise Cloud ตอบสนองความต้องการของลูกค้าองค์กรที่เติบโตเต็มที่บน AWS . ได้อย่างไร

Redis Security Course เปิดให้บริการแล้วที่ Redis University