spring boot websocket

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

WebSocket คืออะไร?

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

เมื่อการเชื่อมต่อ WebSocket ถูกสร้างขึ้นระหว่างไคลเอนต์และเซิร์ฟเวอร์ทั้งคู่สามารถแลกเปลี่ยนข้อมูลได้จนกว่าการเชื่อมต่อจะถูกปิดโดยฝ่ายใดฝ่ายหนึ่ง

นี่คือการจัดสรรหลักที่ WebSocket เป็นที่ต้องการมากกว่าโปรโตคอล HTTP เมื่อสร้างบริการสื่อสารเหมือนแชทที่ทำงานที่ความถี่สูงที่มีเวลาแฝงต่ำ

Stomp คืออะไร?

Simple (หรือสตรีมมิ่ง) ข้อความที่มุ่งเน้นข้อความ (Stomp) ซึ่งเดิมชื่อ TTMP เป็นโปรโตคอลที่ใช้ข้อความง่าย ๆ ที่ออกแบบมาสำหรับการทำงานกับมิดเดิลแวร์ที่มุ่งเน้นข้อความ (MOM) มันมีรูปแบบลวดแบบทำงานร่วมกันที่อนุญาตให้ไคลเอนต์ Stomp พูดคุยกับนายหน้าข้อความใด ๆ ที่สนับสนุนโปรโตคอล

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

การตั้งค่าแอปพลิเคชัน

แอปพลิเคชันของเราจะมีการกำหนดค่าต่อไปนี้ซึ่งสามารถตั้งค่าได้โดยใช้ Spring Initializr:

• Java เวอร์ชัน: 11

• ประเภท: โครงการ Maven

• การพึ่งพา: WebSocket

• สปริงบูตเวอร์ชัน: 2.4.2

โครงสร้างโครงการ

การกำหนดค่า WebSocket

การกำหนดค่าจุดสิ้นสุดของ WebSocket และนายหน้าข้อความของเรานั้นค่อนข้างง่าย

 @Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/websocket").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
        registry.setApplicationDestinationPrefixes("/app");
    }
}

• @enableWebSocketMessagebroker คำอธิบายประกอบใช้เพื่อเปิดใช้งาน WebSocket Server ของเรา

• อินเทอร์เฟซ WebSocketMessageBrokerConFigurer ใช้เพื่อให้การใช้งานสำหรับวิธีการบางอย่างในการกำหนดค่าการเชื่อมต่อ WebSocket

• วิธีการ RegisterStempendPoints ใช้เพื่อลงทะเบียนจุดสิ้นสุดของ WebSocket ที่ไคลเอนต์จะใช้เพื่อเชื่อมต่อกับเซิร์ฟเวอร์

• เมธอด configureMessageBroker ใช้เพื่อกำหนดค่านายหน้าข้อความของเราซึ่งจะใช้ในการกำหนดเส้นทางข้อความจากไคลเอนต์หนึ่งไปยังอีก

Sockjs ยังถูกใช้เพื่อเปิดใช้งานตัวเลือกทางเลือกสำหรับเบราว์เซอร์ที่ไม่รองรับ WebSocket

การสร้างรูปแบบการแชท

รูปแบบการแชทของเราคือ Payload ข้อความซึ่งจะแลกเปลี่ยนระหว่างฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์ของแอปพลิเคชัน

 public class ChatMessage {
    private String content;
    private String sender;
    private MessageType type;

    public enum MessageType {
        *CHAT*, *LEAVE*, *JOIN
    *}

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public String getSender() {
        return sender;
    }

    public void setSender(String sender) {
        this.sender = sender;
    }

    public MessageType getType() {
        return type;
    }

    public void setType(MessageType type) {
        this.type = type;
    }
}

การสร้างคอนโทรลเลอร์แชทของเรา

คอนโทรลเลอร์ของเราจะรับผิดชอบในการจัดการวิธีการข้อความทั้งหมดที่มีอยู่ในแอปพลิเคชันแชทของเราซึ่งโดยทั่วไปจะได้รับข้อความจากลูกค้ารายหนึ่งแล้วออกอากาศไปยังผู้อื่น

 @Controller
public class ChatController {

    @MessageMapping("/chat.register")
    @SendTo("/topic/public")
    public ChatMessage register(@Payload ChatMessage chatMessage, SimpMessageHeaderAccessor headerAccessor) {
        headerAccessor.getSessionAttributes().put("username", chatMessage.getSender());
        return chatMessage;
    }

    @MessageMapping("/chat.send")
    @SendTo("/topic/public")
    public ChatMessage sendMessage(@Payload ChatMessage chatMessage) {
        return chatMessage;
    }
}

การใช้ /แอพเป็นจุดปลายทางเป็นเพราะไฟล์การกำหนดค่า WebSocket ของเราซึ่งบอกว่าข้อความทั้งหมดจะถูกกำหนดเส้นทางไปยังวิธีการจัดการเหล่านี้มีคำอธิบายประกอบด้วย @MessageMapping

การสร้าง UI ส่วนหน้า

UI ของเราเป็นกล่องการ์ดง่ายๆที่สร้างขึ้นโดยใช้ HTML และ CSS ที่ใช้ฟังก์ชั่น JS บางอย่างเพื่อส่งและรับข้อความ

• index.html เป็นไฟล์ HTML ซึ่งมีโครงสร้างพื้นฐานบางอย่าง A OCK.JS เพื่อเปิดใช้งานตัวเลือกทางเลือกสำหรับไฟล์ที่ไม่สามารถเรียกใช้ JS บนเบราว์เซอร์และไลบรารี Stomp เพื่อทำหน้าที่เป็นนายหน้าข้อความ
• Main.css เป็นไฟล์ CSS ที่มีสไตล์ HTML ของเรา
• Main.js เป็นไฟล์ JavaScript ที่เชื่อมต่อจุดสิ้นสุดของ WebSocket เพื่อส่งและรับข้อความ นอกจากนี้ยังแสดงและจัดรูปแบบข้อความบนหน้าจอ

ผลลัพธ์สุดท้าย