Bagaimanakah Java Websocket melaksanakan fungsi papan lukisan dalam talian?

Bagaimana Java Websocket melaksanakan fungsi papan lukisan dalam talian?

Websocket ialah protokol baharu yang disyorkan oleh HTML5, yang membolehkan pelanggan dan pelayan menghantar mesej antara satu sama lain dan mencapai komunikasi masa nyata. Protokol ini boleh menjadikan fungsi papan lukisan dalam talian kami lebih dipercayai, selamat dan masa nyata. Dalam artikel berikut, kami akan memperkenalkan cara menggunakan Java Websocket untuk melaksanakan fungsi papan lukisan dalam talian, dan melampirkan beberapa kod sampel untuk membantu semua orang memahami.

Pertama sekali, kita perlu menggunakan rangka kerja Java Websocket, yang boleh membantu kita melaksanakan protokol Websocket dengan cepat dan ringkas. Berikut ialah beberapa contoh kod untuk penyiaran mesej menggunakan 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);
    }
}

Dalam kod contoh ini, kami mencipta titik akhir Websocket beranotasi dengan "/broadcast". Setiap kali terdapat sambungan baharu, pelayan Websocket memanggil kaedah onOpen(). Kaedah ini menambah sambungan klien pada koleksi. Setiap kali pelanggan menghantar mesej, pelayan Websocket memanggil kaedah onMessage(). Kaedah onMessage() berulang melalui semua pelanggan yang disambungkan dan kemudian menghantar mesej kepada semua pelanggan kecuali pengirim mesej. Setiap kali pelanggan memutuskan sambungan, pelayan Websocket memanggil kaedah onClose(), yang mengalih keluar sambungan daripada koleksi yang disambungkan.

Seterusnya, kita perlu mentakrifkan komponen kanvas, yang dikawal oleh JavaScript bahagian hadapan, dan menyambungkan objek Java yang menguruskan artboard ke 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);
};

Dalam kod sampel ini, kami menggunakan objek WebSocket untuk menetapkan onopen, onmessage, onerror dan onclose acara untuk mengendalikan sambungan dan pemprosesan data antara kod JavaScript klien dan pelayan WebSocket. Apabila tetikus ditekan, kod klien akan memanggil fungsi startDrawing() untuk melukis trajektori pergerakan tetikus berikutnya ke atas kanvas, dan memanggil kaedah socket.send() untuk menghantar arahan ke pelayan Websocket. Selepas menerima arahan yang dihantar oleh pelanggan, pelayan memajukan arahan ini kepada semua pelanggan yang bersambung. Apabila tetikus dilepaskan, kod klien akan memanggil fungsi stopDrawing(). Fungsi ini memberitahu pelayan bahawa proses lukisan telah berhenti.

Akhir sekali, kita perlu mengkonfigurasi Websocket pada pelayan. Berikut ialah beberapa kod contoh konfigurasi 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>

Dalam kod sampel ini, kami menggunakan Maven untuk menyusun, membina dan menggunakan aplikasi web Java dan menggunakan modul tyrus-standalone-server untuk menyediakan sokongan untuk protokol WebSocket.

Kami menggunakan kod di atas untuk melaksanakan fungsi papan lukisan dalam talian dengan mudah. Ciri ini boleh digunakan dalam banyak situasi, daripada doktor kepada menganalisis keadaan dengan lebih baik dengan pesakit kepada pendidik untuk berkongsi jawapan dengan pelajar. Fungsi papan lukisan dalam talian berdasarkan Websocket boleh menjadikan majlis ini lebih mudah dan cekap.

Atas ialah kandungan terperinci Bagaimanakah Java Websocket melaksanakan fungsi papan lukisan dalam talian?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!