Comment utiliser Java Websocket pour implémenter un éditeur en ligne multi-joueurs ?-javaDidacticiel-php.cn

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

Comment utiliser Java Websocket pour implémenter un éditeur en ligne multi-joueurs ?

Avec le développement rapide d'Internet, le besoin de partage et d'édition de documents en temps réel devient de plus en plus courant. Grâce à leurs caractéristiques d’édition collaborative et en temps réel, les éditeurs en ligne à plusieurs personnes sont devenus un élément important des outils de bureau et de collaboration modernes. Cet article explique comment utiliser Java Websocket pour implémenter un simple éditeur en ligne multi-personnes, permettant à plusieurs utilisateurs de modifier de manière collaborative le même document en temps réel.

Java Websocket fait partie de Java EE 7. Il fournit un protocole de communication bidirectionnel qui peut établir une connexion persistante entre le client et le serveur pour établir une communication en temps réel. Dans notre scénario, nous utiliserons Java Websocket pour implémenter la fonction de mise à jour du contenu du document, de la position du curseur et du statut d'édition en temps réel.

Tout d'abord, nous devons créer un côté serveur Java Websocket. Vous pouvez utiliser l'API standard de Java EE ou utiliser des bibliothèques tierces telles que Tyrus. Voici un exemple de code utilisant 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);
        }
    }
}

Copier après la connexion

Dans le code ci-dessus, nous utilisons l'annotation @ServerEndpoint pour marquer un point d'entrée WebSocket et définir plusieurs méthodes annotées @OnXXX pour gérer les événements de connexion client, de message et d’arrêt. users est une table de mappage qui stocke les utilisateurs connectés, et sessions est une collection qui stocke toutes les connexions. Dans la méthode onOpen(), nous ajoutons l'objet Session nouvellement connecté à la collection sessions. Dans la méthode onMessage(), nous gérons différents types d'opérations et diffusons le message reçu à tous les clients connectés via la méthode broadcast(). Dans la méthode onClose(), nous supprimons l'utilisateur dont la connexion est fermée de la collection sessions et en informons les autres utilisateurs. @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>

Copier après la connexion

上述代码中，我们使用new WebSocket()创建一个与服务器端的连接，并在onopen回调函数中发送用户名。在onmessage回调函数中，我们处理服务器发送的不同类型的消息，并更新页面上的用户列表和文本内容。在文本内容发生变化时，我们通过send()方法发送content

La partie côté serveur est terminée. Ensuite, nous devons créer une simple page frontale pour afficher et tester la fonction de l'éditeur en ligne multijoueur. Voici un exemple de code pour une simple page HTML :

rrreee

Dans le code ci-dessus, nous utilisons new WebSocket() pour créer une connexion avec le serveur et appeler le onopen fonction de rappel Envoyer le nom d'utilisateur dans . Dans la fonction de rappel onmessage, nous traitons différents types de messages envoyés par le serveur et mettons à jour la liste des utilisateurs et le contenu du texte sur la page. Lorsque le contenu du texte change, nous envoyons l'opération content et le contenu du texte modifié via la méthode send(). 🎜🎜Ci-dessus sont les étapes de base et des exemples de code pour utiliser Java Websocket pour implémenter un éditeur en ligne multi-joueurs. Grâce à la collaboration entre Java Websocket et les pages frontales, nous pouvons réaliser la fonction de plusieurs utilisateurs éditant de manière collaborative le même document en temps réel. Bien entendu, l'exemple de code comporte encore de nombreux domaines qui doivent être améliorés et étendus, tels que la gestion des modifications de la position du curseur et de l'état d'édition de l'utilisateur, la prise en charge de l'enregistrement et de la restauration des documents en temps réel, etc. J'espère que cet article pourra aider tout le monde à comprendre et à utiliser Java Websocket pour implémenter un éditeur en ligne multi-joueurs. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!