streamalism.org

1. Oversigt

I denne artikel opretter vi en simpel webapplikation, der implementerer beskeder ved hjælp af nye WebSocket-funktioner introduceret med Spring Framework 4.0.

WebSockets er en tovejs, Fuld duplex, vedvarende forbindelse mellem en webbrowser og en server. Når en WebSocket-forbindelse er oprettet, forbliver forbindelsen åben, indtil klienten eller serveren beslutter at lukke denne forbindelse.

En typisk brugssag kan være, når en app involverer flere brugere, der kommunikerer med hinanden, som i en chat. Vi bygger en simpel chatklient i vores eksempel.

2. Maven-afhængigheder

Da dette er et Maven-baseret projekt, tilføjer vi først de krævede afhængigheder til pom.xml:

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

Derudover, som vi vil bruge JSON for at opbygge kroppen af ​​vores meddelelser er vi nødt til at tilføje Jackson afhængigheder. Dette giver Spring mulighed for at konvertere vores Java-objekt til / fra JSON:

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

Hvis du vil hente den nyeste version af bibliotekerne ovenfor, skal du kigge efter dem på Maven Central.

3. Aktivér WebSocket om foråret

Den første ting at gøre er at aktivere WebSocket-funktionerne. For at gøre dette skal vi tilføje en konfiguration til vores applikation og kommentere denne klasse med @EnableWebSocketMessageBroker.

Som navnet antyder, muliggør det håndtering af WebSocket-meddelelser, bakket op af en meddelelsesmægler:

@Configuration @EnableWebSocketMessageBroker offentlig klasse WebSocketConfig udvider AbstractWebSocketMessageBrokerConfigurer {@Override public void configureMessageBroker (MessageBrokerRegistry config) {config.enableSimpleBroker ("/ topic"); config.setApplicationDestinationPrefixes ("/ app"); } @ Override offentligt ugyldigt registerStompEndpoints (StompEndpointRegistry registry) {registry.addEndpoint ("/ chat"); registry.addEndpoint ("/ chat") medSockJS (); }} 

Her kan vi se, at metoden configureMessageBroker er vant til konfigurer meddelelsesmægleren. For det første giver vi en mægler i hukommelsen besked til at føre meddelelserne tilbage til klienten på destinationer, der er præfikset med “/ topic”.

Vi fuldfører vores enkle konfiguration ved at udpege præfikset “/ app” til at filtrere destinationer, der er målrettet mod applikationsnoterede metoder (via @MessageMapping).

Det registerStompEndpoints metode registrerer “/ chat” slutpunktet, hvilket muliggør Forårets STOMP-support. Husk, at vi her også tilføjer et slutpunkt, der fungerer uden SockJS af hensyn til elasticitet.

Dette slutpunkt, når det er prefixet med “/ app”, er det slutpunkt, som ChatController.send () metoden er kortlagt til at håndtere.

Det også muliggør SockJS-reserveindstillinger, således at alternative beskedindstillinger kan bruges, hvis WebSockets ikke er tilgængelige. Dette er nyttigt, da WebSocket endnu ikke understøttes i alle browsere og kan være udelukket af restriktive netværksproxyer.

Tilbagefaldene lader applikationerne bruge en WebSocket API, men nedbrydes elegant til ikke-WebSocket-alternativer, når det er nødvendigt ved kørsel.

4. Opret meddelelsesmodellen

Nu hvor vi har oprettet projektet og konfigureret WebSocket-funktionerne, skal vi oprette en besked, der skal sendes.

Slutpunktet accepterer meddelelser, der indeholder afsendernavnet og en tekst i en STOMP-meddelelse, hvis krop er en JSON objekt.

Beskeden kan se sådan ud:

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

For at modellere den besked, der bærer teksten, kan vi oprette en enkelJava-objekt med fra og tekst ejendomme:

offentlig klassemeddelelse {privat streng fra; privat strengtekst; // getters og setters} 

Som standard vil Spring bruge Jackson bibliotek til at konvertere vores modelobjekt til og fra JSON.

5. Opret en controller til beskedhåndtering

Som vi har set, er Spring's tilgang til at arbejde med STOMP-messaging at knytte en controller-metode til det konfigurerede slutpunkt. Dette er muliggjort gennem @MessageMapping kommentar.

Forbindelsen mellem slutpunktet og controlleren giver os mulighed for at håndtere meddelelsen, hvis det er nødvendigt:

@MessageMapping ("/ chat") @SendTo ("/ topic / messages") offentlig OutputMessage send (beskedbesked) kaster undtagelse {strengetid = ny SimpleDateFormat ("HH: mm"). Format (ny dato ()) returner nyt OutputMessage (message.getFrom (), message.getText (), tid); } 

F eller formålet med vores eksempel opretter vi et andet modelobjekt med navnet OutputMessage til at repræsentere outputmeddelelsen sendt til den konfigurerede destination. Vi udfylder vores objekt med afsenderen og meddelelsesteksten taget fra den indgående besked og beriger det med et tidsstempel.

Efter håndtering af vores besked sender vi den til den relevante destination, der er defineret med @Send til kommentar. Alle abonnenter på “/ emne / beskeder”Destination modtager beskeden.

6. Opret en browser-klient

Efter at have foretaget vores konfigurationer på serversiden bruger vi sockjs-klientbibliotek at oprette en simpel HTML-side, der interagerer med vores messaging-system.

Først og fremmest skal vi importere sockjs og trampe Javascript-klientbiblioteker. Dernæst kan vi oprette en Opret forbindelse() funktion til at åbne kommunikationen med vores slutpunkt, a Send besked() funktion til at sende vores STOMP-besked og en koble fra() funktion til at lukke kommunikationen:

  Chat WebSocket var stompClient = null; funktions sætConnected (forbundet) {document.getElementById ('connect'). deaktiveret = forbundet; document.getElementById ('afbryd'). deaktiveret =! tilsluttet; document.getElementById ('conversationDiv'). style.visibility = forbundet? 'synlig': 'skjult'; document.getElementById ('respons'). innerHTML = ''; } funktionstilslutning () {var socket = ny SockJS ('/ chat'); stompClient = Stomp.over (stikkontakt); stompClient.connect ({}, funktion (frame) {setConnected (true); console.log ('Connected:' + frame); stompClient.subscribe ('/ topic / messages', function (messageOutput) {showMessageOutput (JSON.parse) (messageOutput.body));});}); } afbryd funktion () {if (stompClient! = null) {stompClient.disconnect (); } setConnected (false); console.log ("Afbrudt"); } funktion sendMessage () {var from = document.getElementById ('from'). værdi; var text = document.getElementById ('text'). værdi; stompClient.send ("/ app / chat", {}, JSON.stringify ({'fra': fra, 'tekst': tekst})); } funktion showMessageOutput (messageOutput) {var respons = document.getElementById ('respons'); var p = document.createElement ('p'); p.style.wordWrap = 'break-word'; p.appendChild (document.createTextNode (messageOutput.from + ":" + messageOutput.text + "(" + messageOutput.time + ")")); respons.appendChild (p); }
Tilslut Afbryd
Sende 

7. Test af eksemplet

For at teste vores eksempel kan vi åbne et par browservinduer og få adgang til chat-siden på:

// localhost: 8080

Når dette er gjort, kan vi deltage i chatten ved at indtaste et kaldenavn og trykke på forbindelsesknappen. Hvis vi komponerer og sender en besked, kan vi se den i alle browsersessioner, der har tilmeldt sig chatten.

Se på skærmbilledet for at se et eksempel:

8. Konklusion

I denne vejledning har vi udforsket Spring's WebSocket-support. Vi har set konfigurationen på serversiden og bygget en simpel modstykke på klientsiden med brug af sockjs og trampe Javascript-biblioteker.

Eksempelkoden findes i GitHub-projektet.