Wie verwende ich Java Websocket, um einen Online-Editor für mehrere Spieler zu implementieren?

Wie verwende ich Java Websocket, um einen Online-Editor für mehrere Spieler zu implementieren?

Mit der rasanten Entwicklung des Internets wird die Notwendigkeit, Dokumente in Echtzeit zu teilen und zu bearbeiten, immer häufiger. Mit seinen Echtzeit- und kollaborativen Bearbeitungseigenschaften sind Online-Editoren für mehrere Personen zu einem wichtigen Bestandteil moderner Büro- und Kollaborationstools geworden. In diesem Artikel wird erläutert, wie Sie mit Java Websocket einen einfachen Online-Editor für mehrere Personen implementieren, der es mehreren Benutzern ermöglicht, dasselbe Dokument in Echtzeit gemeinsam zu bearbeiten.

Java Websocket ist Teil von Java EE 7. Es bietet ein bidirektionales Kommunikationsprotokoll, das eine dauerhafte Verbindung zwischen dem Client und dem Server herstellen kann, um eine Echtzeitkommunikation zu erreichen. In unserem Szenario verwenden wir Java Websocket, um die Funktion zum Aktualisieren des Dokumentinhalts, der Cursorposition und des Bearbeitungsstatus in Echtzeit zu implementieren.

Zuerst müssen wir eine Java-Websocket-Serverseite erstellen. Sie können die Standard-API von Java EE oder Bibliotheken von Drittanbietern wie Tyrus verwenden. Das Folgende ist ein Codebeispiel mit 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);
        }
    }
}

Im obigen Code verwenden wir die Annotation @ServerEndpoint, um einen WebSocket-Einstiegspunkt zu markieren und mehrere mit @OnXXX annotierte Methoden zu definieren um Client-Verbindungs-, Nachrichten- und Shutdown-Ereignisse zu verarbeiten. users ist eine Zuordnungstabelle, die verbundene Benutzer speichert, und sessions ist eine Sammlung, die alle Verbindungen speichert. In der Methode onOpen() fügen wir das neu verbundene Objekt Session zur Sammlung sessions hinzu. In der Methode onMessage() verarbeiten wir verschiedene Operationstypen und senden die empfangene Nachricht über die Methode broadcast() an alle verbundenen Clients. In der Methode onClose() entfernen wir den Benutzer, dessen Verbindung geschlossen wird, aus der Sammlung sessions und benachrichtigen andere Benutzer. @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回调函数中，我们处理服务器发送的不同类型的消息，并更新页面上的用户列表和文本内容。在文本内容发生变化时，我们通过send()方法发送content

Der serverseitige Teil ist abgeschlossen. Als nächstes müssen wir eine einfache Frontend-Seite erstellen, um die Funktion des Multiplayer-Online-Editors anzuzeigen und zu testen. Das Folgende ist ein Beispielcode für eine einfache HTML-Seite:

rrreee

Im obigen Code verwenden wir new WebSocket(), um eine Verbindung mit dem Server herzustellen und rufen den onopenauf > Rückruffunktion Benutzernamen senden in . In der Callback-Funktion onmessage verarbeiten wir verschiedene Arten von Nachrichten, die vom Server gesendet werden, und aktualisieren die Benutzerliste und den Textinhalt auf der Seite. Wenn sich der Textinhalt ändert, senden wir die Operation content und den geänderten Textinhalt über die Methode send(). 🎜🎜Das Obige sind die grundlegenden Schritte und Codebeispiele für die Verwendung von Java Websocket zur Implementierung eines Online-Editors für mehrere Spieler. Durch die Zusammenarbeit zwischen Java Websocket und Front-End-Seiten können wir die Funktion realisieren, dass mehrere Benutzer gemeinsam dasselbe Dokument in Echtzeit bearbeiten. Natürlich gibt es im Beispielcode noch viele Bereiche, die verbessert und erweitert werden müssen, z. B. die Handhabung von Änderungen an der Cursorposition und dem Bearbeitungsstatus des Benutzers, die Unterstützung des Speicherns und Wiederherstellens von Dokumenten in Echtzeit usw. Ich hoffe, dieser Artikel kann jedem helfen, Java Websocket zu verstehen und zu verwenden, um einen Online-Editor für mehrere Spieler zu implementieren. 🎜

Das obige ist der detaillierte Inhalt vonWie verwende ich Java Websocket, um einen Online-Editor für mehrere Spieler zu implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!