Bagaimana untuk menggunakan Java Websocket untuk melaksanakan editor dalam talian berbilang pemain?

Bagaimana untuk menggunakan Java Websocket untuk melaksanakan editor dalam talian berbilang pemain?

Dengan perkembangan pesat Internet, keperluan untuk perkongsian dokumen dan penyuntingan masa nyata menjadi semakin biasa. Penyunting dalam talian berbilang orang telah menjadi bahagian penting dalam alat pejabat dan kerjasama moden kerana ciri-ciri penyuntingan masa nyata dan kolaboratif mereka. Artikel ini akan memperkenalkan cara menggunakan Java Websocket untuk melaksanakan editor dalam talian berbilang orang yang mudah, membolehkan berbilang pengguna mengedit dokumen yang sama secara kolaboratif dalam masa nyata.

Java Websocket ialah sebahagian daripada Java EE 7. Ia menyediakan protokol komunikasi dua hala yang boleh mewujudkan sambungan berterusan antara pelanggan dan pelayan untuk mencapai komunikasi masa nyata. Dalam senario kami, kami akan menggunakan Java Websocket untuk melaksanakan fungsi mengemas kini kandungan dokumen, kedudukan kursor dan status penyuntingan dalam masa nyata.

Pertama, kita perlu mencipta bahagian pelayan Java Websocket. Anda boleh menggunakan API standard Java EE, atau anda boleh menggunakan perpustakaan pihak ketiga seperti Tyrus. Berikut ialah contoh kod menggunakan 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);
        }
    }
}

Dalam kod di atas, kami menggunakan anotasi @ServerEndpoint untuk menandakan titik masuk WebSocket dan mentakrifkan beberapa kaedah beranotasi @OnXXX untuk mengendalikan sambungan pelanggan, mesej dan acara penutupan. pengguna ialah jadual pemetaan yang menyimpan pengguna yang disambungkan dan sesi ialah koleksi yang menyimpan semua sambungan. Dalam kaedah onOpen(), kami menambah objek Session yang baru disambungkan pada koleksi sessions. Dalam kaedah onMessage(), kami mengendalikan jenis operasi yang berbeza dan menyiarkan mesej yang diterima kepada semua pelanggan yang disambungkan melalui kaedah broadcast(). Dalam kaedah onClose(), kami mengalih keluar pengguna yang sambungannya ditutup daripada koleksi sessions dan memberitahu pengguna lain. @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

Bahagian bahagian pelayan telah selesai Seterusnya, kita perlu membuat halaman muka depan yang mudah untuk memaparkan dan menguji fungsi editor dalam talian berbilang pemain. Berikut ialah contoh kod untuk halaman HTML ringkas:

rrreee

Dalam kod di atas, kami menggunakan new WebSocket() untuk membuat sambungan dengan pelayan dan memanggil onopen fungsi panggil balik Hantar nama pengguna dalam . Dalam fungsi panggil balik onmessage, kami memproses pelbagai jenis mesej yang dihantar oleh pelayan dan mengemas kini senarai pengguna dan kandungan teks pada halaman. Apabila kandungan teks berubah, kami menghantar operasi kandungan dan kandungan teks yang diubah melalui kaedah hantar(). 🎜🎜Di atas ialah langkah asas dan contoh kod untuk menggunakan Java Websocket untuk melaksanakan editor dalam talian berbilang pemain. Melalui kerjasama antara Java Websocket dan halaman hadapan, kami dapat merealisasikan fungsi berbilang pengguna secara kolaboratif mengedit dokumen yang sama dalam masa nyata. Sudah tentu, kod sampel masih mempunyai banyak bidang yang perlu diperbaiki dan dikembangkan, seperti mengendalikan perubahan dalam kedudukan kursor pengguna dan status pengeditan, menyokong penjimatan masa nyata dan memulihkan dokumen, dsb. Saya harap artikel ini dapat membantu semua orang memahami dan menggunakan Java Websocket untuk melaksanakan editor dalam talian berbilang pemain. 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Java Websocket untuk melaksanakan editor dalam talian berbilang pemain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!