สอนสร้างแอปพลิเคชันแชทแบบง่ายด้วย Spring Boot และ WebSocket

ในบทความนี้ เราจะสร้างแอปพลิเคชันแชทแบบง่ายที่ให้ผู้ใช้สามารถลงชื่อเข้าใช้งาน (Sign In) เข้าร่วมห้อง (Join Room) สร้างห้อง (Create Room) ส่งข้อความสาธารณะในห้อง (Public Chat) และส่งข้อความส่วนตัวระหว่างผู้ใช้ (Private Chat) โดยใช้ Spring Boot และ WebSocket

---

1. การตั้งค่าเซิร์ฟเวอร์ด้วย Spring Boot

แอปพลิเคชันของเราประกอบด้วย:

1. WebSocket สำหรับการส่งข้อความแบบเรียลไทม์
2. REST API สำหรับการลงทะเบียนผู้ใช้และการจัดการห้องแชท

โค้ดหลัก: 

• ตั้งค่า WebSocket ด้วย @EnableWebSocketMessageBroker และใช้ SockJS เพื่อรองรับ WebSocket Client
• สร้าง REST Controller สำหรับการจัดการผู้ใช้และห้องแชท
• ใช้ STOMP Protocol เพื่อจัดการข้อความในรูปแบบ Topic และ Queue

---

2. การสร้าง WebSocket Controller

• ผู้ใช้สามารถส่งข้อความสาธารณะในห้องผ่าน Topic เช่น /topic/room/{roomName}
• ข้อความส่วนตัวส่งถึงผู้ใช้โดยตรงผ่าน Queue เช่น /queue/private

ตัวอย่างโค้ด:

• ฟังก์ชันสำหรับส่งข้อความในห้อง:

  @MessageMapping("/chat/public")
  public void publicChat(ChatRequest request) {
    Room room = rooms.get(request.getRoomName());
    if (room != null && room.getUsers().contains(request.getNickname())) {
        messagingTemplate.convertAndSend("/topic/room/" + request.getRoomName(),
                new ChatMessage(request.getNickname(), request.getRoomName(), request.getMessage()));
    }
  }
  

• ฟังก์ชันสำหรับข้อความส่วนตัว:

  @MessageMapping("/chat/private")
  public void privateChat(PrivateChatRequest request) {
    messagingTemplate.convertAndSendToUser(request.getReceiver(), "/queue/private",
                new ChatMessage(request.getSender(), request.getReceiver(), request.getMessage()));
  }
  

---

3. การพัฒนาฝั่งไคลเอนต์ด้วย JavaScript

เราได้พัฒนา JavaScript Client อย่างง่ายเพื่อให้ผู้ใช้สามารถ:

1. ลงชื่อเข้าใช้งานด้วยชื่อเล่น (Nickname)
2. เข้าร่วมห้องหรือออกจากห้อง
3. ส่งข้อความแบบเรียลไทม์

โครงสร้าง HTML:

<div>
    <label for="nickname">Nickname:</label>
    <input type="text" id="nickname">
</div>
<div>
    <label for="room">Room:</label>
    <input type="text" id="room">
</div>
<div>
    <button id="connect">Connect</button>
    <button id="disconnect">Disconnect</button>
</div>
<div>
    <textarea id="message" placeholder="Type your message"></textarea>
    <button id="send">Send</button>
</div>
<div id="messages"></div>

ฟังก์ชันการเชื่อมต่อ WebSocket:

document.getElementById('connect').addEventListener('click', () => {
    stompClient.connect({}, () => {
        const room = document.getElementById('room').value;
        stompClient.subscribe(`/topic/room/${room}`, (message) => {
            const data = JSON.parse(message.body);
            document.getElementById('messages').innerHTML += `<p>${data.sender}: ${data.message}</p>`;
        });
    });
});

---

4. การประกาศสถานะการเข้าร่วมห้องและออกจากห้อง

เมื่อผู้ใช้เข้าหรือออกจากห้อง เซิร์ฟเวอร์จะส่งข้อความระบบแจ้งให้ผู้ใช้ในห้องทราบ เช่น:

• Alice joined the room.
• Bob left the room.

ตัวอย่างโค้ด:

@PostMapping("/rooms/join")
public String joinRoom(@RequestBody JoinRoomRequest request) {
    Room room = rooms.get(request.getRoomName());
    room.addUser(request.getNickname());
    messagingTemplate.convertAndSend("/topic/room/" + request.getRoomName(),
            new SystemMessage(request.getNickname() + " joined the room."));
    return "Joined successfully";
}

---

5. สรุป

แอปพลิเคชันนี้เป็นตัวอย่างที่ดีสำหรับการพัฒนาแชทแบบง่าย ๆ ด้วย Spring Boot และ WebSocket ซึ่งสามารถต่อยอดเพื่อเพิ่มฟีเจอร์อื่น ๆ ได้ เช่น การเก็บประวัติแชท หรือการยืนยันตัวตนของผู้ใช้

ลิงก์ที่เกี่ยวข้อง:

• Spring Boot Documentation
• STOMP Protocol