Java Websocket を使用してマルチプレイヤーオンラインエディターを実装するにはどうすればよいですか?-＆＃＆チュートリアル-php.cn

Java Websocket を使用してマルチプレイヤーオンラインエディターを実装するにはどうすればよいですか?

WBOY

リリース： 2023-12-02 13:17:19

オリジナル

1666 人が閲覧しました

如何使用Java Websocket实现多人在线编辑器？

Java Websocket を使用してマルチプレイヤーオンラインエディターを実装するにはどうすればよいですか?

インターネットの急速な発展に伴い、ドキュメントのリアルタイム共有と編集の必要性がますます一般的になってきています。複数人で行うオンライン編集者は、リアルタイムの共同編集機能により、現代のオフィスおよびコラボレーションツールの重要な部分となっています。この記事では、Java Websocket を使用してシンプルな複数人オンラインエディタを実装し、複数のユーザーが同じドキュメントをリアルタイムで共同編集できるようにする方法を紹介します。

Java Websocket は Java EE 7 の一部です。これは、クライアントとサーバーの間に永続的な接続を確立してリアルタイム通信を実現できる双方向通信プロトコルを提供します。このシナリオでは、Java Websocket を使用して、ドキュメントの内容、カーソル位置、編集ステータスをリアルタイムに更新する機能を実装します。

まず、Java Websocket サーバーを作成する必要があります。 Java EE の標準 API を使用することも、Tyrus などのサードパーティのライブラリを使用することもできます。以下は、Tyrus を使用したコード例です。

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Collections;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;
import java.util.concurrent.ConcurrentHashMap;

@ServerEndpoint(value = "/editor")
public class EditorWebSocketServer {

    private static Map<Session, String> users = new ConcurrentHashMap<>();

    private static Set<Session> sessions = Collections.newSetFromMap(new ConcurrentHashMap<>());

    @OnOpen
    public void onOpen(Session session) throws IOException {
        sessions.add(session);
    }

    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        // 处理客户端发送的消息
        String[] parts = message.split(":");
        String action = parts[0];
        String content = parts[1];

        if (action.equals("login")) {
            users.put(session, content);
            broadcast("login:" + content);
        } else if (action.equals("content")) {
            broadcast("content:" + content);
        } else if (action.equals("cursor")) {
            broadcast("cursor:" + content);
        } else if (action.equals("state")) {
            broadcast("state:" + content);
        }
    }

    @OnClose
    public void onClose(Session session) throws IOException {
        sessions.remove(session);
        String username = users.get(session);
        users.remove(session);
        broadcast("logout:" + username);
    }

    private void broadcast(String message) throws IOException {
        for (Session session : sessions) {
            session.getBasicRemote().sendText(message);
        }
    }
}

ログイン後にコピー

上記のコードでは、@ServerEndpoint アノテーションを使用して WebSocket エントリポイントをマークし、いくつかの @OnXXX を定義しています。クライアント接続、メッセージ、終了イベントを処理するためのアノテーション付きメソッド。 users は接続されているユーザーを格納するマッピングテーブルであり、sessions はすべての接続を格納するコレクションです。 onOpen() メソッドでは、新しく接続した Session オブジェクトを sessions コレクションに追加します。 onMessage() メソッドでは、さまざまな操作タイプを処理し、受信したメッセージを broadcast() メソッドを通じて接続されているすべてのクライアントにブロードキャストします。 onClose() メソッドでは、接続が閉じられたユーザーを sessions コレクションから削除し、他のユーザーに通知します。

サーバー側の部分は完了しました。次に、マルチプレイヤーオンラインエディターの機能を表示およびテストするための簡単なフロントエンドページを作成する必要があります。以下は、単純な HTML ページのサンプルコードです。

<!DOCTYPE html>
<html>
<body>
    <textarea id="content"></textarea>
    <p>在线用户:</p>
    <ul id="users"></ul>

    <script>
        const socket = new WebSocket("ws://localhost:8080/editor");

        socket.onopen = function(event) {
            // 客户端连接成功后，发送用户名
            const username = prompt("请输入用户名");
            socket.send("login:" + username);
        }

        socket.onmessage = function(event) {
            // 处理服务器发送的消息
            const message = event.data;
            const parts = message.split(":");
            const action = parts[0];
            const content = parts[1];

            if (action === "login") {
                // 有新用户加入
                const user = document.createElement("li");
                user.textContent = content;
                document.getElementById("users").appendChild(user);
            } else if (action === "content") {
                // 更新文本内容
                document.getElementById("content").value = content;
            } else if (action === "cursor") {
                // 处理其他用户的光标位置变化
                // TODO
            } else if (action === "state") {
                // 处理其他用户的编辑状态变化
                // TODO
            } else if (action === "logout") {
                // 有用户退出
                const users = document.getElementById("users");
                const user = Array.from(users.children).find(u => u.textContent === content);
                users.removeChild(user);
            }
        }

        document.getElementById("content").addEventListener("input", function() {
            // 监听文本内容变化事件
            const content = this.value;
            socket.send("content:" + content);
        });
    </script>
</body>
</html>

ログイン後にコピー

上記のコードでは、new WebSocket() を使用してサーバーとの接続を作成し、onopen コールバック関数でユーザー名を送信します。 onmessage コールバック関数では、サーバーから送信されたさまざまな種類のメッセージを処理し、ページ上のユーザーリストとテキストコンテンツを更新します。テキストコンテンツが変更されると、content 操作と変更されたテキストコンテンツが send() メソッドを通じて送信されます。

上記は、Java Websocket を使用してマルチプレイヤーオンラインエディターを実装するための基本的な手順とコード例です。 Java Websocket とフロントエンドページの連携により、複数のユーザーが同じドキュメントをリアルタイムで共同編集する機能を実現できます。もちろん、サンプルコードには、ユーザーのカーソル位置や編集ステータスの変更の処理、ドキュメントのリアルタイムの保存と復元のサポートなど、改善と拡張が必要な領域がまだ多くあります。この記事が、皆さんが Java Websocket を理解し、マルチプレイヤーオンラインエディターを実装するために使用するのに役立つことを願っています。

以上がJava Websocket を使用してマルチプレイヤーオンラインエディターを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。