Phoenix LiveView, 후크 및 push_event: json

Phoenix LiveView는 Elixir를 기반으로 구축된 강력한 프레임워크이며 광범위한 Javascript 없이도 실시간 웹 인터페이스를 구축할 수 있는 혁신적인 접근 방식을 제공합니다.

그러나 그래프, 시각화 또는 렌더링과 같은 기존 클라이언트 측 라이브러리와 통합하는 것이 때로는 어려울 수 있습니다.

이 기사에서는 DOM에 직접 렌더링하는 Javascript 라이브러리와 Phoenix LiveView를 통합하는 방법을 살펴보겠습니다.

특정 요소의 특정 수명 주기 요소에서 Javascript를 실행할 수 있게 해주는 후크와 이러한 후크를 사용하여 이벤트 스트림을 활성화하는 방법을 살펴보겠습니다( 사용). push_event(LiveView) 및 pushEvent(Javascript))를 사용하여 양방향 실시간 허용 클라이언트와 서버 간의 통신.

배경

TLDR: Phoenix LiveView에서는 후크와 push_event를 사용하여 데이터를 푸시하고 클라이언트측 라이브러리에서 렌더링을 처리하도록 할 수 있습니다.

웹페이지에 JSON 개체를 확장 및 축소할 수 있는 트리로 표시하는 json-view(데모)는 일부 클라이언트 측 Javascript 라이브러리가 DOM에 대한 렌더링 및 DOM과의 상호 작용을 제어하는 방법을 보여주는 좋은 예입니다. .

Phoenix LiveView, hooks and push_event: json_view

(LiveView) 서버에서 제공하는 JSON 데이터와 이를 통합하는 방법을 예시를 통해 살펴보겠습니다. 이벤트에 대한 응답으로 백엔드에서 일부 정적 데이터를 보내지만 이 데이터는 모든 소스에서 나올 수 있습니다.

다음은 LiveView가 활성화된 mix phx.new를 사용하여 Phoenix 프로젝트를 설정했다고 가정합니다.

라이브러리 설정

Javascript 패키지를 페이지 Javascript의 일부로 통합하는 방법에는 여러 가지가 있습니다.

선호하는 설정을 권장하는 방법은 이 문서의 범위를 벗어나지만 다음과 같은 두 가지 주요 방법이 있습니다.

assets/vendor - 일반적인 LiveView 프로젝트 템플릿에서 상단 표시줄은 이 디렉터리에 배치되고 자산/app/app.js 진입점 파일에 포함됩니다. 이는 일반적으로 더 작고 안정적인 라이브러리에 적합하며, 특히 단일 파일 버전의 라이브러리가 제공되는 경우 더욱 그렇습니다.
NPM/Yarn - esbuild 및 webpack은 참조된 node_modules 파일을 단일 배포 파일로 압축할 수 있습니다. 이는 더 자주 변경되는 더 크고 복잡한 라이브러리에 적합합니다.

json-view의 문제

두 라이브러리를 결합하려고 하면 호환되지 않는 두 가지 렌더링 모델이 있습니다.

LiveView는 선언적 모델을 따릅니다. 즉, 뷰를 디자인하고 표시할 데이터를 결정하며 LiveView는 기본 데이터가 변경될 때 페이지의 어떤 요소를 변경해야 하는지 알아냅니다.

렌더링에서 소켓 할당을 사용하여 이를 달성합니다.

def render(assigns) do
  ~H"""
  <p>Hello <%= @name %></p>
  """
 end

로그인 후 복사

그러나 json-view와 같은 라이브러리는 명령형 모델에서 작동합니다. DOM 자체의 레이아웃 외부에서 Javascript로 데이터를 표시하는 데 필요한 단계를 지정합니다.

import jsonview from '@pgrabovets/json-view';

const data = '{"name": "json-view", "version": "1.0.0"}'
const tree = jsonview.create(data);
jsonview.render(tree, document.querySelector('.tree'));

로그인 후 복사

이 두 모델은 서로 상충됩니다. 데이터를 렌더링하는 두 가지 방법(선언적 및 명령형)을 일치시킬 방법이 없어 보이지만 클라이언트에서 풍부한 인터페이스를 렌더링하려면 json-view와 같은 라이브러리가 필요합니다.

기본적으로 서버에서 페이지 상태 변경 메시지를 표시할 때 Javascript 코드를 실행해야 합니다. 이 두 가지 렌더링 모델을 조화시키는 데 도움이 되는 후크를 살펴보겠습니다.

후크 설정

LiveView에서 후크는 (브라우저) 클라이언트와 (LiveView) 서버 간의 양방향 통신을 제공하는 방법으로, 통신의 핵심 개체는 이벤트입니다.

후크는 LiveSocket에 정의되며 phx-hook 속성을 사용하여 요소에 연결됩니다. 콜백에는 여러 가지가 있지만 이벤트를 통해 다른 모든 것을 조정할 수 있으므로 탑재된 콜백에 중점을 둘 것입니다. 다른 수명 주기 이벤트에 대한 콜백도 제공할 수 있습니다. 문서를 확인하세요.

마운트된 것과 같은 콜백 내에서 후크는 this.pushEvent를 사용하여 백엔드로 이벤트를 보내고, this.handleEvent를 사용하여 특정 이벤트 이름에 대한 핸들러를 등록하여 서버에서 이벤트를 처리합니다.

요소당 하나의 후크만 허용된다는 점에 유의하는 것이 중요하므로 클라이언트와 서버 간의 하나의 이벤트 스트림만 추론하면 됩니다.

이 지식을 염두에 두고 이벤트 핸들러를 등록하는 JsonView 후크를 정의해 보겠습니다. 이 후크는 결국 요소에서 jsonview.render를 호출하여 데이터 트리를 렌더링합니다.

import { Socket } from 'phoenix';
import jsonview from '@pgrabovets/json-view';

const JsonViewHook = {
  mounted() {
    this.handleEvent("render_json", ({ data }) => {
      this.el.innerHTML = "";
      const tree = jsonview.create(data);
      jsonview.render(tree, this.el);
    });
  }
}

const liveSocket = new LiveSocket(
  "/live",
  Socket,
  {hooks: { JsonView: JsonViewHook }, ...}
 );
...

로그인 후 복사

우리는 다음과 같은 여러 줄의 코드에서 여러 가지 작업을 수행합니다.

마운트된 함수를 사용하여 JsonViewHook 객체를 정의합니다. 이 후크가 있는 요소가 DOM에 마운트되면 이 함수가 호출됩니다.
mounted 내부에는 "render_json"이라는 사용자 정의 이벤트에 대한 이벤트 리스너를 설정합니다. 이 이벤트는 LiveView에서 실행됩니다.
이벤트가 수신되면 JSON이 포함된 data 매개변수가 렌더링될 것으로 예상합니다.
요소의 기존 콘텐츠를 삭제합니다.
jsonview.create 및 jsonview.render를 사용하여 JSON 데이터를 요소에 렌더링합니다.

이 후크를 사용하려면 후크 이름("JsonView")과 함께 phx-hook 속성을 요소에 추가하면 됩니다.

<div>



<h2>
  
  
  Sending events to the server
</h2>

<p>We’ll just need to trigger an event from the backend to provide this data. We’ll leave this outside the scope of this article for now - perhaps a button could trigger an event to the backend? - but you could use this.pushEvent from the mounted hook like so:<br>
</p>

<pre class="brush:php;toolbar:false">mounted() {
  this.pushEvent("send_json", {});
}

로그인 후 복사

handle_info로 처리할 수 있는 이벤트를 LiveView 서버로 보냅니다. LiveView 문서의 관련 섹션에서는 응답 페이로드를 직접 처리하기 위해 핸들러 함수를 지정할 수 있는 시나리오를 포함하여 this.pushEvent에 대한 더 많은 가능성을 다루고 있습니다.

서버에서 이벤트 보내기

push_event/3은 LiveView에서 브라우저로 이벤트를 푸시하는 방법입니다. 마운트를 포함하여 어느 시점에서든 호출할 수 있지만 이러한 이벤트를 전송하기 전에 페이지와 해당 요소가 알려진 상태인지 확인하는 것이 좋습니다. 그렇지 않으면 페이지 설정 중에 이벤트가 자동으로 삭제됩니다. 이는 예측할 수 없는 확실한 경로입니다!

클라이언트에서 이벤트를 푸시하는 클라이언트로부터 수신할 수 있는 이벤트에 대한 handler_event 절을 작성해 보겠습니다.

def render(assigns) do
  ~H"""
  <p>Hello <%= @name %></p>
  """
 end

로그인 후 복사

그렇습니다! 여기에도 유연성이 있습니다. 클라이언트와 서버 모두에 이벤트 핸들러를 이름으로 등록하면 이벤트 처리와 이벤트 발생 방법이 명확하게 구분됩니다.

추가 통합

클라이언트와 서버 간의 통합에 대한 간단한 예를 살펴보았습니다. 이에 대한 일반적인 확장은 이벤트 매개변수 및 요소 속성을 사용하여 특정 업데이트의 범위를 특정 요소로 지정하는 것입니다. 이는 불필요한 이벤트와 핸들러 작업의 양을 줄이는 데 도움이 됩니다.

이 이벤트 처리를 확장하여 백엔드와 클라이언트측 라이브러리를 더욱 긴밀하게 통합할 수도 있습니다. 예를 들어 일반적으로 이러한 Javascript 라이브러리는 더 높은 수준의 사용자 상호 작용 이벤트를 생성합니다. 우리 라이브러리 예제인 json-view는 이를 수행하지 않지만, Chart.js와 같은 차트 라이브러리는 이를 수행합니다.

그러나 사용자 상호작용 관점에서 처리를 위해 서버를 왕복하는 것은 일반적으로 피해야 합니다. 일반적으로 이벤트 기반 렌더링 업데이트는 클라이언트측 렌더링 라이브러리에서 처리됩니다.

그러나 다른 이유로 사용자 활동을 캡처하는 것이 일반적인 사용 사례입니다. 여기에는 모니터링, 로깅 및 분석이 포함됩니다. 여기에는 응답이 필요하지 않으므로 후크 내 pushEvent는 서버에서 이러한 유형의 비동기 처리에 이상적일 수 있습니다.

결론

DOM에 대한 제어가 필요한 강력한 Javascript 클라이언트측 라이브러리를 통합하는 것은 풍부하고 동적인 사용자 인터페이스를 생성하는 핵심 부분입니다. 모든 페이지 업데이트가 실시간일 필요는 없으므로 LiveView를 유지하면 다른 페이지 상태를 계속 제어할 수 있는 강력하면서도 간단한 방법이 제공됩니다.

LiveView 후크 및 관련 이벤트에 익숙해지면 이를 서버에서 발생하는 데이터와 통합할 수 있습니다. 모든 사용자 상호 작용이 서버 왕복을 필요로 하는 것은 아니며, 강력한 Javascript 라이브러리를 사용하면 구축하는 인터페이스가 더욱 유연하고 반응성이 높아진다는 점을 기억하는 것도 중요합니다.

위 내용은 Phoenix LiveView, 후크 및 push_event: json_view의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!