EP.85 การพัฒนา WebSocket Server ด้วยการใช้ GraphQL

ใน EP นี้ เราจะพาคุณไปรู้จักกับ GraphQL Subscriptions — แนวทางการพัฒนาแอปพลิเคชันแบบเรียลไทม์ด้วย WebSocket ที่ให้ความยืดหยุ่นในการจัดการโครงสร้างข้อมูล และช่วยลดการส่งข้อมูลเกินจำเป็นได้ดีกว่า REST API แบบเดิม

เหมาะสำหรับแอปพลิเคชันที่ต้องอัปเดตข้อมูลทันที เช่น:

• ระบบแชท (Chat)
• การแจ้งเตือน (Notifications)
• Dashboard แบบสด (Live Dashboard)

🤔 ทำไมต้องใช้ GraphQL Subscriptions?

🧪 ตัวอย่างการใช้งาน GraphQL Subscriptions ร่วมกับ WebSocket (Go)

package main

import (
    "log"
    "net/http"

    "github.com/99designs/gqlgen/graphql/handler"
    "github.com/99designs/gqlgen/graphql/playground"
    "github.com/yourusername/yourproject/graph"
    "github.com/yourusername/yourproject/graph/generated"
)

func main() {
    srv := handler.NewDefaultServer(
        generated.NewExecutableSchema(
            generated.Config{Resolvers: &graph.Resolver{}},
        ),
    )

    http.Handle("/", playground.Handler("GraphQL Playground", "/query"))
    http.Handle("/query", srv)

    log.Println("🚀 Server running at http://localhost:8080/")
    log.Fatal(http.ListenAndServe(":8080", nil))
}

✅ หมายเหตุ: ตัวอย่างนี้ใช้ไลบรารี gqlgen ซึ่งเป็นหนึ่งในเครื่องมือยอดนิยมสำหรับสร้าง GraphQL server ด้วยภาษา Go

🗨 ตัวอย่างคำสั่ง Subscription

subscription {
  messageAdded {
    id
    content
    sender
  }
}

เมื่อมีข้อความใหม่ถูกเพิ่มในระบบ (เช่น ส่งแชทเข้ามา) — Client ที่ subscribe อยู่จะได้รับข้อมูลใหม่นี้แบบ เรียลไทม์ทันที ผ่าน WebSocket

⚙️ การเชื่อมต่อ WebSocket สำหรับ GraphQL (ฝั่ง Frontend)

สามารถใช้เครื่องมืออย่าง Apollo Client หรือไลบรารีอื่น ๆ ที่รองรับ GraphQL Subscription ได้ทันที

import { WebSocketLink } from "@apollo/client/link/ws";
import { ApolloClient, InMemoryCache } from "@apollo/client";

const wsLink = new WebSocketLink({
  uri: `ws://localhost:8080/query`,
  options: {
    reconnect: true
  }
});

const client = new ApolloClient({
  link: wsLink,
  cache: new InMemoryCache()
});

💡 Apollo จะจัดการให้เองทั้งเรื่อง connection_init, ping/pong, และ auto-reconnect

🧠 สรุป

การใช้ GraphQL Subscriptions + WebSocket เป็นแนวทางที่ทันสมัยและยืดหยุ่นสำหรับการพัฒนาแอปพลิเคชันแบบ Real-time โดยมีข้อดีหลายด้าน:

• ควบคุม payload ได้แม่นยำ
• ไม่ต้องทำ polling ซ้ำ ๆ
• ปรับเปลี่ยน schema ได้อิสระ
• ใช้งานร่วมกับ Go ได้อย่างราบรื่นผ่าน gqlgen

🚀 ท้าให้ลอง!

✅ ลองนำแนวทางนี้ไปพัฒนาแอปของคุณเอง เช่น:

• ระบบแชทแบบกลุ่ม
• การแจ้งเตือนคำสั่งซื้อ/ระบบงาน
• Dashboard รายงานข้อมูลเรียลไทม์

🔜 EP ถัดไป

EP.86: การจัดการ Connection ใน WebSocket ด้วย Redis Pub/Sub

เราจะพาคุณไปเรียนรู้การแยก WebSocket Server ให้ทำงานแบบหลายเครื่อง (multi-instance) โดยใช้ Redis Pub/Sub เป็นตัวกลาง เพื่อให้ผู้ใช้เชื่อมต่อเครื่องไหนก็ยังสามารถส่งข้อความถึงกันได้ครบทุกคน!

อ่านบทความ Series อื่นๆ

• Golang The Series
• JS2GO
• 10 Ep ที่จะให้คุณเป็นมือโปร Tailwind CSS ในชั่วข้ามคืน

🔵 Facebook: Superdev School  (Superdev)

📸 Instagram: superdevschool

🎬 TikTok: superdevschool

🌐 Website: www.superdev.school