Wie implementiert Java Websocket die Online-Zeichenbrettfunktion?-javaLernprogramm-php.cn

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

Wie implementiert Java Websocket die Online-Zeichenbrettfunktion?

Websocket ist ein neues von HTML5 empfohlenes Protokoll, das es Client und Server ermöglicht, Nachrichten aneinander zu senden und eine Echtzeitkommunikation zu erreichen. Dieses Protokoll kann die Funktion unseres Online-Zeichenbretts zuverlässiger, sicherer und in Echtzeit machen. Im folgenden Artikel stellen wir vor, wie Sie Java Websocket zum Implementieren der Online-Zeichenbrettfunktion verwenden, und fügen einige Beispielcodes bei, um das Verständnis für alle zu erleichtern.

Zunächst müssen wir das Java Websocket-Framework verwenden, das uns helfen kann, das Websocket-Protokoll schnell und einfach zu implementieren. Hier ist ein Beispielcode für die Nachrichtenübertragung mit 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);
    }
}

Nach dem Login kopieren

In diesem Beispielcode erstellen wir einen Websocket-Endpunkt, der mit „/broadcast“ annotiert ist. Immer wenn eine neue Verbindung besteht, ruft der Websocket-Server die Methode onOpen() auf. Diese Methode fügt die Clientverbindung einer Sammlung hinzu. Immer wenn ein Client eine Nachricht sendet, ruft der Websocket-Server die Methode onMessage() auf. Die Methode onMessage() durchläuft alle verbundenen Clients und sendet die Nachricht dann an alle Clients außer dem Absender der Nachricht. Immer wenn ein Client die Verbindung trennt, ruft der Websocket-Server die Methode onClose() auf, die die Verbindung aus der verbundenen Sammlung entfernt.

Als nächstes müssen wir eine Canvas-Komponente definieren, die durch Front-End-JavaScript gesteuert wird, und das Java-Objekt, das die Zeichenfläche verwaltet, mit Websocket verbinden:

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);
};

Nach dem Login kopieren

In diesem Beispielcode verwenden wir das WebSocket-Objekt, um onopen festzulegen, onmessage-, onerror- und onclose-Ereignisse zur Abwicklung der Verbindung und Datenverarbeitung zwischen dem Client-JavaScript-Code und dem WebSocket-Server. Wenn die Maus gedrückt wird, ruft der Clientcode die Funktion startDrawing() auf, um die Flugbahn der nachfolgenden Mausbewegung auf der Leinwand zu zeichnen, und ruft die Methode socket.send() auf, um die Anweisung an den Websocket-Server zu senden. Nach Erhalt der vom Client gesendeten Anweisungen leitet der Server diese Anweisungen an alle verbundenen Clients weiter. Wenn die Maus losgelassen wird, ruft der Clientcode die Funktion stopDrawing() auf. Diese Funktion benachrichtigt den Server, dass der Zeichenvorgang gestoppt wurde.

Abschließend müssen wir Websocket auf dem Server konfigurieren. Hier ist ein Beispielcode für die Websocket-Konfiguration:

<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>

Nach dem Login kopieren

In diesem Beispielcode verwenden wir Maven zum Kompilieren, Erstellen und Bereitstellen einer Java-Webanwendung und verwenden das Modul tyrus-standalone-server, um Unterstützung für das WebSocket-Protokoll bereitzustellen.

Wir verwenden den obigen Code, um die Online-Zeichenbrettfunktion einfach zu implementieren. Diese Funktion kann in vielen Situationen eingesetzt werden, von Ärzten, um den Zustand mit Patienten besser zu analysieren, bis hin zu Pädagogen, um Antworten mit Schülern zu teilen. Die auf Websocket basierende Online-Zeichenbrettfunktion kann diese Anlässe bequemer und effizienter gestalten.

Das obige ist der detaillierte Inhalt vonWie implementiert Java Websocket die Online-Zeichenbrettfunktion?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!