spring boot websocket

Membangun Aplikasi Obrolan Waktu Nyata dengan Spring Boot dan Websocket

Apa itu Websocket?

WebSocket adalah protokol komunikasi komputer, menyediakan saluran komunikasi dupleks penuh pada satu koneksi TCP. WebSocket berbeda dari HTTP. Protokol memungkinkan interaksi antara browser web (atau aplikasi klien lain) dan server web dengan overhead yang lebih rendah dari alternatif setengah dupleks seperti pemungutan suara HTTP, memfasilitasi transfer data real-time dari dan ke server.

Setelah koneksi Websocket dibuat antara klien dan server, keduanya dapat bertukar informasi sampai koneksi ditutup oleh salah satu pihak.

Ini adalah penetapan utama yang lebih disukai Websocket daripada protokol HTTP saat membangun layanan komunikasi seperti obrolan yang beroperasi pada frekuensi tinggi dengan latensi rendah.

Apa itu Stomp?

Protokol pesan berorientasi teks (atau streaming) (STOMP), yang sebelumnya dikenal sebagai TTMP, adalah protokol berbasis teks sederhana, yang dirancang untuk bekerja dengan middleware berorientasi pesan (MOM). Ini memberikan format kawat yang dapat dioperasikan yang memungkinkan klien STOMP berbicara dengan broker pesan apa pun yang mendukung protokol.

Karena Websocket hanyalah protokol komunikasi, ia tidak tahu cara mengirim pesan ke pengguna tertentu. Stomp pada dasarnya adalah protokol pesan yang berguna untuk fungsionalitas ini.

Menyiapkan Aplikasi

Aplikasi kami akan memiliki konfigurasi berikut yang dapat diatur menggunakan Initializr Spring:

• Versi Java: 11

• Jenis: Proyek Maven

• Ketergantungan: Websocket

• Versi Boot Musim Semi: 2.4.2

Struktur proyek

Mengkonfigurasi Websocket

Mengkonfigurasi titik akhir Websocket dan broker pesan kami cukup sederhana.

 @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 Anotasi digunakan untuk mengaktifkan server WebSocket kami.

• Antarmuka WebSocketMessageBrokerConfigurer digunakan untuk memberikan implementasi untuk beberapa metodenya untuk mengonfigurasi koneksi WebSocket.

• Metode RegisterStompendPoints digunakan untuk mendaftarkan titik akhir WebSocket yang akan digunakan klien untuk terhubung ke server.

• Metode ConfigureMessageBroker digunakan untuk mengonfigurasi broker pesan kami yang akan digunakan untuk merutekan pesan dari satu klien ke klien lainnya.

Sockjs juga digunakan untuk mengaktifkan opsi fallback untuk browser yang tidak mendukung WebSocket.

Membuat model obrolan

Model obrolan kami adalah muatan pesan yang akan dipertukarkan antara sisi klien dan sisi server aplikasi.

 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;
    }
}

Membuat pengontrol obrolan kami

Pengontrol kami akan bertanggung jawab untuk menangani semua metode pesan yang ada dalam aplikasi obrolan kami yang pada dasarnya akan menerima pesan dari satu klien dan kemudian menyiarkannya ke yang lain.

 @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;
    }
}

Penggunaan /aplikasi sebagai titik tujuan adalah karena file konfigurasi WebSocket kami yang mengatakan bahwa semua pesan akan dialihkan ke metode penanganan yang dianotasi dengan @MessageMapping.

Membuat UI front-end

UI kami adalah kotak kartu sederhana yang dibangun menggunakan HTML dan CSS yang menjalankan beberapa fungsi JS untuk mengirim dan menerima pesan.

• Index.html adalah file HTML yang berisi beberapa struktur dasar a ck.js untuk memungkinkan opsi fallback bagi mereka yang tidak dapat menjalankan JS di browser mereka dan perpustakaan STOMP untuk berfungsi sebagai broker pesan.
• Main.CSS adalah file CSS yang menata HTML kami.
• Main.js adalah file JavaScript yang menghubungkan titik akhir WebSocket untuk mengirim dan menerima pesan. Ini juga menampilkan dan memformat pesan di layar.

Hasil akhir