Pembelajaran boot musim semi berlanjut. Di dua blog sebelumnya, kami memperkenalkan cara menggunakan wadah boot musim semi untuk membangun proyek web dan cara menambahkan dukungan HTTPS ke proyek kami. Berdasarkan dua artikel ini, kami akan melihat cara menggunakan WebSocket di Spring Boot hari ini.
Apa itu Websocket
WebSocket menyediakan fungsi komunikasi dupleks asinkron antara browser dan server, yang berarti bahwa kami dapat menggunakan browser untuk mengirim pesan ke server, dan server juga dapat mengirim pesan ke browser. Saat ini, versi utama browser utama mendukung WebSocket, tetapi beban kerja menggunakan WebSocket dalam pengembangan aktual akan sedikit lebih besar, dan masalah kompatibilitas browser akan ditingkatkan. Pada saat ini, kami lebih cenderung menggunakan sub-protokol Websocket untuk dengan cepat mengimplementasikan fungsi kami. Oke, saya tidak akan banyak bicara tentang Websocket di sini, kami terutama melihat cara menggunakannya.
Penciptaan Proyek
Menggunakan WebSocket mengharuskan kami membuat proyek terlebih dahulu. Metode pembuatan proyek ini sama dengan apa yang kami katakan di artikel sebelumnya (saya pertama kali belajar tentang kerangka boot musim semi). Perbedaannya adalah bahwa ketika memilih ketergantungan, kami memilih dependensi timeleaf dan websocket, seperti yang ditunjukkan pada gambar di bawah ini:
Mengkonfigurasi Websocket
Setelah proyek berhasil dibuat, pertama -tama kami mengkonfigurasi WebSocket dan membuat kelas berikut:
@Configuration @enableWebsocketMessageBrokerPublic kelas WebSocketConfig memperluas abstrak abstrakwebsocketmessageBrokerConfigurer {@Override public void registerstompendpoints (stompendpointregistry ("endsocky (" endsockang ("endsocky (" endgendpointon ("endgendpoint (" } @Override public void configureMessageBroker (MessageBrokerRegistry Registry) {Registry.enablesImplebroker ("/Topic"); }}Saya akan mengatakan poin -poin berikut tentang kategori ini:
1@EnableWebsocketMessageBroker Anotasi berarti bahwa protokol STOMP diaktifkan untuk mengirimkan pesan berbasis proxy. Pialang berarti proxy.
2. Metode RegisterStompendPoints mewakili simpul yang mendaftarkan protokol STOMP dan menentukan URL yang dipetakan.
3.Stompendpointregistry.addendPoint ("/endpointsang"). WithSockJS (); Baris kode ini digunakan untuk mendaftarkan simpul protokol STOMP dan juga menentukan penggunaan protokol SockJS.
4. Metode ConfigureMessageBroker digunakan untuk mengonfigurasi broker pesan. Karena kami mengimplementasikan fungsi push, broker pesan di sini adalah /topik
Buat kelas penerima untuk browser untuk mengirim pesan
Pesan yang dikirim oleh browser diterima menggunakan kelas ini:
Public Class RequestMessage {Private String Name; public string getName () {return name; }}Buat kelas pesan respons
Pesan yang dikembalikan oleh server ke browser dibawa oleh kelas ini:
ResponseMessage kelas publik {private string responseMessage; responseMessage publik (string responseMessage) {this.ResponseMessage = responseMessage; } public string getResponseMessage () {return responseMessage; }}Buat pengontrol
@ControllerPublic kelas WScontroller {@MessAgeMapping ("/welcome") @sendto ("/topic/getResponse") Public ResponseMessage mengatakan (pesan requestMessage) {System.out.println (message.getName ()); kembalikan responseMessage baru ("Selamat Datang," + message.getName () + "!"); }}Mengenai pengontrol ini, pertama -tama, tidak perlu mengatakan banyak tentang anotasi @Controller. Anotasi @MessageMapping yang ditambahkan pada metode Say mirip dengan @RequestMapping yang kami gunakan sebelumnya. Anotasi @Sendto berarti bahwa ketika server memiliki pesan yang perlu didorong, pesan akan dikirim ke browser yang berlangganan jalur di @sendto.
Tambahkan skrip
Dalam hal ini, kita membutuhkan tiga file skrip JS, yaitu skrip klien Stomp.js dari Protokol Stomp, sock skrip klien. Ketiga file JS ini disalin ke direktori SRC/Main/Resources/Static/JS. Oke, saya telah menyiapkan tiga file JS ini untuk teman -teman saya. Anda dapat mengunduh kasing secara langsung di akhir artikel. Ada kasus dalam kasus ini, atau Anda dapat mengunduh ketiga file JS ini sendiri.
Halaman demo
Sebelum menulis halaman HTML ini, saya ingin berbicara terlebih dahulu tentang apa efek yang kami coba capai. Setelah proyek saya dimulai, saya mengakses halaman pengiriman pesan di browser dan mengirim pesan di halaman itu. Ketika server menerima pesan ini, pesan dikirim ke semua browser yang terhubung ke server. OK, kami membuat halaman Ws.html baru di direktori SRC/Main/Resources/Templates, dengan konten berikut:
<html lang = "en" xmlns: th = "http://www.thymeleaf.org"> <head> <meta charset = "utf-8"/> <itement> siaran WebSocket </itement> <script th: src = "@{js/sockjs.min.js}" script> </src = "@{js/sockjs.min}} <script>" TH: src = "@{js/stomp.js}"> </script> <skrip th: src = "@{js/jQuery-3.1.1.js}"> </script> </head> <body onload = "Disconnect ()"> <Noscript> <h2 tidak gaya = "color: #e80b0; WebSocket </h2> </noScript> <div> <div> <button id = "connect" onClick = "connect ();"> connect </atton> <tombol id = "Disconnect" Disabled = "Disabled" OnClick = "Disconnect ();"> Disconnect </Tombol </Div> <Div> <Div ID = "ConversgonDiv (); id = "name"/> <tombol id = "sendName" onclick = "sendName ();"> kirim </button> <p id = "response"> </p> </div> </div> <script type = "text/javascript"> var stompclient = null; fungsi setConnected (terhubung) {document.geteLementById ("connect"). disabled = terhubung; document.getElementById ("Disconnect"). Disabled =! Connected; document.geteLementById ("ConversationDiv"). style.visibility = terhubung? 'visible': 'hidden'; // $ ("#connect"). Disabled = connected; // $ ("#Disconnect"). Disabled =! Connected; $ ("#respons"). html (); } function connect () {var socket = sockjs baru ('/endpointsang'); stompclient = stomp.over (soket); stompclient.connect ({}, function (frame) {setConnected (true); console.log ('connected:' + frame); stompclient.subscribe ('/topic/getResponse', function (response) {showResponse (json.parse (response.body) .responsage); } function disconnect () {if (stompclient! = null) {stompclient.disconnect (); } setConnected (false); console.log ('terputus'); } function sendName () {var name = $ ('#name'). val (); console.log ('name:' + name); stompclient.send ("/welcome", {}, json.stringify ({'name': name})); } function showResponse (pesan) {$ ("#response"). html (pesan); } </script> </body> </html>Meskipun ada sedikit lebih banyak kode di sini, sangat mudah untuk menganalisisnya dengan cermat. Pertama -tama, saya tidak akan berbicara tentang bagian yang diperkenalkan oleh file JS. Jika Anda tidak memahaminya di sini, Anda dapat merujuk menggunakan Spring Boot untuk mengembangkan proyek web. Lalu ada dua tombol di halaman kami, satu adalah koneksi dan yang lainnya adalah pemutusan. Dua tombol sesuai dengan acara klik yang berbeda. Ada kotak input di bawah dua tombol ini, yang merupakan konten yang ingin kami kirim, dan kemudian ada tombol Kirim. Tombol Kirim sesuai dengan acara klik untuk mengirim pesan. Ini adalah elemen dari seluruh halaman, sangat sederhana. Mari kita fokus pada kode logika JS di sini.
Metode Connect dijalankan ketika saya mengklik tombol Koneksi. var socket = sockjs baru ('/endpointsang'); berarti bahwa nama titik akhir dari sockjs yang terhubung adalah /endpointsang, stompclient = stomp.over (soket); berarti menggunakan STOMP untuk membuat klien WebSocket. Kemudian hubungi metode Connect di StompClient untuk terhubung ke server. Setelah koneksi berhasil, panggil metode SetConnected, yang menyembunyikan tersembunyi dan menampilkan yang ditampilkan. Kemudian, dengan memanggil metode berlangganan di StompClient untuk berlangganan pesan yang dikirim oleh /topik /getResponse, yaitu parameter anotasi @sendto yang kami tambahkan ke metode Say dalam pengontrol. Metode Kirim dalam StompClient berarti mengirim pesan ke server, dan sisanya semuanya adalah penggunaan JS biasa. Saya tidak akan mengulanginya.
Konfigurasikan ViewController
Berikutnya adalah menyediakan peta jalur untuk ws.html:
@ConfigurationPublic kelas webmvcconfig memperluas webmvcconfigurerAdapter {@Override public void addViewControllers (viewControllerRegistry registry) {registry.addviewController ("/ws"). SetViewName ("/ws"); }}Oke, setelah melakukan semua ini, kami dapat menjalankan proyek. Saya membuka beberapa browser secara bersamaan dan mengirim pesan di salah satu dari mereka. Mari kita lihat hasilnya:
Saya mengirim pesan di browser atas dan kedua browser lainnya menerima pesan dari saya.
OK, yang di atas adalah seluruh proses menggunakan WebSocket untuk mengimplementasikan Push Push di bawah Kerangka Boot Spring.
Unduh Alamat Kasus Ini: Demo
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.