Leschat! - ผู้ส่งสารเรียลไทม์ | Pern-graphql
แอพแชทแบบเรียลไทม์ที่ทำด้วย Pern + GraphQL - คุณสมบัติการส่งข้อความส่วนตัว, Global & Group
การสาธิต
ปรับใช้กับ NetLify (front-end) & heroku (back-end)
สร้างขึ้นโดยใช้
ส่วนหน้า
- ReactJS - Frontend Framework
- ไคลเอน
- การสมัครสมาชิก Apollo - รับการอัปเดตแบบเรียลไทม์จากเซิร์ฟเวอร์ graphql ของคุณ
- บริบท API w/ hooks - สำหรับสถานะของผู้ใช้, การแชทที่เลือก, การแจ้งเตือนขนมปัง, ธีม ฯลฯ
- React Router - สำหรับการกำหนดเส้นทางและการนำทางทั่วไป
- รูปแบบเบ็ดตอบสนอง - สำหรับรูปแบบที่ยืดหยุ่น
- Material -ui w/ การปรับแต่ง CSS จำนวนมาก - ห้องสมุด UI
- ใช่ - สำหรับการตรวจสอบแบบฟอร์ม
- Date -FNS - สำหรับการจัดการและการจัดรูปแบบของวันที่
แบ็คเอนด์
- node.js - สภาพแวดล้อมรันไทม์สำหรับ JS
- Apollo Server - เพื่อสร้างเซิร์ฟเวอร์ graphql API ด้วยตัวเอง
- การสมัครสมาชิก Apollo - การสมัครสมาชิกคือการดำเนินการ GraphQL ที่ดูเหตุการณ์ที่ปล่อยออกมาจากเซิร์ฟเวอร์ Apollo
- PostgreSQL - ฐานข้อมูล SQL Opens -Source เพื่อจัดเก็บข้อมูล
- Sequelize - NodeJS ORM สำหรับฐานข้อมูลที่ใช้ SQL
- JSON Web Token - มาตรฐานในการรักษาความปลอดภัย/ตรวจสอบคำขอ HTTP
- bcrypt.js - สำหรับรหัสผ่านแฮช
- dotenv - เพื่อโหลดตัวแปรสภาพแวดล้อมจากไฟล์. env
คุณสมบัติ
- การรับรองความถูกต้อง (เข้าสู่ระบบ/ ลงทะเบียนพร้อมชื่อผู้ใช้และรหัสผ่าน)
- การแชทแบบเรียลไทม์โดยใช้เว็บซ็อกเก็ต
- การส่งข้อความส่วนตัวกับผู้ใช้ที่ลงทะเบียนทั้งหมด
- Global Channel สำหรับการแชทผู้ใช้ทั้งหมด
- การสร้างกลุ่มกับผู้ใช้ที่เลือก
- ผู้ใช้สามารถออกจากกลุ่มหลังจากได้รับการเพิ่ม
- ผู้สร้างกลุ่มสามารถเพิ่ม/ลบสมาชิกออกจากกลุ่ม
- ผู้สร้างกลุ่มสามารถลบกลุ่มและข้อความพร้อมกับมัน
- ผู้สร้างกลุ่มสามารถเปลี่ยนชื่อชื่อกลุ่มดังกล่าวได้
- การจัดการข้อผิดพลาดด้วยข้อความเชิงพรรณนา
- การแจ้งเตือนขนมปังปิ้งสำหรับการกระทำ: การสร้างกลุ่มลบผู้ใช้ ฯลฯ
- กำลังโหลดสปินเนอร์สำหรับกระบวนการดึงข้อมูลที่เกี่ยวข้อง
- วันที่จัดรูปแบบสำหรับการเพิ่ม/อัปเดตคำถาม/คำตอบ/ความคิดเห็น
- โหมดมืดสลับ w/ การจัดเก็บในท้องถิ่นบันทึก
- UI ตอบสนองที่เหมาะสมสำหรับหน้าจอทั้งหมด
ภาพหน้าจอ
เดสก์ท็อป/แท็บเล็ต
มือถือ
การใช้งาน
ตัวแปร env:
สร้างไฟล์. env ในไดเรกทอรีเซิร์ฟเวอร์และเพิ่มสิ่งต่อไปนี้:
PORT = 4000
JWT_SECRET = "Your JWT secret"
ลูกค้า:
เปิดไคลเอนต์/src/backendurls.js & เปลี่ยนวัตถุ "backendurls" เป็น:
{
http: "http://localhost:4000",
ws: "ws://localhost:4000/graphql"
}
เรียกใช้เซิร์ฟเวอร์การพัฒนาไคลเอนต์:
cd client
npm install
npm start
เซิร์ฟเวอร์:
เปิดเซิร์ฟเวอร์/config/config.json & อัปเดตค่าคีย์การพัฒนาเพื่อให้ตรงกับข้อมูลรับรอง PostgreSQL ในเครื่องของคุณ
ติดตั้ง 'Sequelize-cli' & 'Nodemon' เป็นแพ็คเกจทั่วโลกหากคุณยังไม่ได้
เรียกใช้คำสั่งนี้เพื่อโยกย้ายตาราง SQL ไปยัง PSQL ในเครื่องของคุณเอง: sequelize db:migrate
เรียกใช้เซิร์ฟเวอร์การพัฒนาแบ็กเอนด์:
cd server
npm install
npm run dev
