PHPを用いたリアルタイム多人共同編集技術の研究

近年、複数人で行う共同編集者（共同編集者）が注目を集めています。 Web アプリケーションの急速な開発に伴い、リアルタイムの複数人による共同作業エディターは、ますます人気のあるアプリケーション シナリオの 1 つになりました。 Web ベースのテクノロジとして、PHP はリアルタイムの複数人による共同エディターを実装するための最初の選択肢となりつつあります。

この記事では、リアルタイムの複数人共同エディターを実装するために必要なテクノロジを研究し、PHP のアプリケーション実装に焦点を当てます。

1. 技術原則と実装

1. リアルタイム コラボレーション テクノロジ

リアルタイム コラボレーションとは、複数のユーザーが同じドキュメントを直接編集できることを意味します。同時に他のユーザーの編集結果をリアルタイムで確認できます。リアルタイム コラボレーションは、プレゼンテーション、ホワイトボード、コード エディターなどのオンライン制作など、Web 分野で広く使用されています。

リアルタイム コラボレーションでは、クライアントとサーバー間の長時間接続を実現するために Web Socket テクノロジを使用する必要があります。クライアントは Web Socket を介してサーバーに接続し、サーバーはユーザーの編集結果をすべてのオンライン ユーザーにブロードキャストすることで、リアルタイムの複数人コラボレーションを実現します。現在、すべての主要なブラウザが Web Socket テクノロジをサポートしています。

2. エディタ テクノロジー

エディタ テクノロジーは、複数人での共同編集を実現するための鍵です。現在、最も一般的に使用されているリアルタイムの複数人コラボレーション エディターは CodeMirror です。 CodeMirror は、JavaScript で書かれた軽量のコード エディターであり、複数のプログラミング言語での構文の強調表示とコード補完機能をサポートし、拡張やカスタマイズが簡単です。

この記事も CodeMirror に基づいており、PHP でリアルタイムの複数人コラボレーション エディターを実装する方法を紹介します。

3. PHP テクノロジー

PHP は、Web 開発で広く使用されているオープン ソースのサーバー側スクリプト言語です。 PHP は MySQL などのデータベースとの対話をサポートしており、データのセキュリティとメンテナンスの容易さという利点があります。

2. 実装手順

1. CodeMirror の基本設定

コード内で CodeMirror に必要な CSS ファイルと JavaScript ファイルを参照し、エディター コンテナーを定義します。

<link rel="stylesheet" href="codemirror.css">
<script src="codemirror.js"></script>
<script src="mode/javascript/javascript.js"></script>
<div id="editor"></div>

次に、CodeMirror インスタンスを定義し、言語タイプやテーマなどの基本的なパラメーターを設定します。

var myCodeMirror = CodeMirror(document.getElementById("editor"), {
  mode: "javascript",
  theme: "default",
  lineNumbers: true,
  tabSize: 2,
  indentUnit: 2
});

2. リアルタイム コラボレーション設定

Web Socket テクノロジを介してクライアントとサーバーの間に長い接続を確立し、CodeMirror 編集イベントをサーバーに送信します。サーバーは編集イベントを受信すると、変更されたテキストをすべてのオンライン ユーザーにブロードキャストします。

var websocket = new WebSocket("ws://example.com:8080"); //替换成实际的 Web Socket 服务地址
myCodeMirror.on("change", function() {
  //获取修改后的文本
  var text = myCodeMirror.getValue(); 
  //将文本发送到服务端
  websocket.send(text);
});
//服务端返回的文本更新到CodeMirror
websocket.onmessage = function(event) {
  myCodeMirror.setValue(event.data);
};

3. PHP 実装

サーバー側で PHP を使用して Web Socket サーバーを実装し、クライアント JavaScript でこのサーバーに接続します。

Web Socket サーバーは、Ratchet ライブラリを使用して実装されています。 Ratchet は、ReactPHP を通じて効率的な非同期サポートを実装する PHP 用の非同期 Web ソケット フレームワークです。 Ratchet では、いくつかの簡単な手順を実行して Web Socket サーバーを作成し、イベント発生時にリクエストを処理できます。

use RatchetMessageComponentInterface;
use RatchetConnectionInterface;

class MyServer implements MessageComponentInterface {
  protected $clients;

  public function __construct() {
    $this->clients = new SplObjectStorage;
  }

  public function onOpen(ConnectionInterface $conn) {
    $this->clients->attach($conn);
  }

  public function onMessage(ConnectionInterface $from, $msg) {
    foreach ($this->clients as $client) {
      if ($from != $client) {
        $client->send($msg);
      }
    }
  }

  public function onClose(ConnectionInterface $conn) {
    $this->clients->detach($conn);
  }

  public function onError(ConnectionInterface $conn, Exception $e) {
    $conn->close();
  }
}

$server = new RatchetServerIoServer(
  new RatchetHttpHttpServer(
    new RatchetWebSocketWsServer(
      new MyServer()
    )
  ),
  8080 //端口号
);

$server->run();

4. アプリケーションのデプロイメント

上記のコードを完了したら、PHP コードを Web サーバーにデプロイし、Web Socket サーバーを起動します。

3. 結論

この記事では、PHP のアプリケーション実装に焦点を当て、リアルタイムの複数人共同エディターを実装するために必要な技術原則と実装方法を紹介します。

リアルタイムの複数人コラボレーション エディターは、PHP Web Socket サーバーと CodeMirror エディターを使用して実装されます。このエディタは、プロジェクトの統合が簡単で、使いやすく、拡張性が高いため、チーム コラボレーション開発、オンライン教育、その他の分野で広く使用できます。

以上がPHPを用いたリアルタイム多人共同編集技術の研究の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。