Pengenalan ke WebSockets dengan Spring

1. Ikhtisar

Dalam artikel ini, kami akan membuat aplikasi web sederhana yang mengimplementasikan pengiriman pesan menggunakan kapabilitas WebSocket baru yang diperkenalkan dengan Spring Framework 4.0.

WebSockets adalah koneksi dua arah , dupleks penuh , persisten antara browser web dan server. Setelah koneksi WebSocket dibuat, koneksi tetap terbuka sampai klien atau server memutuskan untuk menutup koneksi ini.

Kasus penggunaan yang umum bisa terjadi ketika aplikasi melibatkan banyak pengguna yang berkomunikasi satu sama lain, seperti dalam obrolan. Kami akan membangun klien obrolan sederhana dalam contoh kami.

2. Ketergantungan Maven

Karena ini adalah proyek berbasis Maven, pertama-tama kami menambahkan dependensi yang diperlukan ke pom.xml :

 org.springframework spring-websocket 5.2.2.RELEASE   org.springframework spring-messaging 5.2.2.RELEASE 

Selain itu, karena kita akan menggunakan JSON untuk membangun isi pesan kita, kita perlu menambahkan dependensi Jackson . Ini memungkinkan Spring untuk mengonversi objek Java kami ke / dari JSON :

 com.fasterxml.jackson.core jackson-core 2.10.2   com.fasterxml.jackson.core jackson-databind 2.10.2 

Jika Anda ingin mendapatkan versi terbaru dari perpustakaan di atas, cari di Maven Central.

3. Aktifkan WebSocket di Spring

Hal pertama yang harus dilakukan adalah mengaktifkan kapabilitas WebSocket. Untuk melakukan ini kita perlu menambahkan konfigurasi ke aplikasi kita dan memberi anotasi kelas ini dengan @EnableWebSocketMessageBroker .

Seperti namanya, ini memungkinkan penanganan pesan WebSocket, didukung oleh broker pesan:

@Configuration @EnableWebSocketMessageBroker public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer { @Override public void configureMessageBroker(MessageBrokerRegistry config) { config.enableSimpleBroker("/topic"); config.setApplicationDestinationPrefixes("/app"); } @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/chat"); registry.addEndpoint("/chat").withSockJS(); } } 

Di sini, kita dapat melihat bahwa metode configureMessageBroker digunakan untuk mengkonfigurasi broker pesan . Pertama, kami mengaktifkan broker pesan dalam memori untuk membawa pesan kembali ke klien pada tujuan yang diawali dengan "/ topic".

Kami menyelesaikan konfigurasi sederhana kami dengan menetapkan awalan "/ app" untuk memfilter tujuan yang menargetkan metode beranotasi aplikasi (melalui @MessageMapping ).

The registerStompEndpoints Metode register “/ chatting” endpoint, memungkinkan dukungan STOMP Spring . Ingatlah bahwa kami juga menambahkan di sini titik akhir yang bekerja tanpa SockJS demi elastisitas.

Titik akhir ini, jika diawali dengan "/ app", adalah titik akhir yang akan ditangani oleh metode ChatController.send () .

Ini juga mengaktifkan opsi fallback SockJS, sehingga opsi pengiriman pesan alternatif dapat digunakan jika WebSockets tidak tersedia. Ini berguna karena WebSocket belum didukung di semua browser dan mungkin dihalangi oleh proxy jaringan yang membatasi.

Fallback memungkinkan aplikasi menggunakan WebSocket API, tetapi dengan anggun menurunkan ke alternatif non-WebSocket bila diperlukan pada waktu proses.

4. Buat Model Pesan

Sekarang setelah kita menyiapkan proyek dan mengkonfigurasi kapabilitas WebSocket, kita perlu membuat pesan untuk dikirim.

Titik akhir akan menerima pesan yang berisi nama pengirim dan teks dalam pesan STOMP yang badannya adalah objek JSON .

Pesannya mungkin terlihat seperti ini:

{ "from": "John", "text": "Hello!" } 

Untuk memodelkan pesan yang membawa teks, kita dapat membuat yang sederhanaObjek Java dengan properti from dan teks :

public class Message { private String from; private String text; // getters and setters } 

Secara default, Spring akan menggunakan pustaka Jackson untuk mengonversi objek model kita ke dan dari JSON.

5. Buat Pengontrol Penanganan Pesan

Seperti yang telah kita lihat, pendekatan Spring untuk bekerja dengan pesan STOMP adalah mengaitkan metode pengontrol ke titik akhir yang dikonfigurasi. Ini dimungkinkan melalui anotasi @MessageMapping .

Asosiasi antara titik akhir dan pengontrol memberi kita kemampuan untuk menangani pesan jika diperlukan:

@MessageMapping("/chat") @SendTo("/topic/messages") public OutputMessage send(Message message) throws Exception { String time = new SimpleDateFormat("HH:mm").format(new Date()); return new OutputMessage(message.getFrom(), message.getText(), time); } 

Untuk tujuan dari contoh kami, kami akan membuat objek model lain bernama OutputMessage untuk mewakili pesan output yang dikirim ke tujuan yang dikonfigurasi. Kami mengisi objek kami dengan pengirim dan teks pesan yang diambil dari pesan masuk dan memperkayanya dengan stempel waktu.

Setelah menangani pesan kami, kami mengirimkannya ke tujuan yang sesuai yang ditentukan dengan anotasi @SendTo . Semua pelanggan tujuan “ / topic / messages ” akan menerima pesan tersebut.

6. Buat Klien Browser

Setelah membuat konfigurasi kita di sisi server, kita akan menggunakan pustaka sockjs-client untuk membangun halaman HTML sederhana yang berinteraksi dengan sistem perpesanan kita.

Pertama-tama, kita perlu mengimpor pustaka klien Javascript sockjs dan stomp . Selanjutnya, kita dapat membuat fungsi connect () untuk membuka komunikasi dengan titik akhir kita, fungsi sendMessage () untuk mengirim pesan STOMP dan fungsi disconnect () untuk menutup komunikasi:

  Chat WebSocket    var stompClient = null; function setConnected(connected) { document.getElementById('connect').disabled = connected; document.getElementById('disconnect').disabled = !connected; document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden'; document.getElementById('response').innerHTML = ''; } function connect() { var socket = new SockJS('/chat'); stompClient = Stomp.over(socket); stompClient.connect({}, function(frame) { setConnected(true); console.log('Connected: ' + frame); stompClient.subscribe('/topic/messages', function(messageOutput) { showMessageOutput(JSON.parse(messageOutput.body)); }); }); } function disconnect() { if(stompClient != null) { stompClient.disconnect(); } setConnected(false); console.log("Disconnected"); } function sendMessage() { var from = document.getElementById('from').value; var text = document.getElementById('text').value; stompClient.send("/app/chat", {}, JSON.stringify({'from':from, 'text':text})); } function showMessageOutput(messageOutput) { var response = document.getElementById('response'); var p = document.createElement('p'); p.style.wordWrap = 'break-word'; p.appendChild(document.createTextNode(messageOutput.from + ": " + messageOutput.text + " (" + messageOutput.time + ")")); response.appendChild(p); }

Connect Disconnect

Send

7. Menguji Contoh

Untuk menguji contoh kami, kami dapat membuka beberapa jendela browser dan mengakses halaman obrolan di:

//localhost:8080

Setelah ini selesai, kita dapat bergabung dengan obrolan dengan memasukkan nama panggilan dan menekan tombol sambungkan. Jika kami membuat dan mengirim pesan, kami dapat melihatnya di semua sesi browser yang telah bergabung dengan obrolan.

Lihat tangkapan layar untuk melihat contoh:

8. Kesimpulan

Dalam tutorial ini, kami telah menjelajahi dukungan WebSocket Spring. Kami telah melihat konfigurasi sisi servernya dan membangun mitra sisi klien sederhana dengan menggunakan sockjs dan pustaka Javascript stomp .

Kode contoh dapat ditemukan di proyek GitHub.