Java Websocket はオンラインお絵かきボード機能をどのように実装しますか?

Java Websocket はオンラインお絵かきボード機能をどのように実装しますか?

Websocket は HTML5 が推奨する新しいプロトコルで、クライアントとサーバーが相互にメッセージを送信し、リアルタイム通信を実現できます。このプロトコルにより、オンライン描画ボード機能の信頼性、安全性、リアルタイム性が向上します。次の記事では、Java Websocket を使用してオンラインお絵かきボード機能を実装する方法を紹介し、誰もが理解できるようにいくつかのサンプル コードを添付します。

まず、Java Websocket フレームワークを使用する必要があります。これは、Websocket プロトコルを迅速かつ簡単に実装するのに役立ちます。以下は、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);
    }
}

このサンプル コードでは、「/broadcast」の注釈が付いた Websocket エンドポイントを作成します。新しい接続が確立されるたびに、Websocket サーバーは onOpen() メソッドを呼び出します。このメソッドは、クライアント接続をコレクションに追加します。クライアントがメッセージを送信するたびに、Websocket サーバーは onMessage() メソッドを呼び出します。 onMessage() メソッドは、接続されているすべてのクライアントを反復処理し、メッセージの送信者を除くすべてのクライアントにメッセージを送信します。クライアントが切断されるたびに、Websocket サーバーは onClose() メソッドを呼び出し、接続されたコレクションから接続を削除します。

次に、フロントエンド JavaScript によって制御されるキャンバス コンポーネントを定義し、アートボードを管理する Java オブジェクトを 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);
};

このサンプル コードでは、 WebSocket オブジェクトは、クライアント JavaScript コードと WebSocket サーバー間の接続とデータ処理を処理するために、onopen、onmessage、onerror、および onclose イベントを設定します。マウスが押されると、クライアント コードは startDrawing() 関数を呼び出して、その後のマウスの動きの軌跡をキャンバス上に描画し、socket.send() メソッドを呼び出して命令を Websocket サーバーに送信します。クライアントから送信された命令を受信した後、サーバーはこれらの命令を接続されているすべてのクライアントに転送します。マウスが放されると、クライアント コードは stopDrawing() 関数を呼び出します。この関数は、描画プロセスが停止したことをサーバーに通知します。

最後に、サーバー上で Websocket を構成する必要があります。 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>

このサンプル コードでは、Maven を使用して Java Web アプリケーションをコンパイル、構築、デプロイし、tyrus-standalone-server モジュールを使用して WebSocket プロトコルのサポートを提供します。 。

上記のコードを使用して、オンラインお絵かきボード機能を簡単に実装します。この機能は、患者の状態をより適切に分析する医師から、学生と答えを共有する教育者まで、さまざまな状況で使用できます。 Websocketをベースとしたオンラインお絵描き機能は、こうした場面をより便利かつ効率的に実現します。

以上がJava Websocket はオンラインお絵かきボード機能をどのように実装しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。