Red Hat Training

A Red Hat training course is available for Red Hat JBoss Enterprise Application Platform

16.2. Créer une application WebSocket

Une application WebSocket nécessite les composants et les changements de configuration suivants :
  • Un client Java ou un client WebSocket : http://caniuse.com/websockets
  • Une classe de point de terminaison de serveur WebSocket.
  • Un fichier jboss-web.xml configuré pour activer WebSockets.
  • Dépendances de projet configurées pour déclarer une dépendance sur l'API WebSocket.
  • Activer le connecteur NIO2 dans le sous-système web du fichier de configuration du serveur Red Hat JBoss Enterprise Application Platform.

Note

Les applications WebSocket requièrent un environnement Java Runtime de version 7 ou supérieure. Sinon, WebSocket ne sera pas activé.

Procédure 16.1. Créer l'application WebSocket

Voici un exemple simple d'application WebSocket. Vous trouverez des boutons pour ouvrir une connexion, envoyer un message, et fermer une connexion. Cet exemple n'implémente pas d'autres fonctions, ni n'inclut de gestion d'erreurs dont on aurait besoin dans une application réelle.

  1. Créer un client HTML JavaScript.

    Voici un exemple de client WebSocket. Il contient les fonctions JavaScript suivantes :
    • connect() : cette fonction crée la connexion webSocket qui donne l'URI de WebSocket. L'emplacement de la ressource correspond à la ressource définie dans la classe de point de terminaison du serveur. Cette fonction intercepte et gère les WebSockets onopen, onmessage, onerror, et onclose.
    • sendMessage() : cette fonction a le même nom que celui qui se trouve sur le formulaire, crée un message, et l'envoie par la commande WebSocket.send().
    • disconnect() : cette fonction génère la commande WebSocket.close().
    • displayMessage() : cette fonction détermine le message affiché sur la page à la valeur donnée par la méthode de point de terminaison de WebSocket.
    • displayStatus() : cette fonction affiche le statut de la connexion de WebSocket.
    l 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>WebSocket: Say Hello</title>
        <link rel="stylesheet" type="text/css" href="resources/css/hello.css" />
        <script type="text/javascript">
            var websocket = null;

            function connect() {
                var wsURI = 'ws://' + window.location.host + '/jboss-websocket-hello/websocket/helloName';
                websocket = new WebSocket(wsURI);

                websocket.onopen = function() {
                    displayStatus('Open');
                    document.getElementById('sayHello').disabled = false;
                    displayMessage('Connection is now open. Type a name and click Say Hello to send a message.');
                };
                websocket.onmessage = function(event) {
                    // log the event                
                    displayMessage('The response was received! ' + event.data, 'success');
                };
                websocket.onerror = function(event) {
                    // log the event
                    displayMessage('Error! ' + event.data, 'error');
                };
                websocket.onclose = function() {
                    displayStatus('Closed');
                    displayMessage('The connection was closed or timed out. Please click the Open Connection button to reconnect.');
                    document.getElementById('sayHello').disabled = true;
                };
            }

            function disconnect() {
                if (websocket !== null) {
                    websocket.close();
                    websocket = null;
                }
                message.setAttribute("class", "message");
                message.value = 'WebSocket closed.';
                // log the event
            }

            function sendMessage() {
                if (websocket !== null) {
                    var content = document.getElementById('name').value;
                    websocket.send(content);
                } else {
                    displayMessage('WebSocket connection is not established. Please click the Open Connection button.', 'error');
                }
            }

            function displayMessage(data, style) {
                var message = document.getElementById('hellomessage');
                message.setAttribute("class", style);
                message.value = data;
            }

            function displayStatus(status) {
                var currentStatus = document.getElementById('currentstatus');
                currentStatus.value = status;
            }

        </script>
    </head>
    <body>

        <div>
            <h1>Welcome to JBoss!</h1>
            <div>This is a simple example of a WebSocket implementation.</div>
            <div id="connect-container">
                <div>
                    <fieldset>
                        <legend>Connect or disconnect using WebSocket :</legend>
                        <input type="button" id="connect" onclick="connect();" value="Open Connection" />
                        <input type="button" id="disconnect" onclick="disconnect();" value="Close Connection" />
                    </fieldset>
                </div>
                <div>
                    <fieldset>
                        <legend>Type your name below. then click the `Say Hello` button :</legend>
                        <input id="name" type="text" size="40" style="width: 40%"/>
                        <input type="button" id="sayHello" onclick="sendMessage();" value="Say Hello" disabled="disabled"/>
                    </fieldset>
                </div>
                <div>Current WebSocket Connection Status: <output id="currentstatus" class="message">Closed</output></div>
                <div>
                    <output id="hellomessage" />
                </div>
            </div>
        </div>
    </body>
</html>

  2. Créer le point de terminaison du serveur de WebSocket.

    Vous pouvez créer un point de terminaison de serveur WebSocket par l'une des méthodes suivantes.
    • Programmatic Endpoint : le point de terminaison prolonge la classe de point de terminaison.
    • Annotated Endpoint : la classe de point de terminaison utilise des annotations pour interagir avec les événements WebSocket. Plus facile à codifier qu'un point de terminaison programmatique.
    L'exemple de code ci-dessous utilise une approche de point de terminaison annoté et gère les événements suivants.
    • L'annotation @ServerEndpoint identifie cette classe comme point de terminaison de serveur WebSocket et indique le chemin d'accès.
    • L'annotation @OnOpen s'active quand la connexion de WebSocket est ouverte.
    • L'annotation @OnMessage s'active quand un message est envoyé vers une connexion de WebSocket.
    • L'annotation @OnClose s'active quand la connexion de WebSocket est fermée. 
    package org.jboss.as.quickstarts.websocket_hello;

import javax.websocket.CloseReason;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/websocket/helloName")
public class HelloName {

    @OnMessage
    public String sayHello(String name) {
        System.out.println("Say hello to '" + name + "'");
        return ("Hello" + name);    
    }

    @OnOpen
    public void helloOnOpen(Session session) {
        System.out.println("WebSocket opened: " + session.getId());
    }
    
    @OnClose
    public void helloOnClose(CloseReason reason) {
        System.out.println("Closing a WebSocket due to " + reason.getReasonPhrase());
    }
}

  3. Configurer le fichier jboss-web.xml.

    Vous devez créer l'élément <enable-websockets> dans l'application WEB-INF/jboss-web.xml et la définir à true. 
    <?xml version="1.0" encoding="UTF-8"?>
<!--Enable WebSockets -->
<jboss-web>
   <enable-websockets>true</enable-websockets>
</jboss-web>

  4. Déclarer la dépendance de l'API de Websocket dans votre fichier POM de projet.

    Si vous utilisez Maven, vous devrez ajouter la dépendance suivante au fichier pom.xml du projet. 
    <dependency>
  <groupId>org.jboss.spec.javax.websocket</groupId>
  <artifactId>jboss-websocket-api_1.0_spec</artifactId>
  <version>1.0.0.Final</version>
  <scope>provided</scope>
</dependency>

  5. Configurer le serveur JBoss EAP.

    Configurer le <connector> http dans le sous-système web du fichier de configuration du serveur pour qu'il puisse utliser le protocole NIO2.
    1. Démarrer le serveur JBoss EAP.
    2. Lancer l'interface CLI par la commande pour votre système d'exploitation.
      Dans Linux : 
      EAP_HOME/bin/jboss-cli.sh --connect
      Dans Windows : 
      EAP_HOME\bin\jboss-cli.bat --connect
    3. Pour activer le protocole connecteur NIO2 Java non-bloquant dans le sous-système web du fichier de configuration du serveur JBoss EAP, saisissez la commande suivante. 
      /subsystem=web/connector=http/:write-attribute(name=protocol,value=org.apache.coyote.http11.Http11NioProtocol)
      Quelle que soit la commande dont il s'agit, vous devrez voir le résultat suivant apparaître : 
      {
    "outcome" => "success",
    "response-headers" => {
        "operation-requires-reload" => true,
        "process-state" => "reload-required"
    }
}
    4. Indiquer au serveur de charger la configuration à nouveau. 
      :reload
      Vous devriez voir apparaître le résultat suivant : 
      {
    "outcome" => "success",
    "result" => undefined
}
    5. Réviser les changements apportés au fichier de configuration du serveur JBoss EAP. Le sous-système web doit maintenant contenir l'XML suivant pour le <connector> http. 
      <subsystem xmlns="urn:jboss:domain:web:2.1" default-virtual-server="default-host" native="false">
    <connector name="http" protocol="org.apache.coyote.http11.Http11NioProtocol" scheme="http" socket-binding="http"/>
    <virtual-server name="default-host" enable-welcome-root="true">
    <alias name="localhost"/>
        <alias name="example.com"/>
    </virtual-server>
</subsystem>
Rapporter un bogue