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 コレクションから削除し、他のユーザーに通知します。
サーバー側の部分は完了しました。次に、マルチプレイヤー オンライン エディターの機能を表示およびテストするための簡単なフロントエンド ページを作成する必要があります。以下は、単純な 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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7751
15
1643
14
1398
52
1293
25
1234
29
Java Springのインタビューの質問
Aug 30, 2024 pm 04:29 PM
この記事では、Java Spring の面接で最もよく聞かれる質問とその詳細な回答をまとめました。面接を突破できるように。
Java 8 Stream Foreachから休憩または戻ってきますか？
Feb 07, 2025 pm 12:09 PM
Java 8は、Stream APIを導入し、データ収集を処理する強力で表現力のある方法を提供します。ただし、ストリームを使用する際の一般的な質問は次のとおりです。 従来のループにより、早期の中断やリターンが可能になりますが、StreamのForeachメソッドはこの方法を直接サポートしていません。この記事では、理由を説明し、ストリーム処理システムに早期終了を実装するための代替方法を調査します。 さらに読み取り：JavaストリームAPIの改善 ストリームを理解してください Foreachメソッドは、ストリーム内の各要素で1つの操作を実行する端末操作です。その設計意図はです
PHP：Web開発の重要な言語
Apr 13, 2025 am 12:08 AM
PHPは、サーバー側で広く使用されているスクリプト言語で、特にWeb開発に適しています。 1.PHPは、HTMLを埋め込み、HTTP要求と応答を処理し、さまざまなデータベースをサポートできます。 2.PHPは、ダイナミックWebコンテンツ、プロセスフォームデータ、アクセスデータベースなどを生成するために使用され、強力なコミュニティサポートとオープンソースリソースを備えています。 3。PHPは解釈された言語であり、実行プロセスには語彙分析、文法分析、編集、実行が含まれます。 4.PHPは、ユーザー登録システムなどの高度なアプリケーションについてMySQLと組み合わせることができます。 5。PHPをデバッグするときは、error_reporting（）やvar_dump（）などの関数を使用できます。 6. PHPコードを最適化して、キャッシュメカニズムを使用し、データベースクエリを最適化し、組み込み関数を使用します。 7
Java での日付までのタイムスタンプ
Aug 30, 2024 pm 04:28 PM
Java での日付までのタイムスタンプに関するガイド。ここでは、Java でタイムスタンプを日付に変換する方法とその概要について、例とともに説明します。
PHP対Python：違いを理解します
Apr 11, 2025 am 12:15 AM
PHP and Python each have their own advantages, and the choice should be based on project requirements. 1.PHPは、シンプルな構文と高い実行効率を備えたWeb開発に適しています。 2。Pythonは、簡潔な構文とリッチライブラリを備えたデータサイエンスと機械学習に適しています。
カプセルの量を見つけるためのJavaプログラム
Feb 07, 2025 am 11:37 AM
カプセルは3次元の幾何学的図形で、両端にシリンダーと半球で構成されています。カプセルの体積は、シリンダーの体積と両端に半球の体積を追加することで計算できます。このチュートリアルでは、さまざまな方法を使用して、Javaの特定のカプセルの体積を計算する方法について説明します。 カプセルボリュームフォーミュラ カプセルボリュームの式は次のとおりです。 カプセル体積=円筒形の体積2つの半球体積 で、 R：半球の半径。 H：シリンダーの高さ（半球を除く）。 例1 入力 RADIUS = 5ユニット 高さ= 10単位 出力 ボリューム= 1570.8立方ユニット 説明する 式を使用してボリュームを計算します。 ボリューム=π×R2×H（4
PHP対Python：コア機能と機能
Apr 13, 2025 am 12:16 AM
PHPとPythonにはそれぞれ独自の利点があり、さまざまなシナリオに適しています。 1.PHPはWeb開発に適しており、組み込みのWebサーバーとRich Functionライブラリを提供します。 2。Pythonは、簡潔な構文と強力な標準ライブラリを備えたデータサイエンスと機械学習に適しています。選択するときは、プロジェクトの要件に基づいて決定する必要があります。
PHP対その他の言語：比較
Apr 13, 2025 am 12:19 AM
PHPは、特に迅速な開発や動的なコンテンツの処理に適していますが、データサイエンスとエンタープライズレベルのアプリケーションには良くありません。 Pythonと比較して、PHPはWeb開発においてより多くの利点がありますが、データサイエンスの分野ではPythonほど良くありません。 Javaと比較して、PHPはエンタープライズレベルのアプリケーションでより悪化しますが、Web開発により柔軟性があります。 JavaScriptと比較して、PHPはバックエンド開発により簡潔ですが、フロントエンド開発のJavaScriptほど良くありません。
