htmx "hx-sse" 프로그래밍 가이드

2024-04-02

htmx "Attributes"에서 "hx-sse" 프로그래밍

  • connect:<url>: EventSource를 설정할 URL입니다.
  • swap:<eventName>: SSE 메시지 내용을 일치하는 이벤트 이름에서 DOM 노드로 바꿉니다.

SSE 메시지 내용 바꾸기

SSE 연결이 설정되면 (connect 키워드 사용) SSE 메시지 내용은 swap 키워드를 사용하여 DOM으로 바꿀 수 있습니다. 이것은 SSE 연결을 만드는 요소 또는 그 자식 요소에서 수행될 수 있습니다. 여러 요소가 swap을 사용하여 Server Sent Events를 수신 대기할 수 있습니다.

예시:

<div hx-sse="connect:/event_stream swap:eventName">
  ...
</div>

이 예시는 /event_stream 서버 센트 이벤트 스트림에 연결하고 eventName 이라는 이름의 이벤트를 동일한 요소로 바꿉니다.

다른 예시:

<div hx-sse="connect:/event_stream">
  <div hx-sse="swap:eventName1">
    ...
  </div>
  <div hx-sse="swap:eventName2">
    ...
  </div>
</div>

이 예시는 Server Sent Event 스트림을 부모 노드에 연결하고 서버에서 반환한 이벤트 이름에 따라 서로 다른 자식 노드로 이벤트를 전달합니다.

서버 콜백 트리거하기

서버 센트 이벤트 연결이 설정되면 자식 요소는 특수 hx-trigger 구문 sse:<event_name>을 사용하여 이벤트를 수신 대기할 수 있습니다. 이것은 hx-get 또는 이와 유사한 것과 함께 사용되면 요소가 요청을 하도록 트리거합니다.

예시:

<div hx-sse="connect:/event_stream">
  <button hx-get="/update" hx-trigger="sse:update">
    업데이트
  </button>
</div>

이 예시는 /event_stream 서버 센트 이벤트 스트림에 연결하고 "update"라는 이벤트를 수신 대기합니다. 이벤트가 수신되면 "update"라는 이름의 서버 측 엔드포인트로 GET 요청이 트리거됩니다.

참고:

  • htmx 2.0에서는 hx-sse 속성이 확장으로 마이그레이션됩니다. 자세한 내용은 SSE 확장 페이지: URL htmx SSE extension를 참조하십시오.
  • hx-sse는 HTML5에서 지원되지 않습니다. 이 기능을 사용하려면 polyfill이 필요합니다.

추가 정보

  • htmx Attributes: URL htmx Attributes
  • htmx SSE Extension: URL htmx SSE extension
  • Server-Sent Events: URL Server-Sent Events


htmx "hx-sse" 예제 코드

<div hx-sse="connect:/event_stream">
  <p>서버 센트 이벤트 메시지가 여기에 표시됩니다.</p>
</div>

서버 콜백 트리거하기

<div hx-sse="connect:/event_stream">
  <button hx-get="/update" hx-trigger="sse:update">
    업데이트
  </button>
</div>

여러 이벤트 처리

<div hx-sse="connect:/event_stream">
  <div hx-sse="swap:eventName1">
    ...
  </div>
  <div hx-sse="swap:eventName2">
    ...
  </div>
</div>

SSE 확장 사용 (htmx 2.0 이상)

<div hx-sse-ext="connect:/event_stream">
  ...
</div>

참고:

  • 위 코드는 기본적인 예시이며 실제 상황에 맞게 수정해야 합니다.
  • 서버 센트 이벤트 서버는 별도로 구현해야 합니다.


htmx "hx-sse" 대체 방법

Ajax Polling

  • setInterval() 함수를 사용하여 서버에 정기적으로 요청
  • 비효율적이지만 간단한 구현

WebSockets

  • 양방향 통신 가능
  • SSE보다 복잡한 구현

대체 방법 선택 시 고려 사항:

  • 프로젝트의 필요
  • 개발자의 경험
  • 서버 측 기술 스택

각 방법의 장단점:

방법장점단점
hx-sse간편, htmx와 통합htmx 2.0 이하에서만 지원
SSE 라이브러리다양한 기능, 넓은 지원라이브러리 학습 필요
Ajax Polling간단한 구현비효율적
WebSockets양방향 통신 가능복잡한 구현

선택한 방법에 대한 구체적인 예시는 해당 방법의 문서를 참조하십시오.