[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-ep-93-webrtc-voice-video-in-websocket-chat-all--*":3,"academy-blog-translations-qhw4rrkm8gg118j":84},{"data":4,"page":72,"perPage":72,"totalItems":72,"totalPages":72},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":78,"keywords":79,"locale":54,"published_at":80,"scheduled_at":13,"school_blog":76,"short_description":81,"slug":82,"status":74,"title":6,"updated":83,"updated_by":13,"views":77},"EP.93 การเพิ่มฟีเจอร์การสื่อสารแบบ Voice หรือ Video ใน WebSocket Chat","sclblg987654321","school_blog_translations","\u003Cp>ในยุคของการสื่อสารแบบเรียลไทม์ ฟีเจอร์ Voice และ Video Chat กลายเป็นสิ่งจำเป็นสำหรับแอปพลิเคชันยุคใหม่ หากคุณพัฒนา WebSocket Chat ด้วยภาษา Go แล้วต้องการอัปเกรดให้ผู้ใช้งานสามารถสื่อสารแบบเห็นหน้าหรือพูดคุยแบบสดได้ บทความนี้จะพาไปเรียนรู้การรวม WebRTC กับ WebSocket เพื่อให้ระบบของคุณสามารถรองรับฟีเจอร์เหล่านี้ได้อย่างมีประสิทธิภาพ\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>🎯 ทำไมต้องใช้ WebRTC ร่วมกับ WebSocket\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cul>\u003Cli>WebRTC (Web Real-Time Communication) คือเทคโนโลยีสำหรับส่งเสียงและวิดีโอแบบ peer-to-peer โดยไม่ต้องผ่านเซิร์ฟเวอร์ media\u003C\u002Fli>\u003Cli>WebSocket ใช้เป็นช่องทาง signaling เพื่อแลกเปลี่ยนข้อมูลสำคัญ (เช่น SDP และ ICE candidate) สำหรับจับคู่การเชื่อมต่อ\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch3>ข้อดีของการรวมกัน:\u003C\u002Fh3>\u003Cp>✅ ส่งเสียงและวิดีโอแบบ real-time โดยตรงระหว่าง client\u003Cbr>✅ ลด latency และประหยัด bandwidth\u003Cbr>✅ รองรับการสื่อสารหลายคนในห้องเดียวได้ง่ายขึ้น\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>🧩 โครงสร้างระบบ (Architecture Overview)\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Col>\u003Cli>ผู้ใช้เชื่อมต่อ WebSocket เพื่อทำ signaling\u003C\u002Fli>\u003Cli>ผู้ใช้แลกเปลี่ยน SDP และ ICE ผ่าน WebSocket\u003C\u002Fli>\u003Cli>WebRTC สร้าง media stream แบบ peer-to-peer\u003C\u002Fli>\u003Cli>WebSocket Server คอยดูแลห้อง, การเข้าร่วม, และ fallback กรณีการเชื่อมต่อไม่สำเร็จ\u003C\u002Fli>\u003C\u002Fol>\u003Cp> \u003C\u002Fp>\u003Ch3>🔄 ลำดับการสื่อสาร (Signaling Flow):\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext\">ผู้ใช้ A ---- WebSocket ----> Server ---- WebSocket ----> ผู้ใช้ B\n(SDP Offer \u002F ICE Candidate)       (SDP Answer \u002F ICE Candidate)\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>🛠️ ตัวอย่างโค้ด Go – WebSocket Signaling Handler\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">func signalingHandler(w http.ResponseWriter, r *http.Request) {\n    conn, err := upgrader.Upgrade(w, r, nil)\n    if err != nil {\n        log.Println(\"Upgrade error:\", err)\n        return\n    }\n    defer conn.Close()\n\n    for {\n        _, msg, err := conn.ReadMessage()\n        if err != nil {\n            log.Println(\"Read error:\", err)\n            break\n        }\n\n        var signal SignalMessage\n        if err := json.Unmarshal(msg, &signal); err == nil {\n            forwardToUser(signal.TargetID, msg)\n        }\n    }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch3>โครงสร้าง \u003Ccode inline=\"\">SignalMessage\u003C\u002Fcode>:\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">type SignalMessage struct {\n    Type     string `json:\"type\"`      \u002F\u002F offer, answer, candidate\n    SenderID string `json:\"sender_id\"`\n    TargetID string `json:\"target_id\"`\n    Payload  string `json:\"payload\"`   \u002F\u002F ข้อมูล SDP หรือ ICE\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>🎥 ตัวอย่างฝั่ง Client – การส่งสัญญาณด้วย WebSocket\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-javascript\">const peer = new RTCPeerConnection(config);\n\nnavigator.mediaDevices.getUserMedia({ video: true, audio: true })\n  .then(stream => {\n    localVideo.srcObject = stream;\n    stream.getTracks().forEach(track => peer.addTrack(track, stream));\n  });\n\npeer.createOffer().then(offer => {\n  peer.setLocalDescription(offer);\n  socket.send(JSON.stringify({\n    type: \"offer\",\n    target_id: \"user_b\",\n    sender_id: \"user_a\",\n    payload: JSON.stringify(offer)\n  }));\n});\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>📶 เทคนิคจัดการ Bandwidth ให้มีประสิทธิภาพ\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cul>\u003Cli>🎧 ใช้ Opus codec สำหรับเสียง และ VP8\u002FVP9 หรือ H.264 สำหรับวิดีโอ\u003C\u002Fli>\u003Cli>🔄 ปรับ bitrate และความละเอียด (resolution) ตามความเร็วเน็ตเวิร์ก\u003C\u002Fli>\u003Cli>🔀 ใช้ simulcast และ adaptive bitrate เมื่อมีผู้ใช้หลายคนในห้องเดียว\u003C\u002Fli>\u003Cli>🗜️ ใช้ compression และส่งเฉพาะข้อมูลที่เปลี่ยนแปลงเพื่อประหยัด bandwidth\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>✅ แนวทางปฏิบัติที่แนะนำ (Best Practices)\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>🔒 ใช้ HTTPS\u002FWSS ทุกครั้งเพื่อความปลอดภัยของข้อมูล\u003Cbr>🌐 เตรียม TURN server สำหรับ fallback กรณี NAT หรือ firewall บล็อกการเชื่อมต่อ\u003Cbr>🎛️ มี UI สำหรับ mute\u002Funmute, เปิด\u002Fปิดกล้อง และจัดการ event แบบเรียลไทม์\u003Cbr>🧪 ทดสอบกับหลายเบราว์เซอร์ อุปกรณ์ และสภาพเครือข่าย\u003Cbr>📦 วางโครงระบบให้รองรับ SFU หรือ mesh สำหรับห้อง video ขนาดใหญ่\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch2>🚀 สรุปส่งท้าย\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>การรวม WebRTC เข้ากับ WebSocket จะช่วยให้ระบบแชทของคุณมีฟีเจอร์ Voice & Video Call แบบ real-time ซึ่งสามารถรองรับทั้งการสนทนารายบุคคลและแบบกลุ่มได้อย่างมีประสิทธิภาพ พร้อมขยายระบบต่อไปในอนาคตได้ง่าย\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>🔥 ชาเลนจ์ก่อนขึ้น EP.94\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>🎯 ลองสร้างระบบ Video Call ง่าย ๆ ด้วย WebSocket + WebRTC:\u003C\u002Fp>\u003Cul>\u003Cli>สร้าง signaling server ด้วย Go\u003C\u002Fli>\u003Cli>ให้ผู้ใช้สร้างห้องและแชร์ลิงก์ให้ผู้อื่นเข้าร่วม\u003C\u002Fli>\u003Cli>แลกเปลี่ยน SDP\u002FICE ผ่าน WebSocket\u003C\u002Fli>\u003Cli>ใช้ STUN\u002FTURN สำหรับ NAT traversal\u003C\u002Fli>\u003Cli>เพิ่มปุ่มเปิด-ปิดไมค์\u002Fกล้อง\u003C\u002Fli>\u003C\u002Ful>\u003Cp>จากนั้นลองวิเคราะห์จุดที่สามารถปรับปรุง และนำไปแชร์กับทีมของคุณเพื่อเรียนรู้ร่วมกัน!\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>🔜 Next EP.94:\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>\u003Cstrong>การสร้าง WebSocket Server ที่รองรับการทำงานร่วมกับ Microservices\u003C\u002Fstrong>\u003Cbr>เรียนรู้การออกแบบระบบให้สามารถทำงานร่วมกับบริการย่อยได้อย่างมีประสิทธิภาพ ด้วยแนวคิด Microservices, Message Broker, และ Horizontal Scaling\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.academy.th\">\u003Cstrong>https:\u002F\u002Fwww.facebook.com\u002Fsuperdev.academy.th\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🔴 YouTube : \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUC2eI2RxcA2zbTqZyHyWIfRg\">\u003Cstrong>Superdev Academy\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>Superdev Academy\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🎬 TikTok: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.tiktok.com\u002F@superdevacademy?lang=th-TH\">\u003Cstrong>https:\u002F\u002Fwww.tiktok.com\u002F@superdevacademy?lang=th-TH\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🌐 Website: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdevacademy.com\u002F\">\u003Cstrong>https:\u002F\u002Fwww.superdevacademy.com\u002F\u003C\u002Fstrong>\u003C\u002Fa>\u003Cstrong> \u003C\u002Fstrong>\u003C\u002Fp>","157_11zon_7dmz42l9d3.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fcdgnti5vrlt3g5a\u002F157_11zon_7dmz42l9d3.webp","2026-03-04 08:46:27.420Z","",{"keywords":15,"locale":48,"school_blog":58},[16,23,28,33,38,43],{"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:34:00.920Z","ecac9y661or1xka","WebSocket","2026-04-10 16:08:05.227Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:45:05.836Z","37t2tvjs3vvty3x","WebRTC","2026-04-10 16:12:54.088Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:45:05.158Z","836if8oqwpocqe3","Voice Chat","2026-04-10 16:12:53.881Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:45:04.918Z","2oi71a8zf6vf68l","Video Call","2026-04-10 16:12:53.751Z",{"collectionId":17,"collectionName":18,"created":39,"created_by":13,"id":40,"name":41,"updated":42,"updated_by":13},"2026-03-04 08:46:27.028Z","kg1pnz6tawdssqk","Real-time Communication","2026-04-10 16:13:14.168Z",{"collectionId":17,"collectionName":18,"created":44,"created_by":13,"id":45,"name":46,"updated":47,"updated_by":13},"2026-03-04 08:45:34.555Z","pcr9o7q0iswjgjp","Go Language","2026-04-10 16:13:00.018Z",{"code":49,"collectionId":50,"collectionName":51,"created":52,"flag":53,"id":54,"is_default":55,"label":56,"updated":57},"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":59,"collectionId":60,"collectionName":61,"expand":62,"id":76,"views":77},"wqxt7ag2gn7xcmk","pbc_2105096300","school_blogs",{"category":63},{"blogIds":64,"collectionId":65,"collectionName":66,"created":67,"created_by":13,"id":59,"image":68,"image_alt":13,"image_path":69,"label":70,"name":71,"priority":72,"publish_at":73,"scheduled_at":13,"status":74,"updated":75,"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":71,"th":71},"Golang The Series",1,"2026-03-16 04:39:38.440Z","published","2026-04-25 02:32:15.470Z","qhw4rrkm8gg118j",225,"cdgnti5vrlt3g5a",[20,25,30,35,40,45],"2025-09-24 01:41:43.576Z","เรียนรู้วิธีเพิ่มฟีเจอร์เสียงและวิดีโอแบบเรียลไทม์ใน WebSocket Chat ด้วยการผสาน WebRTC เพื่อการสื่อสารที่ลื่นไหล ปลอดภัย และประหยัด Bandwidth","ep-93-webrtc-voice-video-in-websocket-chat","2026-04-25 02:48:04.273Z",{"th":82}]