streamalism.org

1. Prehľad

V tomto článku vytvoríme jednoduchú webovú aplikáciu, ktorá implementuje zasielanie správ pomocou nové možnosti WebSocket predstavený s jarným rámcom 4.0.

WebSockets je a obojsmerný, full-duplex, trvalé spojenie medzi webovým prehliadačom a serverom. Po vytvorení pripojenia WebSocket zostane pripojenie otvorené, kým sa klient alebo server nerozhodne toto pripojenie ukončiť.

Typickým prípadom použitia môže byť, keď aplikácia zahŕňa viacerých používateľov, ktorí medzi sebou komunikujú, napríklad v rozhovore. V našom príklade zostavíme jednoduchého chatovacieho klienta.

2. Maven závislosti

Pretože sa jedná o projekt založený na Maven, pridáme najskôr požadované závislosti do pom.xml:

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

Okrem toho, ako budeme používať JSON na zostavenie tela našich správ je potrebné pridať Jackson závislosti. To umožňuje spoločnosti Spring previesť náš objekt Java na / z JSON:

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

Ak chcete získať najnovšiu verziu knižníc vyššie, vyhľadajte ich v Maven Central.

3. Na jar povoľte WebSocket

Prvá vec, ktorú musíte urobiť, je povoliť funkcie WebSocket. Aby sme to dosiahli, musíme do našej aplikácie pridať konfiguráciu a túto triedu anotovať @EnableWebSocketMessageBroker.

Ako jeho názov napovedá, umožňuje spracovanie správ WebSocket podporované sprostredkovateľom správ:

@Configuration @EnableWebSocketMessageBroker verejná trieda WebSocketConfig rozširuje AbstractWebSocketMessageBrokerConfigurer {@Override public void configureMessageBroker (MessageBrokerRegistry config) {config.enableSimpleBroker ("/ topic"); config.setApplicationDestinationPrefixes ("/ app"); } @Override public void registerStompEndpoints (register StompEndpointRegistry) {registry.addEndpoint ("/ chat"); registry.addEndpoint ("/ chat"). withSockJS (); }} 

Tu vidíme, že metóda configureMessageBroker je zvyknutý nakonfigurovať sprostredkovateľa správ. Najprv povolíme sprostredkovateľovi správ v pamäti, aby prenášal správy späť ku klientovi na cieľových miestach s predponou „/ topic“.

Dokončujeme našu jednoduchú konfiguráciu označením predpony „/ app“ na filtrovanie cieľov zacielených na anotované metódy aplikácie (cez @MessageMapping).

The registerStompEndpoints metóda zaregistruje koncový bod „/ chat“ a umožní Podpora programu Spring’s STOMP. Majte na pamäti, že sem pridávame aj koncový bod, ktorý funguje bez SockJS kvôli pružnosti.

Tento koncový bod, ak má predponu „/ app“, je koncovým bodom, ktorý ChatController.send () metóda je mapovaná na spracovanie.

To tiež umožňuje záložné možnosti SockJS, aby bolo možné použiť alternatívne možnosti zasielania správ, ak WebSockets nie sú k dispozícii. Je to užitočné, pretože WebSocket zatiaľ nie je podporovaný vo všetkých prehľadávačoch a môže byť vylúčený reštriktívnymi sieťovými proxy.

Záložné riešenia umožňujú aplikáciám používať rozhranie WebSocket API, ale v prípade potreby sa za behu ladne môžu zmeniť na alternatívy iné ako WebSocket.

4. Vytvorte model správy

Teraz, keď sme nastavili projekt a nakonfigurovali možnosti WebSocket, musíme vytvoriť správu na odoslanie.

Koncový bod bude prijímať správy obsahujúce meno odosielateľa a text v správe STOMP, ktorej telo je a JSON objekt.

Správa môže vyzerať takto:

{"from": "John", "text": "Dobrý deň!" } 

Na vymodelovanie správy, ktorá nesie text, môžeme vytvoriť jednoduchýObjekt Java s od a text vlastnosti:

public class Správa {private String from; súkromný textový reťazec; // zakladatelia a zakladatelia} 

V predvolenom nastavení bude Spring používať Jackson knižnica na konverziu nášho modelového objektu na az JSON.

5. Vytvorte radič spracovania správ

Ako sme videli, prístup spoločnosti Spring k práci so správami STOMP spočíva v priradení metódy radiča ku nakonfigurovanému koncovému bodu. Toto je možné prostredníctvom @MessageMapping anotácia.

Asociácia medzi koncovým bodom a kontrolórom nám umožňuje v prípade potreby správu spracovať:

@MessageMapping ("/ chat") @SendTo ("/ topic / messages") public OutputMessage send (správa správy) vyvolá výnimku {String time = new SimpleDateFormat ("HH: mm"). Format (new Date ()); vrátiť nové OutputMessage (message.getFrom (), message.getText (), čas); } 

Pre účely nášho príkladu vytvoríme ďalší modelový objekt s názvom Výstupná správa reprezentovať výstupnú správu odoslanú do nakonfigurovaného cieľa. Naplníme náš objekt odosielateľom a textom správy prevzatým z prichádzajúcej správy a obohatíme ho o časovú pečiatku.

Po spracovaní našej správy ju pošleme na príslušné miesto definované pomocou @Poslať anotácia. Všetci predplatitelia/ topic / messages”Cieľová správa dostane správu.

6. Vytvorte klienta prehľadávača

Po vykonaní našich konfigurácií na strane servera použijeme knižnica sockjs-client vytvoriť jednoduchú stránku HTML, ktorá interaguje s našim systémom zasielania správ.

Najskôr musíme importovať sockjs a šliapať Knižnice klienta Javascript. Ďalej môžeme vytvoriť a pripojiť () funkcia na otvorenie komunikácie s našim koncovým bodom, a poslať správu() funkcia na odoslanie našej správy STOMP a a odpojiť () funkcia na ukončenie komunikácie:

  Chat WebSocket var stompClient = null; function setConnected (connected) {document.getElementById ('connect'). disabled = connected; document.getElementById ('odpojiť'). disabled =! pripojený; document.getElementById ('conversDiv'). style.visibility = pripojený? 'Viditeľné': 'Skryté'; document.getElementById ('response'). innerHTML = ''; } funkcia connect () {var socket = new SockJS ('/ chat'); stompClient = Stomp.over (zásuvka); stompClient.connect ({}, function (frame) {setConnected (true); console.log ('Connected:' + frame); stompClient.subscribe ('/ topic / messages', function (messageOutput) {showMessageOutput (JSON.parse (messageOutput.body));});}); } funkcia odpojit () {if (stompClient! = null) {stompClient.disconnect (); } setConnected (false); console.log ("Odpojené"); } funkcia sendMessage () {var from = document.getElementById ('from'). value; var text = document.getElementById ('text'). hodnota; stompClient.send ("/ app / chat", {}, JSON.stringify ({'from': from, 'text': text})); } funkcia showMessageOutput (messageOutput) {var response = document.getElementById ('response'); var p = document.createElement ('p'); p.style.wordWrap = 'zlomové slovo'; p.appendChild (document.createTextNode (messageOutput.from + ":" + messageOutput.text + "(" + messageOutput.time + ")")); response.appendChild (p); }
Pripojiť Odpojiť
Pošli 

7. Testovanie príkladu

Na vyskúšanie nášho príkladu môžeme otvoriť niekoľko okien prehliadača a prejsť na stránku rozhovoru na adrese:

// localhost: 8080

Po dokončení sa môžeme zapojiť do chatu zadaním prezývky a kliknutím na tlačidlo pripojenia. Ak napíšeme a pošleme správu, môžeme ju vidieť vo všetkých reláciách prehliadača, ktoré sa pripojili k chatu.

Pozrite sa na snímku obrazovky a uvidíte príklad:

8. Záver

V tomto tutoriáli sme preskúmali jarnú podporu WebSocket. Videli sme jeho konfiguráciu na strane servera a vytvorili sme jednoduchý náprotivok na strane klienta s použitím sockjs a šliapať Knižnice Javascript.

Vzorový kód nájdete v projekte GitHub.