Java Websocket を使用してマルチプレイヤー オンライン エディターを実装するにはどうすればよいですか?
- WBOYオリジナル
- 2023-12-02 13:17:191630ブラウズ
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 サイトの他の関連記事を参照してください。