[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-websocket-graphql-subscriptions-golang-all--*":3,"academy-blog-translations-56m0ne8ii43v014":75},{"data":4,"page":62,"perPage":62,"totalItems":62,"totalPages":62},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":70,"keywords":71,"locale":44,"published_at":72,"scheduled_at":13,"school_blog":66,"short_description":73,"status":64,"title":6,"updated":74,"updated_by":13,"slug":67,"views":69},"EP.85 การพัฒนา WebSocket Server ด้วยการใช้ GraphQL","sclblg987654321","school_blog_translations","\u003Cp>ใน EP นี้ เราจะพาคุณไปรู้จักกับ GraphQL Subscriptions — แนวทางการพัฒนาแอปพลิเคชันแบบเรียลไทม์ด้วย WebSocket ที่ให้ความยืดหยุ่นในการจัดการโครงสร้างข้อมูล และช่วยลดการส่งข้อมูลเกินจำเป็นได้ดีกว่า REST API แบบเดิม\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>เหมาะสำหรับแอปพลิเคชันที่ต้องอัปเดตข้อมูลทันที เช่น:\u003C\u002Fp>\u003Cul>\u003Cli>ระบบแชท (Chat)\u003C\u002Fli>\u003Cli>การแจ้งเตือน (Notifications)\u003C\u002Fli>\u003Cli>Dashboard แบบสด (Live Dashboard)\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>🤔 ทำไมต้องใช้ GraphQL Subscriptions?\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cfigure class=\"table\">\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>ประโยชน์\u003C\u002Fth>\u003Cth>รายละเอียด\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>✅ ส่งข้อมูลเฉพาะที่จำเป็น\u003C\u002Ftd>\u003Ctd>เลือก field ที่ต้องการได้แบบเฉพาะเจาะจง\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>🔄 Real-time updates\u003C\u002Ftd>\u003Ctd>รับข้อมูลทันทีเมื่อมีการเปลี่ยนแปลง\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>❌ ลดการทำ Polling\u003C\u002Ftd>\u003Ctd>ไม่ต้องเรียก REST API ทุก ๆ X วินาที\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>🛠 ยืดหยุ่นและปรับเปลี่ยนง่าย\u003C\u002Ftd>\u003Ctd>เปลี่ยน schema ได้โดยไม่กระทบ client\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Ffigure>\u003Cp> \u003C\u002Fp>\u003Ch2>🧪 ตัวอย่างการใช้งาน GraphQL Subscriptions ร่วมกับ WebSocket (Go)\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">package main\n\nimport (\n    \"log\"\n    \"net\u002Fhttp\"\n\n    \"github.com\u002F99designs\u002Fgqlgen\u002Fgraphql\u002Fhandler\"\n    \"github.com\u002F99designs\u002Fgqlgen\u002Fgraphql\u002Fplayground\"\n    \"github.com\u002Fyourusername\u002Fyourproject\u002Fgraph\"\n    \"github.com\u002Fyourusername\u002Fyourproject\u002Fgraph\u002Fgenerated\"\n)\n\nfunc main() {\n    srv := handler.NewDefaultServer(\n        generated.NewExecutableSchema(\n            generated.Config{Resolvers: &graph.Resolver{}},\n        ),\n    )\n\n    http.Handle(\"\u002F\", playground.Handler(\"GraphQL Playground\", \"\u002Fquery\"))\n    http.Handle(\"\u002Fquery\", srv)\n\n    log.Println(\"🚀 Server running at http:\u002F\u002Flocalhost:8080\u002F\")\n    log.Fatal(http.ListenAndServe(\":8080\", nil))\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cblockquote>\u003Cp>✅ หมายเหตุ: ตัวอย่างนี้ใช้ไลบรารี gqlgen ซึ่งเป็นหนึ่งในเครื่องมือยอดนิยมสำหรับสร้าง GraphQL server ด้วยภาษา Go\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cp> \u003C\u002Fp>\u003Ch2>🗨 ตัวอย่างคำสั่ง Subscription\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-graphql\">subscription {\n  messageAdded {\n    id\n    content\n    sender\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>เมื่อมีข้อความใหม่ถูกเพิ่มในระบบ (เช่น ส่งแชทเข้ามา) — Client ที่ subscribe อยู่จะได้รับข้อมูลใหม่นี้แบบ เรียลไทม์ทันที ผ่าน WebSocket\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>⚙️ การเชื่อมต่อ WebSocket สำหรับ GraphQL (ฝั่ง Frontend)\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>สามารถใช้เครื่องมืออย่าง Apollo Client หรือไลบรารีอื่น ๆ ที่รองรับ GraphQL Subscription ได้ทันที\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-js\">import { WebSocketLink } from \"@apollo\u002Fclient\u002Flink\u002Fws\";\nimport { ApolloClient, InMemoryCache } from \"@apollo\u002Fclient\";\n\nconst wsLink = new WebSocketLink({\n  uri: `ws:\u002F\u002Flocalhost:8080\u002Fquery`,\n  options: {\n    reconnect: true\n  }\n});\n\nconst client = new ApolloClient({\n  link: wsLink,\n  cache: new InMemoryCache()\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>💡 Apollo จะจัดการให้เองทั้งเรื่อง \u003Ccode inline=\"\">connection_init\u003C\u002Fcode>, \u003Ccode inline=\"\">ping\u002Fpong\u003C\u002Fcode>, และ auto-reconnect\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch2>🧠 สรุป\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>การใช้ GraphQL Subscriptions + WebSocket เป็นแนวทางที่ทันสมัยและยืดหยุ่นสำหรับการพัฒนาแอปพลิเคชันแบบ Real-time โดยมีข้อดีหลายด้าน:\u003C\u002Fp>\u003Cul>\u003Cli>ควบคุม payload ได้แม่นยำ\u003C\u002Fli>\u003Cli>ไม่ต้องทำ polling ซ้ำ ๆ\u003C\u002Fli>\u003Cli>ปรับเปลี่ยน schema ได้อิสระ\u003C\u002Fli>\u003Cli>ใช้งานร่วมกับ Go ได้อย่างราบรื่นผ่าน gqlgen\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>🚀 ท้าให้ลอง!\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>✅ ลองนำแนวทางนี้ไปพัฒนาแอปของคุณเอง เช่น:\u003C\u002Fp>\u003Cul>\u003Cli>ระบบแชทแบบกลุ่ม\u003C\u002Fli>\u003Cli>การแจ้งเตือนคำสั่งซื้อ\u002Fระบบงาน\u003C\u002Fli>\u003Cli>Dashboard รายงานข้อมูลเรียลไทม์\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>🔜 EP ถัดไป\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>EP.86: การจัดการ Connection ใน WebSocket ด้วย Redis Pub\u002FSub\u003C\u002Fp>\u003Cp>เราจะพาคุณไปเรียนรู้การแยก WebSocket Server ให้ทำงานแบบหลายเครื่อง (multi-instance) โดยใช้ Redis Pub\u002FSub เป็นตัวกลาง เพื่อให้ผู้ใช้เชื่อมต่อเครื่องไหนก็ยังสามารถส่งข้อความถึงกันได้ครบทุกคน!\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>\u003Cstrong>อ่านบทความ Series อื่นๆ\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FGolang\">\u003Cstrong>Golang The Series\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FJS2GO\">\u003Cstrong>JS2GO\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FTailwind%20CSS\">\u003Cstrong>10 Ep ที่จะให้คุณเป็นมือโปร Tailwind CSS ในชั่วข้ามคืน\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>🔵 Facebook: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.facebook.com\u002Fsuperdev.school.th\">\u003Cstrong>Superdev School  (Superdev)\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>📸 Instagram: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.instagram.com\u002Fsuperdevschool\u002F\">\u003Cstrong>superdevschool\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🎬 TikTok: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.tiktok.com\u002F@superdevschool\">\u003Cstrong>superdevschool\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp class=\"\" data-start=\"5978\" data-end=\"6095\">\u003Cstrong>🌐 Website: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002F\">\u003Cstrong>www.superdev.school\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>","141_11zon_bdygquh6rh.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fup9su6mzo2bnxox\u002F141_11zon_bdygquh6rh.webp","2026-03-04 08:46:53.744Z","",{"keywords":15,"locale":38,"school_blog":48},[16,23,28,33],{"collectionId":17,"collectionName":18,"created":19,"created_by":13,"id":20,"name":21,"updated":22,"updated_by":13},"sclkey987654321","school_keywords","2026-03-04 08:20:11.547Z","ey3puyme01a9bsw","Go","2026-04-10 16:07:25.893Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:20:14.253Z","ah6lvy4x8qe08l5","Golang","2026-04-10 16:07:26.172Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:34:00.920Z","ecac9y661or1xka","WebSocket","2026-04-10 16:08:05.227Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:46:53.342Z","5ac1xgod1ehyqva","GraphQL Subscriptions","2026-04-10 16:13:20.256Z",{"code":39,"collectionId":40,"collectionName":41,"created":42,"flag":43,"id":44,"is_default":45,"label":46,"updated":47},"th","pbc_1989393366","locales","2026-01-22 10:59:55.832Z","twemoji:flag-thailand","s8wri3bt4vgg2ji",true,"Thai","2026-04-10 15:42:46.614Z",{"category":49,"collectionId":50,"collectionName":51,"created":13,"expand":52,"id":66,"slug":67,"updated":68,"views":69},"wqxt7ag2gn7xcmk","pbc_2105096300","school_blogs",{"category":53},{"blogIds":54,"collectionId":55,"collectionName":56,"created":57,"created_by":13,"id":49,"image":58,"image_alt":13,"image_path":59,"label":60,"name":61,"priority":62,"publish_at":63,"scheduled_at":13,"status":64,"updated":65,"updated_by":13},[],"sclcatblg987654321","school_category_blogs","2026-03-04 08:33:53.210Z","59ty92ns80w_15oc1implw.png","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclcatblg987654321\u002Fwqxt7ag2gn7xcmk\u002F59ty92ns80w_15oc1implw.png",{"en":61,"th":61},"Golang The Series",1,"2026-03-16 04:39:38.440Z","published","2026-04-25 02:32:15.470Z","56m0ne8ii43v014","websocket-graphql-subscriptions-golang","2026-05-10 17:50:18.469Z",251,"up9su6mzo2bnxox",[20,25,30,35],"2025-09-04 02:17:58.346Z","เรียนรู้การใช้ GraphQL Subscriptions ร่วมกับ WebSocket ในภาษา Go เพื่อพัฒนาแอปแบบเรียลไทม์ที่มีโครงสร้างข้อมูลยืดหยุ่น เช่น Chat, Notification และ Dashboard","2026-04-25 02:48:09.598Z",{"th":67,"en":67}]