PHPを用いたリアルタイム多人共同編集技術の研究-PHPチュートリアル-php.cn

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

WBOY

リリース： 2023-06-28 12:16:01

オリジナル

1061 人が閲覧しました

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

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

1. 技術原則と実装

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

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

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

エディタテクノロジー

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

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

PHP テクノロジー

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

2. 実装手順

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
});

ログイン後にコピー

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

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);
};

ログイン後にコピー

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();

ログイン後にコピー