streamalism.org

1. Oversikt

I denne artikkelen oppretter vi en enkel webapplikasjon som implementerer meldinger ved hjelp av nye WebSocket-funksjoner introdusert med Spring Framework 4.0.

WebSockets er en toveis, full dupleks, vedvarende forbindelse mellom en nettleser og en server. Når en WebSocket-forbindelse er opprettet, forblir forbindelsen åpen til klienten eller serveren bestemmer seg for å lukke denne forbindelsen.

Et typisk brukstilfelle kan være når en app involverer at flere brukere kommuniserer med hverandre, som i en chat. Vi vil bygge en enkel chatklient i eksemplet vårt.

2. Maven-avhengigheter

Siden dette er et Maven-basert prosjekt, legger vi først til de nødvendige avhengighetene til pom.xml:

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

I tillegg, som vi vil bruke JSON for å bygge kroppen av meldingene våre, må vi legge til Jackson avhengigheter. Dette gjør at Spring kan konvertere Java-objektet vårt til / fra JSON:

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

Hvis du vil få den nyeste versjonen av bibliotekene ovenfor, kan du se etter dem på Maven Central.

3. Aktiver WebSocket om våren

Det første du må gjøre er å aktivere WebSocket-funksjonene. For å gjøre dette må vi legge til en konfigurasjon i applikasjonen vår og kommentere denne klassen med @EnableWebSocketMessageBroker.

Som navnet antyder, muliggjør det håndtering av WebSocket-meldinger, støttet av en meldingsmegler:

@Configuration @EnableWebSocketMessageBroker offentlig klasse WebSocketConfig utvider 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 (); }} 

Her kan vi se at metoden configureMessageBroker er vant til konfigurer meldingsmegleren. Først gjør vi det mulig for en megler i minnet å føre meldingene tilbake til klienten på destinasjoner foran “/ topic”.

Vi fullfører vår enkle konfigurasjon ved å utpeke prefikset “/ app” for å filtrere destinasjoner som er målrettet mot programkommenterte metoder (via @MessageMapping).

De registerStompEndpoints metoden registrerer “/ chat” sluttpunktet, aktivering Vårens STOMP-støtte. Husk at vi her også legger til et endepunkt som fungerer uten SockJS for elastisitets skyld.

Dette endepunktet, når det er prefiks med “/ app”, er sluttpunktet som ChatController.send () metoden er kartlagt for å håndtere.

Det også muliggjør SockJS reservealternativer, slik at alternative meldingsalternativer kan brukes hvis WebSockets ikke er tilgjengelige. Dette er nyttig siden WebSocket ikke støttes i alle nettlesere ennå og kan være utelukket av restriktive nettverksproxyer.

Tilbakeslagene lar applikasjonene bruke et WebSocket API, men degraderer elegant til ikke-WebSocket-alternativer når det er nødvendig ved kjøretid.

4. Opprett meldingsmodellen

Nå som vi har satt opp prosjektet og konfigurert WebSocket-funksjonene, må vi lage en melding å sende.

Sluttpunktet aksepterer meldinger som inneholder avsendernavnet og en tekst i en STOMP-melding hvis hovedtekst er en JSON gjenstand.

Meldingen kan se slik ut:

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

For å modellere meldingen som bærer teksten, kan vi lage en enkelJava-objekt med fra og tekst eiendommer:

offentlig klasse Melding {privat String fra; privat strengtekst; // getters og setters} 

Som standard vil Spring bruke Jackson bibliotek for å konvertere modellobjektet til og fra JSON.

5. Opprett en meldingshåndteringskontroller

Som vi har sett, er Springs tilnærming til å jobbe med STOMP-meldinger å knytte en kontrollermetode til det konfigurerte endepunktet. Dette er mulig gjennom @MessageMapping kommentar.

Forbindelsen mellom endepunktet og kontrolleren gir oss muligheten til å håndtere meldingen om nødvendig:

@MessageMapping ("/ chat") @SendTo ("/ topic / messages") offentlig OutputMessage send (Message message) kaster Unntak {String time = new SimpleDateFormat ("HH: mm"). Format (new Date ()); returner nytt OutputMessage (message.getFrom (), message.getText (), tid); } 

F eller formålene med eksemplet vårt, vil vi opprette et annet modellobjekt som heter OutputMessage for å representere utdatameldingen sendt til den konfigurerte destinasjonen. Vi fyller objektet vårt med avsenderen og meldingsteksten hentet fra den innkommende meldingen og beriker den med en tidsstempel.

Etter å ha behandlet meldingen, sender vi den til riktig destinasjon definert med @Send til kommentar. Alle abonnenter på “/ emne / meldinger”Destinasjon vil motta meldingen.

6. Opprett en nettleserklient

Etter å ha gjort våre konfigurasjoner på serversiden, bruker vi sockjs-klientbibliotek å lage en enkel HTML-side som samhandler med meldingssystemet vårt.

Først og fremst må vi importere sockjs og trampe Javascript-klientbiblioteker. Deretter kan vi lage en koble() funksjon for å åpne kommunikasjonen med vårt endepunkt, a sende melding() funksjon for å sende vår STOMP-melding og en koble fra() funksjon for å lukke kommunikasjonen:

  Chat WebSocket var stompClient = null; function setConnected (tilkoblet) {document.getElementById ('connect'). deaktivert = tilkoblet; document.getElementById ('koble fra'). deaktivert =! tilkoblet; document.getElementById ('conversationDiv'). style.visibility = tilkoblet? 'synlig': 'skjult'; document.getElementById ('respons'). innerHTML = ''; } funksjonskoble () {var socket = ny SockJS ('/ chat'); stompClient = Stomp.over (stikkontakt); stompClient.connect ({}, function (frame) {setConnected (true); console.log ('Connected:' + frame); stompClient.subscribe ('/ topic / messages', function (messageOutput) {showMessageOutput (JSON.parse) (messageOutput.body));});}); } funksjonsfrakobling () {if (stompClient! = null) {stompClient.disconnect (); } setConnected (false); console.log ("Frakoblet"); } funksjon sendMessage () {var from = document.getElementById ('fra'). verdi; var text = document.getElementById ('text'). verdi; stompClient.send ("/ app / chat", {}, JSON.stringify ({'fra': fra, 'tekst': tekst})); } funksjon 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); }
Koble fra Koble fra
Sende 

7. Testing av eksemplet

For å teste eksemplet vårt, kan vi åpne et par nettleservinduer og få tilgang til chattesiden på:

// lokal vert: 8080

Når dette er gjort, kan vi bli med i chatten ved å skrive inn et kallenavn og trykke på koble til-knappen. Hvis vi skriver og sender en melding, kan vi se den i alle leserøktene som har blitt med i chatten.

Ta en titt på skjermbildet for å se et eksempel:

8. Konklusjon

I denne veiledningen har vi utforsket Springs WebSocket-støtte. Vi har sett serverkonfigurasjonen og bygget en enkel motstykke på klientsiden med bruk av sockjs og trampe Javascript-biblioteker.

Eksempelkoden finnes i GitHub-prosjektet.