Comment Java Websocket implémente-t-il la fonction de planche à dessin en ligne ?-javaDidacticiel-php.cn

Java Websocket如何实现在线画板功能？

Comment Java Websocket implémente-t-il la fonction de planche à dessin en ligne ?

Websocket est un nouveau protocole recommandé par HTML5, qui permet au client et au serveur de s'envoyer des messages et d'établir une communication en temps réel. Ce protocole peut rendre le fonctionnement de notre planche à dessin en ligne plus fiable, plus sécurisé et en temps réel. Dans l'article suivant, nous présenterons comment utiliser Java Websocket pour implémenter la fonction de planche à dessin en ligne et joindrons un exemple de code pour aider tout le monde à comprendre.

Tout d'abord, nous devons utiliser le framework Java Websocket, qui peut nous aider à implémenter le protocole Websocket rapidement et simplement. Voici un exemple de code pour la diffusion de messages à l'aide de Java Websocket :

@ServerEndpoint("/broadcast")
public class Broadcaster {
    static Set<Session> sessions = Collections.synchronizedSet(new HashSet<Session>());

    @OnMessage
    public void onMessage(String message, Session session) throws IOException, EncodeException {
        synchronized (sessions) {
            for (Session s : sessions) {
                if (!s.equals(session)) {
                    s.getBasicRemote().sendText(message);
                }
            }
        }
    }

    @OnOpen
    public void onOpen(Session session, EndpointConfig config) {
        sessions.add(session);
    }

    @OnClose
    public void onClose(Session session, CloseReason reason) {
        sessions.remove(session);
    }
}

Copier après la connexion

Dans cet exemple de code, nous créons un point de terminaison Websocket annoté avec "/broadcast". Chaque fois qu'il y a une nouvelle connexion, le serveur Websocket appelle la méthode onOpen(). Cette méthode ajoute la connexion client à une collection. Chaque fois qu'un client envoie un message, le serveur Websocket appelle la méthode onMessage(). La méthode onMessage() parcourt tous les clients connectés, puis envoie le message à tous les clients à l'exception de l'expéditeur du message. Chaque fois qu'un client se déconnecte, le serveur Websocket appelle la méthode onClose(), qui supprime la connexion de la collection connectée.

Ensuite, nous devons définir un composant canevas, qui est contrôlé par JavaScript frontal, et connecter l'objet Java qui gère le plan de travail à Websocket :

window.onload = function() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var drawing = false;
    var lastX, lastY;

    var socket = new WebSocket('<websocket_url>');

    socket.onopen = function() {
        console.log('Connection opened');
    };

    socket.onmessage = function(message) {
        console.log('Message received: ' + message.data);
        var data = JSON.parse(message.data);
        drawLine(data.x1, data.y1, data.x2, data.y2, data.color);
    };

    socket.onerror = function() {
        console.log('Error');
    };

    socket.onclose = function() {
        console.log('Connection closed');
    };

    function startDrawing(event) {
        drawing = true;
        lastX = event.pageX - canvas.offsetLeft;
        lastY = event.pageY - canvas.offsetTop;
    }

    function stopDrawing() {
        drawing = false;
        socket.send(JSON.stringify({ eventType: 'stopDrawing' }));
    }

    function onDrawing(event) {
        if (!drawing) return;
        var currentX = event.pageX - canvas.offsetLeft;
        var currentY = event.pageY - canvas.offsetTop;
        drawLine(lastX, lastY, currentX, currentY, '#000');
        socket.send(JSON.stringify({ eventType: 'drawing', x1: lastX, y1: lastY, x2: currentX, y2: currentY, color: '#000' }));
        lastX = currentX;
        lastY = currentY;
    }

    function drawLine(x1, y1, x2, y2, color) {
        context.beginPath();
        context.moveTo(x1, y1);
        context.lineTo(x2, y2);
        context.strokeStyle = color;
        context.stroke();
    }

    canvas.addEventListener('mousedown', startDrawing);
    canvas.addEventListener('mouseup', stopDrawing);
    canvas.addEventListener('mousemove', onDrawing);
};

Copier après la connexion

Dans cet exemple de code, nous utilisons l'objet WebSocket pour définir onopen, Événements onmessage, onerror et onclose pour gérer la connexion et le traitement des données entre le code JavaScript client et le serveur WebSocket. Lorsque la souris est enfoncée, le code client appellera la fonction startDrawing() pour tracer la trajectoire du mouvement ultérieur de la souris sur le canevas et appellera la méthode socket.send() pour envoyer l'instruction au serveur Websocket. Après avoir reçu les instructions envoyées par le client, le serveur transmet ces instructions à tous les clients connectés. Lorsque la souris sera relâchée, le code client appellera la fonction stopDrawing(). Cette fonction informe le serveur que le processus de dessin s'est arrêté.

Enfin, nous devons configurer Websocket sur le serveur. Voici un exemple de code de configuration Websocket :

<dependencies>
    <dependency>
        <groupId>javax.websocket</groupId>
        <artifactId>javax.websocket-api</artifactId>
        <version>1.1</version>
    </dependency>
    <dependency>
        <groupId>org.glassfish.tyrus.bundles</groupId>
        <artifactId>tyrus-standalone-server</artifactId>
        <version>1.13.1</version>
        <scope>provided</scope>
    </dependency>
</dependencies>

<build>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.3</version>
            <configuration>
                <source>1.8</source>
                <target>1.8</target>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <version>2.1.1</version>
            <configuration>
                <webResources>
                    <resource>
                        <directory>src/main/webapp</directory>
                    </resource>
                </webResources>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.codehaus.mojo</groupId>
            <artifactId>exec-maven-plugin</artifactId>
            <version>1.6.0</version>
            <executions>
                <execution>
                    <goals>
                        <goal>java</goal>
                    </goals>
                    <phase>install</phase>
                    <configuration>
                        <mainClass>org.glassfish.tyrus.standalone.Server</mainClass>
                        <arguments>
                            <argument>--host</argument>
                            <argument>localhost</argument>
                            <argument>--port</argument>
                            <argument>8090</argument>
                            <argument>--contextPath</argument>
                            <argument>/</argument>
                            <argument>--appBase</argument>
                            <argument>./src/main/webapp</argument>
                            <argument>--monitoring</argument>
                        </arguments>
                        <classpathScope>compile</classpathScope>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

<repositories>
    <repository>
        <id>repo.maven.apache.org</id>
        <url>https://repo.maven.apache.org/maven2</url>
    </repository>
</repositories>

<profiles>
    <profile>
        <id>launch</id>
        <build>
            <plugins>
                <plugin>
                    <groupId>org.codehaus.mojo</groupId>
                    <artifactId>exec-maven-plugin</artifactId>
                    <version>1.6.0</version>
                    <executions>
                        <execution>
                            <goals>
                                <goal>java</goal>
                            </goals>
                            <phase>install</phase>
                            <configuration>
                                <mainClass>com.test.websocket.Broadcaster</mainClass>
                            </configuration>
                        </execution>
                    </executions>
                </plugin>
            </plugins>
        </build>
    </profile>
</profiles>

Copier après la connexion

Dans cet exemple de code, nous utilisons Maven pour compiler, créer et déployer une application Web Java, et utilisons le module tyrus-standalone-server pour fournir la prise en charge du protocole WebSocket.

Nous utilisons le code ci-dessus pour implémenter facilement la fonction de planche à dessin en ligne. Cette fonctionnalité peut être utilisée dans de nombreuses situations, des médecins pour mieux analyser les conditions avec les patients aux éducateurs pour partager des réponses avec les étudiants. La fonction de planche à dessin en ligne basée sur Websocket peut rendre ces occasions plus pratiques et efficaces.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!