streamalism.org

1. Áttekintés

Ebben a cikkben létrehozunk egy egyszerű webalkalmazást, amely az üzenetkezelést a új WebSocket képességek a Spring Framework 4.0-val.

A WebSockets egy kétirányú, full-duplex, tartós kapcsolat egy webböngésző és egy szerver között. A WebSocket kapcsolat létrejötte után a kapcsolat nyitva marad, amíg az ügyfél vagy a kiszolgáló úgy dönt, hogy bezárja ezt a kapcsolatot.

Tipikus felhasználási eset lehet, amikor egy alkalmazás során több felhasználó kommunikál egymással, például egy csevegés során. A példánkban létrehozunk egy egyszerű chat klienst.

2. Maven-függőségek

Mivel ez egy Maven-alapú projekt, először hozzáadjuk a szükséges függőségeket a pom.xml:

 org.springframework spring-websocket 5.2.2.RELEASE org.springframework tavaszi üzenetküldés 5.2.2.RELEASE 

Ezen felül, ahogy használni fogjuk JSON üzeneteink testének felépítéséhez hozzá kell adnunk a Jackson függőségek. Ez lehetővé teszi Spring számára, hogy Java objektumunkat konvertálja / vissza JSON:

 com.fasterxml.jackson.core jackson-core 2.10.2 com.fasterxml.jackson.core jackson-databaseind ​​2.10.2 

Ha meg szeretné szerezni a fenti könyvtárak legújabb verzióját, keresse meg őket a Maven Centralon.

3. Tavasszal engedélyezze a WebSocket alkalmazást

Az első tennivaló a WebSocket képességeinek engedélyezése. Ehhez hozzá kell adnunk egy konfigurációt az alkalmazásunkhoz, és ezzel fel kell jegyeznünk ezt az osztályt @EnableWebSocketMessageBroker.

Ahogy a neve is sugallja, lehetővé teszi a WebSocket üzenetek kezelését egy üzenetközvetítő támogatásával:

@Configuration @EnableWebSocketMessageBroker nyilvános osztály A WebSocketConfig kiterjeszti az AbstractWebSocketMessageBrokerConfigurer {@Orride public void configureMessageBroker (MessageBrokerRegistry config) {config.enableSimpleBroker ("/ topic"); config.setApplicationDestinationPrefixes ("/ app"); } @Orride public void registerStompEndpoints (StompEndpointRegistry registry) {register.addEndpoint ("/ chat"); register.addEndpoint ("/ chat"). withSockJS () használatával; }} 

Itt láthatjuk, hogy a módszer configureMessageBroker régebben konfigurálja az üzenetközvetítőt. Először lehetővé tesszük egy memóriában lévő üzenetközvetítő számára, hogy a „/ topic” előtagú célállomásokon visszavigye az üzeneteket az ügyfélhez.

Töltse ki egyszerű konfigurációnkat az „/ app” előtag kijelölésével az alkalmazás annotált metódusait célzó célok szűrésére (via @MessageMapping).

A registerStompEndpoints metódus regisztrálja a „/ chat” végpontot, engedélyezve A tavaszi STOMP támogatás. Ne feledje, hogy itt egy olyan végpontot is hozzáadunk, amely a rugalmasság érdekében a SockJS nélkül működik.

Ez a „/ app” előtaggal ellátott végpont az a végpont, amelyet a ChatController.send () módszer leképezésre kerül.

Az is lehetővé teszi a SockJS tartalék opciókat, így alternatív üzenetküldési lehetőségek is használhatók, ha a WebSockets nem érhető el. Ez hasznos, mivel a WebSocket még nem minden böngészőben támogatott, és korlátozó hálózati proxyk kizárhatják.

A tartalékok lehetővé teszik az alkalmazások számára a WebSocket API használatát, de szükség esetén futás közben kecsesen degradálódnak nem WebSocket alternatívákká.

4. Hozza létre az üzenetmodellt

Most, hogy beállítottuk a projektet és konfiguráltuk a WebSocket képességeit, létre kell hoznunk egy üzenetet küldeni.

A végpont elfogadja azokat az üzeneteket, amelyek tartalmazzák a feladó nevét és a STOMP üzenet szövegét, amelynek törzse a JSON tárgy.

Az üzenet így nézhet ki:

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

A szöveget hordozó üzenet modellezéséhez létrehozhatunk egy egyszerűtJava objektum tól től és szöveg tulajdonságok:

public class Üzenet {private String from; privát karakterlánc szöveg; // szerelők és beállítók} 

Alapértelmezés szerint a Spring a Jackson könyvtárat, hogy modellobjektumunkat JSON-ba konvertáljuk.

5. Hozzon létre egy üzenetkezelő vezérlőt

Amint láttuk, Spring megközelítése a STOMP üzenetküldéssel kapcsolatban az, hogy egy vezérlő metódust társít a konfigurált végponthoz. Ez a @MessageMapping annotáció.

A végpont és a vezérlő közötti kapcsolat lehetővé teszi számunkra az üzenet szükség szerinti kezelését:

@MessageMapping ("/ chat") @SendTo ("/ topic / messages") public OutputMessage send (Message message) dobja a Kivételt {String time = new SimpleDateFormat ("HH: mm"). Format (new Date ()); return new OutputMessage (message.getFrom (), message.getText (), idő); } 

F vagy a példánk célja, létrehozunk egy másik modellobjektumot OutputMessage hogy a kimeneti üzenetet a konfigurált rendeltetési helyre küldje. Töltsük fel az objektumunkat a feladóval és a bejövő üzenetből vett üzenet szövegével, és időbélyeggel gazdagítjuk.

Az üzenetünk kezelése után elküldjük a @Címzett annotáció. Minden feliratkozó a/ topic / üzenetek”Célállomás megkapja az üzenetet.

6. Hozzon létre egy böngésző klienst

Miután elvégeztük a konfigurációinkat a szerver oldalon, használjuk a sockjs-kliens könyvtár egy egyszerű HTML-oldal készítéséhez, amely kölcsönhatásba lép az üzenetkezelő rendszerünkkel.

Először is importálnunk kell a sockjs és taposás Javascript kliens könyvtárak. Ezután létrehozhatunk egy connect () funkció a kommunikáció megnyitásához a végpontunkkal, a üzenet küldése() funkció a STOMP üzenet elküldéséhez és a bontás () funkció a kommunikáció bezárásához:

  Chat WebSocket var stompClient = null; function setConnected (csatlakoztatva) {document.getElementById ('connect'). tiltva = csatlakoztatva; document.getElementById ('disconnect'). disabled =! csatlakoztatva; document.getElementById ('beszélgetésDiv'). style.visibility = csatlakoztatva? 'látható': 'rejtett'; document.getElementById ('válasz'). belsőHTML = ''; } function connect () {var socket = new SockJS ('/ chat'); stompClient = Stomp.over (socket); stompClient.connect ({}, function (frame) {setConnected (true); console.log ('Connected:' + frame); stompClient.subscribe ('/ topic / messages', function (messageOutput) {showMessageOutput (JSON.parse) (messageOutput.body));});}); } function disconnect () {if (stompClient! = null) {stompClient.disconnect (); } setConnected (hamis); console.log ("Leválasztva"); } function sendMessage () {var from = document.getElementById ('from'). érték; var text = document.getElementById ('text'). érték; stompClient.send ("/ app / chat", {}, JSON.stringify ({'from': from, 'text': text})); } function showMessageOutput (messageOutput) {var válasz = dokumentum.getElementById ('válasz'); var p = document.createElement ('p'); p.style.wordWrap = 'törésszó'; p.appendChild (document.createTextNode (messageOutput.from + ":" + messageOutput.text + "(" + messageOutput.time + ")")); response.appendChild (p); }
Csatlakozás Bontás
Küld 

7. A példa tesztelése

Példánk teszteléséhez megnyithatunk pár böngészőablakot, és elérhetjük a csevegési oldalt a következő címen:

// localhost: 8080

Ha ez megtörtént, csatlakozhatunk a csevegéshez becenév megadásával és a Csatlakozás gomb megnyomásával. Ha üzenetet írunk és küldünk, láthatjuk azt az összes böngésző munkamenetben, amely csatlakozott a csevegéshez.

Vessen egy pillantást a képernyőképre, hogy láthasson egy példát:

8. Következtetés

Ebben az oktatóanyagban felfedeztük a Spring WebSocket támogatását. Láttuk a szerveroldali konfigurációt, és egy egyszerű kliensoldali társat építettünk a használatával sockjs és taposás Javascript könyvtárak.

A példakód a GitHub projektben található.