Java Websocket을 사용하여 멀티 플레이어 온라인 편집기를 구현하는 방법은 무엇입니까?-java지도 시간-php.cn

如何使用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 컬렉션에서 제거하고 다른 사용자에게 알립니다. @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

서버측 부분이 완료되었습니다. 다음으로 멀티 플레이어 온라인 편집기의 기능을 표시하고 테스트하기 위한 간단한 프런트 엔드 페이지를 만들어야 합니다. 다음은 간단한 HTML 페이지에 대한 샘플 코드입니다.

rrreee

위 코드에서는 new WebSocket()을 사용하여 서버와의 연결을 생성하고 onopen를 호출합니다. > 콜백 함수 사용자 이름을 . onmessage 콜백 함수에서는 서버에서 보낸 다양한 유형의 메시지를 처리하고 페이지의 사용자 목록과 텍스트 콘텐츠를 업데이트합니다. 텍스트 내용이 변경되면 content 작업과 변경된 텍스트 내용을 send() 메서드를 통해 보냅니다. 🎜🎜위 내용은 Java Websocket을 사용하여 멀티 플레이어 온라인 편집기를 구현하기 위한 기본 단계 및 코드 예제입니다. Java Websocket과 프런트 엔드 페이지 간의 협업을 통해 여러 사용자가 동일한 문서를 실시간으로 공동 편집하는 기능을 실현할 수 있습니다. 물론, 샘플 코드에는 사용자의 커서 위치 및 편집 상태 변경 처리, 실시간 문서 저장 및 복원 지원 등 아직 개선하고 확장해야 할 부분이 많습니다. 이 기사가 모든 사람이 Java Websocket을 이해하고 사용하여 멀티 플레이어 온라인 편집기를 구현하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 Java Websocket을 사용하여 멀티 플레이어 온라인 편집기를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!