สร้าง Chat Room ด้วย Golang Websocket แบบเบาสมอง

สำหรับคนมีเวลาอ่านน้อย

• Websocket เป็นเทคโนโลยีเพื่อใช้ติดต่อสื่อสารกันระหว่าง Server กับ Client แบบ Real-Time ก็คือไม่ต้อง Refresh หน้าใหม่และไม่จำเป็นต้องส่ง Request ใหม่ไปยัง Server ทำให้ประหยัดเวลาและปริมาณข้อมูลที่ถูกส่งไปยัง Server กับ Client
• สร้าง Chat room ด้วย Websocket โดยแต่ละห้องจะมี ID เป็นของตัวเองเพื่อให้ข้อมูลที่ส่งไปจะถูกส่งไปเฉพาะคนที่เชื่อมต่ออยู่ใน Chat room ID เดียวกันเท่านั้น

Simulation

นี่คือเหตุการณ์ที่จะเกิดขึ้นหากคุณสร้าง Websocket โดยไม่มีการสร้าง Chat room

A : ส่งข้อความไปหา B ว่า I Love U

B : บ้าส่งอะไรมา 😚

⏱ a few moments later…

C : Love ใครหรอ 😏

D : Love U เหมือนกันน่ะ 🙃

A : เห็นได้ไงฟร๊ะ WT* 😱

พูดง่ายๆก็คือ ข้อความจะถูกส่งไปให้ทุกคนที่เชื่อมต่ออยู่ใน Websocket Server เดียวกัน

แล้ว Web Socket คืออะไร ?

ก่อนอื่นเลยมารู้จัก Websocket กันก่อน Websocket เป็นเทคโนโลยีเพื่อใช้ติดต่อสื่อสารกันระหว่าง Server กับ Client แบบ Real-Time ก็คือไม่ต้อง Refresh หน้าใหม่และไม่จำเป็นต้องส่ง Request ใหม่ไปยัง Server ทำให้ประหยัดเวลาและปริมาณข้อมูลที่ถูกส่งไปยัง Server กับ Client โดยข้อมูลจะถูกส่งไปให้ทุกคนที่เชื่อมต่อผ่าน Websocket Server เดียวกัน

อ่าห้ะๆเข้าใจและ 😎

งั้นมาลองสร้าง Chat room ด้วย Golang Websocket กันเล้ยย (หายใจเข้าลึกๆ 😤)

Started: About Server

• สร้างไฟล์ hub.go ขึ้นมาแล้วก็ใส่โค้ดตามด้านล่างนี้

hub.go

ในไฟล์ hub.go จะเป็นเหมือน Pool Connection ของเราที่คอยจัดการกับ Event ต่างๆ ที่เกิดขึ้น

• ต่อไปก็สร้างไฟล์ client.go

client.go

ในไฟล์ Client.go จะป็นตัวที่เอาไว้เชื่อมต่อกับ Client เขียนข้อความเพื่อส่งผ่านทาง Socket

• ไฟล์สุดท้ายของฝั่ง Server สร้างไฟล์ main.go

main.go

ในส่วนนี้จะเป็นการ Run Server ของเราแล้วก็ Serve File home.html สำหรับหน้า Default ซึ่งก็คือหน้าที่ Client ใช้ติดต่อกับ Server โดยเราจะมาสร้างไฟล์ home.html กัน!

Started: About Client

• สร้างไฟล์ home.htmlโดยในนี้จะเป็นส่วนที่ฝั่งหน้าบ้านใช้ติดต่อกับ Websocket Server

home.html

ตรง Query ?roomId จะเป็นเหมือน ID ของห้องแชทเพื่อที่เวลาเราส่ง Message มันจะถูกส่งไปให้เฉพาะ Client ที่ Register ด้วย roomId เดียวกัน ให้ลองนึกถึง Messenger ของ Facebook น่ะค้าบบบ

Final

สุดท้ายลองใน Terminal ให้พิมพ์ go run .สำหรับ go version >=1.11 หรือ go run *.go

เปิด Browser ขึ้นมาแล้วไปที่ http://localhost:8080/ หรือ Port ที่เราใช้ในการ Run น่ะครับ หากไม่มีอะไรผิดพลาดจะได้หน้าตาแบบนี้

http://localhost:8080/

ลองกดส่งข้อความกันได้เล้ยยย !!!

สามารถ Run Client บน Port อื่น เพื่อทดสอบว่า ข้อความจาก roomId 1 ถูกส่งไปยัง roomId 2 หรือไม่

Example

• สร้างไฟล์ anotherHome.html โดย Run บน Port อื่น (หากใช้ Vs-code จะมีตัว Extension ที่ชื่อว่า Live Server) แล้วเปลี่ยนโค้ดบรรทัดนี้

conn = new WebSocket("ws://" + document.location.host + "/ws" + "?roomId=1111111");

เปลี่ยน roomId ให้เป็น 2222222

conn = new WebSocket("ws://" + document.location.host + "/ws" + "?roomId=2222222");

จากนั้นให้ลองส่งข้อความดูอีกครั้ง

Summary

Websocket ช่วยให้เราสามารถรับส่งข้อมูลได้แบบ Real-Time โดยไม่ต้องมีการของ Request ใดๆเลย เพียงแค่ส่งข้อมูลผ่านไปทาง Websocket Server ที่มีการระบุ Room ID เพื่อให้ข้อความที่เราส่งไปจะเห็นเฉพาะคนที่อยู่ใน Chat room เดียวกับเรา อีกทั้งยังสามารถนำไปประยุกต์ใช้ได้กับงานหหลายอย่างมากๆ ยกตัวอย่างเช่น ข้อมูลสถานะของพัสดุ หรือข้อมูลที่ต้องการความเป็น Real-Time

อย่าลืม 👏 (Claps) และ 🔖 (Bookmark) บทความนี้ไว้อ่านทีหลังด้วยนะ

ดูบทความดีๆอีกมากมายได้ที่

Reference

https://www.softmelt.com/article.php?id=424