PHP를 활용한 실시간 다자 협업 에디터 기술 연구-PHP 튜토리얼-php.cn

PHP를 활용한 실시간 다자 협업 에디터 기술 연구

WBOY

풀어 주다： 2023-06-28 12:16:01

원래의

1061명이 탐색했습니다.

최근에는 협업 편집자가 많은 주목을 받고 있습니다. 웹 애플리케이션의 급속한 발전으로 인해 실시간 다중 사용자 공동 작업 편집기는 점점 더 인기 있는 애플리케이션 시나리오 중 하나가 되었습니다. 웹 기반 기술로서 PHP는 실시간 다중 사용자 협업 편집기 구현을 위한 첫 번째 선택이 되어가고 있습니다.

이 글에서는 실시간 다인 협업 편집기를 구현하는 데 필요한 기술을 연구하고 PHP의 애플리케이션 구현에 중점을 둘 것입니다.

1. 기술적 원리 및 구현

실시간 협업 기술

실시간 협업이란 여러 사용자가 동시에 동일한 문서를 직접 편집할 수 있고 다른 사용자의 편집 결과를 실시간으로 볼 수 있음을 의미합니다. 실시간 협업은 프레젠테이션의 온라인 제작, 화이트보드, 코드 편집기 등 웹 분야에서 널리 사용됩니다.

실시간 협업을 위해서는 클라이언트와 서버 간의 긴 연결을 달성하기 위해 웹 소켓 기술을 사용해야 합니다. 클라이언트는 Web Socket을 통해 서버에 접속하고, 서버는 사용자의 편집 결과를 온라인상의 모든 사용자에게 브로드캐스팅함으로써 실시간 다자 협업을 실현합니다. 현재 모든 주요 브라우저는 웹 소켓 기술을 지원합니다.

에디터 기술

다인 공동 편집을 구현하는 데에는 에디터 기술이 핵심입니다. 현재 가장 일반적으로 사용되는 실시간 다중 사용자 협업 편집기는 CodeMirror입니다. CodeMirror는 여러 프로그래밍 언어에서 구문 강조 및 코드 완성 기능을 지원하고 확장 및 사용자 정의가 쉬운 JavaScript로 작성된 경량 코드 편집기입니다.

이 글 역시 CodeMirror를 기반으로 하며 PHP에서 실시간 다인 협업 편집기를 구현하는 방법을 소개합니다.

PHP 기술

PHP는 웹 개발에 널리 사용되는 오픈 소스 서버 측 스크립팅 언어입니다. 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
});

로그인 후 복사

실시간 협업 설정

웹 소켓 기술을 통해 클라이언트와 서버 간의 긴 연결을 설정하고 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를 사용하여 웹 소켓 서버를 구현하고 클라이언트 JavaScript에서 이 서버에 연결합니다.

웹 소켓 서버는 Ratchet 라이브러리를 사용하여 구현됩니다. Ratchet은 ReactPHP를 통해 효율적인 비동기 지원을 구현하는 PHP용 비동기 웹 소켓 프레임워크입니다. Ratchet에서는 몇 가지 간단한 단계를 수행하여 웹 소켓 서버를 생성하고 이벤트가 발생할 때 요청을 처리할 수 있습니다.

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

로그인 후 복사