Uvod u WebSockets s Springom

1. Pregled

U ovom ćemo članku stvoriti jednostavnu web aplikaciju koja implementira razmjenu poruka putem nove mogućnosti WebSocket-a predstavljen s Spring Framework 4.0.

WebSockets je dvosmjerno, full-duplex, postojana veza između web preglednika i poslužitelja. Jednom kada se uspostavi veza WebSocket, veza ostaje otvorena sve dok klijent ili poslužitelj ne odluče zatvoriti tu vezu.

Tipičan slučaj upotrebe može biti kada aplikacija uključuje više korisnika koji međusobno komuniciraju, na primjer u chatu. U našem ćemo primjeru izgraditi jednostavan klijent za chat.

2. Ovisnosti Mavena

Budući da je ovo projekt temeljen na Mavenu, prvo dodajemo potrebne ovisnosti na pom.xml:

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

Uz to, kao što ćemo koristiti JSON da bismo izgradili tijelo svojih poruka, moramo dodati Jackson ovisnosti. To omogućuje Springu da naš Java objekt pretvori u / iz JSON:

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

Ako želite nabaviti najnoviju verziju gore navedenih knjižnica, potražite ih na Maven Central.

3. Omogućite WebSocket na proljeće

Prvo što treba učiniti je omogućiti WebSocket mogućnosti. Da bismo to učinili, našoj aplikaciji moramo dodati konfiguraciju i označiti ovu klasu s @EnableWebSocketMessageBroker.

Kao što mu samo ime govori, omogućuje rukovanje porukama WebSocket, potpomognuto posrednikom poruka:

@Configuration @EnableWebSocketMessageBroker javne klase WebSocketConfig proširuje AbstractWebSocketMessageBrokerConfigurer {@Override public void configureMessageBroker (MessageBrokerRegistry config) {config.enableSimpleBroker ("/ topic"); config.setApplicationDestinationPrefixes ("/ app"); } @Override public void registerStompEndpoints (Registry StompEndpointRegistry) {registry.addEndpoint ("/ chat"); registry.addEndpoint ("/ chat"). withSockJS (); }} 

Ovdje možemo vidjeti da je metoda configureMessageBroker je navikao na konfigurirajte posrednika poruka. Prvo, omogućujemo posredniku poruka u memoriji da prenese poruke natrag klijentu na odredištima s prefiksom „/ topic“.

Dovršavamo našu jednostavnu konfiguraciju određivanjem prefiksa “/ app” za filtriranje odredišta ciljajući metode s oznakom aplikacije (putem @MessageMapping).

The registerStompEndpoints metoda registrira krajnju točku “/ chat”, omogućavajući Proljetna podrška za STOMP. Imajte na umu da ovdje dodajemo i krajnju točku koja radi bez SockJS-a radi elastičnosti.

Ova krajnja točka, koja ima prefiks "/ app", krajnja je točka koju ChatController.send () metoda preslikava se na rukovanje.

Također omogućuje rezervne opcije SockJS, tako da se mogu koristiti alternativne mogućnosti razmjene poruka ako WebSockets nisu dostupni. To je korisno jer WebSocket još nije podržan u svim preglednicima i mogu ga onemogućiti restriktivni mrežni proxyji.

Rezervne promjene omogućuju aplikacijama da koriste WebSocket API, ali graciozno se prebacuju na alternative koje nisu WebSocket kada je to potrebno tijekom izvođenja.

4. Stvorite model poruke

Sad kad smo postavili projekt i konfigurirali mogućnosti WebSocket, moramo stvoriti poruku za slanje.

Krajnja točka prihvatit će poruke koje sadrže ime pošiljatelja i tekst u STOMP poruci čije je tijelo JSON objekt.

Poruka bi mogla izgledati ovako:

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

Da bismo modelirali poruku koja nosi tekst, možemo stvoriti jednostavanJava objekt s iz i tekst Svojstva:

javna klasa Message {private String from; privatni tekst niza; // geteri i postavljači} 

Prema zadanim postavkama Spring će koristiti Jackson knjižnica za pretvaranje našeg modela objekta u i iz JSON-a.

5. Stvorite kontroler za rukovanje porukama

Kao što smo vidjeli, Springov pristup radu sa STOMP porukama je povezivanje metode kontrolera s konfiguriranom krajnjom točkom. To je omogućeno putem @MessageMapping bilješka.

Povezanost između krajnje točke i kontrolera daje nam mogućnost obrade poruke ako je potrebno:

@MessageMapping ("/ chat") @SendTo ("/ topic / messages") public OutputMessage send (Message message) baca iznimku {String time = new SimpleDateFormat ("HH: mm"). Format (novi datum ()); vrati novu OutputMessage (message.getFrom (), message.getText (), vrijeme); } 

F ili svrhe našeg primjera, stvorit ćemo drugi objekt s imenom OutputMessage predstavljati izlaznu poruku poslanu na konfigurirano odredište. Svoj objekt popunjavamo pošiljateljem i tekstom poruke preuzetim iz dolazne poruke te ga obogaćujemo vremenskom oznakom.

Nakon obrade naše poruke, šaljemo je na odgovarajuće odredište definirano s @SendTo bilješka. Svi pretplatnici na/ tema / poruke”Odredište će primiti poruku.

6. Stvorite klijenta preglednika

Nakon izrade naših konfiguracija na strani poslužitelja, koristit ćemo knjižnica sockjs-klijenta za izgradnju jednostavne HTML stranice koja komunicira s našim sustavom za razmjenu poruka.

Prije svega, moramo uvesti čarape i tapkati Javascript klijentske knjižnice. Dalje, možemo stvoriti Spojiti() funkcija za otvaranje komunikacije s našom krajnjom točkom, a Pošalji poruku() funkcija za slanje naše STOMP poruke i a odspojiti () funkcija za zatvaranje komunikacije:

  Chat WebSocket var stompClient = null; funkcija setConnected (povezano) {document.getElementById ('povezivanje'). onemogućeno = povezano; document.getElementById ('odspajanje'). onemogućeno =! povezano; document.getElementById ('razgovorDiv'). style.visibility = povezan? 'vidljivo': 'skriveno'; document.getElementById ('odgovor'). innerHTML = ''; } funkcija connect () {var socket = new SockJS ('/ chat'); stompClient = Stomp.over (socket); stompClient.connect ({}, funkcija (okvir) {setConnected (true); console.log ('Connected:' + frame); stompClient.subscribe ('/ topic / messages', function (messageOutput) {showMessageOutput (JSON.parse (messageOutput.body));});}); } funkcija disconnect () {if (stompClient! = null) {stompClient.disconnect (); } setConnected (netačno); console.log ("Prekinuta veza"); } funkcija sendMessage () {var od = document.getElementById ('od'). value; var text = document.getElementById ('tekst'). value; stompClient.send ("/ app / chat", {}, JSON.stringify ({'from': from, 'text': text})); } funkcija showMessageOutput (messageOutput) {var response = document.getElementById ('odgovor'); var p = document.createElement ('p'); p.style.wordWrap = 'prijelomna riječ'; p.appendChild (document.createTextNode (messageOutput.from + ":" + messageOutput.text + "(" + messageOutput.time + ")")); response.appendChild (p); }

Spoji Odspoji

Poslati

7. Testiranje primjera

Da bismo testirali naš primjer, možemo otvoriti nekoliko prozora preglednika i pristupiti stranici za chat na:

// localhost: 8080

Nakon što se to učini, chatu se možemo pridružiti unošenjem nadimka i pritiskom na gumb za povezivanje. Ako sastavimo i pošaljemo poruku, možemo je vidjeti u svim sesijama preglednika koje su se pridružile chatu.

Pogledajte snimak zaslona da biste vidjeli primjer:

8. Zaključak

U ovom smo uputstvu istražili Springovu podršku za WebSocket. Vidjeli smo njegovu konfiguraciju na strani poslužitelja i stvorili smo jednostavnu primjeru na strani klijenta pomoću čarape i tapkati Javascript knjižnice.

Primjer koda može se naći u projektu GitHub.