지난주에 인스턴트 메시지를 표시하도록 htmx를 조정하는 방법에 대해 글을 썼습니다. HTMX를 사용한 지 일주일이 되자 더 많은 것이 필요했습니다. 저는 더 나은 코드 사용성을 위해 일반 HTML 문자열 대신 JSX 구성 요소를 사용하여 서버에서 HTML을 스트리밍하는 더 나은 방법을 원했습니다.

? 빠른 알림: 이 내용이 유용하다고 생각되면 좋아요를 눌러주세요! 귀하의 지원은 제가 더 많은 콘텐츠를 만드는 데 도움이 됩니다.

내가 사용한 도구:

• HTMX
• HTMX 웹소켓 확장
• 백엔드용 Hono
• 웹소켓 - 클라이언트측

아이디어는 간단합니다. 내 대화 구성 요소는 렌더링 시 내 백엔드에 연결되는 hx-ext="ws"를 사용하여 div로 래핑됩니다.

export const Conversation = (props: { messages: Message[] }) => (
  

      

        {props.messages.reverse().map((message) => (
          

            
        ))}
      
      
);

다음으로 중요한 것은 InputMessageForm입니다. 양식에 ws-send를 추가하기만 하면 키가 해당 값과 함께 텍스트 영역의 ID(messageInput)인 메시지를 보냅니다.

export const InputMessageForm = () => (
  

웹소켓 - 서버

Hono 서버의 전체 코드 블록은 다음과 같습니다. 연결 열기 및 닫기에 대한 일부 콘솔 로그입니다. onMessage는 마법이 일어나는 곳입니다.

get(
    '/chatroom-ws',
    upgradeWebSocket((c) => {
      return {
        onOpen: () => {
          console.log('WS Connection open');
        },
        onClose: () => {
          console.log('WS Connection closed');
        },
        onMessage: async (event, ws) => {
          const { userMessage } = JSON.parse(event.data.toString());
          console.log('Got user message', userMessage);
          const inputArea = await c.html(
            

              
,
          );
          ws.send(await inputArea.text());
          const htmlUser = await c.html(
            

              
,
          );
          ws.send(await htmlUser.text());
          const response = await talk(userMessage);
          const htmlAgent = await c.html(
            

              
,
          );
          ws.send(await htmlAgent.text());
        },
      };
    }),
);

따라서 흐름은 다음과 같습니다.

1. 문의 받기
2. 깨끗하게 만들기 위해 빈 채로 반송하세요. 지정된 hx-swap-oob가 없으므로 기본적으로 True입니다. 이는 id=query-submit-form인 요소를 찾아 교체한다는 의미입니다.
3. 사용자 메시지와 함께 구성요소를 다시 보냅니다. 여기서 hx-swap-oob는 beforeend로 지정됩니다. 이는 단순히 기존 메시지에 추가된다는 의미입니다.
4. 대화 → 여기에 논리가 있습니다. AI 어시스턴트와 대화 중이어서 외부 API 호출을 하고 있습니다.
5. 어시스턴트 답변이 포함된 구성요소를 다시 보냅니다. 3단계와 동일하지만 구성요소가 다릅니다.

내가 발견한 문제

답변을 보내는 것은 문서가 흠... 이해하기 쉽지 않기 때문에 약간 문제가 있었습니다. 이 문제를 해결하기 위해 생성된 문제도 있습니다: 웹소켓 확장에 대한 문서 개선. 그것은 나에게 많은 도움이 되었습니다!

따라서 가장 중요한 것은:

교체하려는 항목과 동일한 ID를 가진 HTML로 구문 분석되는 문자열을 다시 보내야 합니다!

그래서 문제는 nr입니다. 1

실수로 다음과 같은 내용을 보냈습니다.

JSON.stringify('
test 123
')
// '"
test 123
"'

틀렸습니다. ID와 이스케이프 문자를 참고하세요! 여기서 문자열을 문자열화하지 마세요.

문제 번호. 2

뭔가를 반환하면 원하는 곳으로 교환될 것이라고 생각할 수도 있습니다. 정확히는 아닙니다. 첫 번째 div는 HTMX에서 수행할 작업에 대한 정보입니다. 적어도 나는 이것을 이렇게 이해합니까?.

다음과 같이 html을 반환합니다.

Only는 클라이언트 측의 기존

최종 결과

https://assets.super.so/c0fc84d8-fb32-4194-8758-4be657666aab/videos/c814dcd2-b9e9-4bb2-b8db-2ed9cd7819b7/lucy-chat-example.mov

? 이 게시물이 도움이 되었나요? 좋아요 버튼을 스팸으로 눌러주세요! 당신의 지원은 대단합니다. 감사해요!

더 알고 싶으십니까?

더 많은 통찰력과 튜토리얼을 기대해주세요! 내 블로그를 방문하시겠습니까?