` 태그 사이의 모든 내용을 삭제합니다. 미리 입력된 코드는 필요하지 않습니다. 이 시점에서 `App`은 거의 비어 있습니다. ``` // App.jsx / App.tsx import * as React from 'react'; export default function App() { return

Hello!

; } ``` 새 `ChatRoom` 인스턴스를 생성하고 `useState` 후크를 사용하여 상태로 전달합니다. 이를 위해서는 `regionOrUrl`(채팅룸이 호스팅되는 AWS 리전) 및`tokenProvider`(이후 단계에서 생성되는 백엔드 인증/권한 부여 흐름에 사용됨)를 전달해야 합니다. **중요**: [Amazon IVS Chat 시작하기](getting-started-chat-create-room.md)에서 방을 생성한 리전과 동일한 AWS 리전을 사용해야 합니다. API는 AWS 리전 서비스입니다. 지원되는 리전 및 Amazon IVS Chat HTTPS 서비스 엔드포인트 목록은 [Amazon IVS Chat 리전](https://docs.aws.amazon.com/general/latest/gr/ivs.html#ivs_region) 페이지를 참조하세요. ``` // App.jsx / App.tsx import React, { useState } from 'react'; import { ChatRoom } from 'amazon-ivs-chat-messaging'; export default function App() { const [room] = useState(() => new ChatRoom({ regionOrUrl: process.env.REGION as string, tokenProvider: () => {}, }), ); return

Hello!

; } ``` ## 토큰 공급자 구축 다음 단계로 `ChatRoom` 생성자에 필요한 파라미터 없는`tokenProvider` 함수를 구축해야 합니다. 먼저, [로컬 인증/권한 부여 서버 설정](#chat-js-rooms-auth-server)에서 설정한 백엔드 애플리케이션에 POST 요청을 하는 `fetchChatToken` 함수를 생성하겠습니다. 채팅 토큰은 SDK가 성공적으로 채팅룸 연결을 설정하는 데 필요한 정보를 포함합니다. Chat API는 사용자의 ID, 채팅룸 내 기능 및 세션 기간을 검증하는 안전한 방법으로 이러한 토큰을 사용합니다. 프로젝트 탐색기에서 `fetchChatToken`이라는 새 TypeScript/JavaScript 파일을 생성합니다. `backend` 애플리케이션에 가져오기 요청을 구축하고 응답에서 `ChatToken` 객체를 반환합니다. 채팅 토큰을 생성하는 데 필요한 요청 본문 속성을 추가합니다. [Amazon 리소스 이름(ARN)](https://docs.aws.amazon.com/IAM/latest/UserGuide/reference-arns.html)에 정의된 규칙을 사용합니다. 이러한 속성은 [CreateChatToken 작업](https://docs.aws.amazon.com//ivs/latest/ChatAPIReference/API_CreateChatToken.html#API_CreateChatToken_RequestBody)에 문서화되어 있습니다. **참고**: 여기서 사용하는 URL은 백엔드 애플리케이션을 실행했을 때 로컬 서버에서 생성한 URL과 동일한 URL입니다. ------ #### [ TypeScript ] ``` // fetchChatToken.ts import { ChatToken } from 'amazon-ivs-chat-messaging'; type UserCapability = 'DELETE_MESSAGE' | 'DISCONNECT_USER' | 'SEND_MESSAGE'; export async function fetchChatToken( userId: string, capabilities: UserCapability[] = [], attributes?: Record, sessionDurationInMinutes?: number, ): Promise { const response = await fetch(`${process.env.BACKEND_BASE_URL}/create_chat_token`, { method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ userId, roomIdentifier: process.env.ROOM_ID, capabilities, sessionDurationInMinutes, attributes }), }); const token = await response.json(); return { ...token, sessionExpirationTime: new Date(token.sessionExpirationTime), tokenExpirationTime: new Date(token.tokenExpirationTime), }; } ``` ------ #### [ JavaScript ] ``` // fetchChatToken.js export async function fetchChatToken( userId, capabilities = [], attributes, sessionDurationInMinutes) { const response = await fetch(`${process.env.BACKEND_BASE_URL}/create_chat_token`, { method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ userId, roomIdentifier: process.env.ROOM_ID, capabilities, sessionDurationInMinutes, attributes }), }); const token = await response.json(); return { ...token, sessionExpirationTime: new Date(token.sessionExpirationTime), tokenExpirationTime: new Date(token.tokenExpirationTime), }; } ``` ------ ## 연결 업데이트 관찰 채팅 앱을 생성하기 위해서는 채팅룸 연결 상태 변화에 대해 필수적으로 대응해야 합니다. 관련 이벤트 구독부터 시작해 보겠습니다. ``` // App.jsx / App.tsx import React, { useState, useEffect } from 'react'; import { ChatRoom } from 'amazon-ivs-chat-messaging'; import { fetchChatToken } from './fetchChatToken'; export default function App() { const [room] = useState( () => new ChatRoom({ regionOrUrl: process.env.REGION as string, tokenProvider: () => fetchChatToken('Mike', ['SEND_MESSAGE']), }), ); useEffect(() => { const unsubscribeOnConnecting = room.addListener('connecting', () => {}); const unsubscribeOnConnected = room.addListener('connect', () => {}); const unsubscribeOnDisconnected = room.addListener('disconnect', () => {}); return () => { // Clean up subscriptions. unsubscribeOnConnecting(); unsubscribeOnConnected(); unsubscribeOnDisconnected(); }; }, [room]); return

Hello!

; } ``` 다음으로 연결 상태를 읽을 수 있는 기능을 제공해야 합니다. `useState` 후크를 사용하여 `App`에서 로컬 상태를 생성하고 각 리스너 내에서 연결 상태를 설정합니다. ------ #### [ TypeScript ] ``` // App.tsx import React, { useState, useEffect } from 'react'; import { ChatRoom, ConnectionState } from 'amazon-ivs-chat-messaging'; import { fetchChatToken } from './fetchChatToken'; export default function App() { const [room] = useState( () => new ChatRoom({ regionOrUrl: process.env.REGION as string, tokenProvider: () => fetchChatToken('Mike', ['SEND_MESSAGE']), }), ); const [connectionState, setConnectionState] = useState('disconnected'); useEffect(() => { const unsubscribeOnConnecting = room.addListener('connecting', () => { setConnectionState('connecting'); }); const unsubscribeOnConnected = room.addListener('connect', () => { setConnectionState('connected'); }); const unsubscribeOnDisconnected = room.addListener('disconnect', () => { setConnectionState('disconnected'); }); return () => { unsubscribeOnConnecting(); unsubscribeOnConnected(); unsubscribeOnDisconnected(); }; }, [room]); return

Hello!

; } ``` ------ #### [ JavaScript ] ``` // App.jsx import React, { useState, useEffect } from 'react'; import { ChatRoom } from 'amazon-ivs-chat-messaging'; import { fetchChatToken } from './fetchChatToken'; export default function App() { const [room] = useState( () => new ChatRoom({ regionOrUrl: process.env.REGION, tokenProvider: () => fetchChatToken('Mike', ['SEND_MESSAGE']), }), ); const [connectionState, setConnectionState] = useState('disconnected'); useEffect(() => { const unsubscribeOnConnecting = room.addListener('connecting', () => { setConnectionState('connecting'); }); const unsubscribeOnConnected = room.addListener('connect', () => { setConnectionState('connected'); }); const unsubscribeOnDisconnected = room.addListener('disconnect', () => { setConnectionState('disconnected'); }); return () => { unsubscribeOnConnecting(); unsubscribeOnConnected(); unsubscribeOnDisconnected(); }; }, [room]); return

Hello!

; } ``` ------ 연결 상태를 구독한 후 연결 상태를 표시하고 `useEffect` 후크 내의 `room.connect` 메서드를 사용하여 채팅룸에 연결합니다. ``` // App.jsx / App.tsx // ... useEffect(() => { const unsubscribeOnConnecting = room.addListener('connecting', () => { setConnectionState('connecting'); }); const unsubscribeOnConnected = room.addListener('connect', () => { setConnectionState('connected'); }); const unsubscribeOnDisconnected = room.addListener('disconnect', () => { setConnectionState('disconnected'); }); room.connect(); return () => { unsubscribeOnConnecting(); unsubscribeOnConnected(); unsubscribeOnDisconnected(); }; }, [room]); // ... return (

Connection State: {connectionState}

); // ... ``` 채팅룸 연결을 성공적으로 구현했습니다. ## 전송 버튼 구성 요소 생성 이 섹션에서는 연결 상태 별로 각기 다른 디자인의 전송(send) 버튼을 생성합니다. 전송 버튼을 사용하면 채팅룸에서 메시지를 쉽게 보낼 수 있습니다. 또한 연결이 끊겼거나 채팅 세션이 만료 등과 같이 메시지를 전송 가능 여부 및 시기를 시각적으로 표시하는 역할을 합니다. 먼저, Chatterbox 프로젝트의 `src` 디렉터리에 새 파일을 생성하고 이름을 `SendButton`로 지정합니다. 그런 다음 채팅 애플리케이션용 버튼을 표시할 구성 요소를 생성합니다. `SendButton`을 내보내고 `App`으로 가져옵니다. 비어 있는 `

` 사이에 ``을 추가합니다. ------ #### [ TypeScript ] ``` // SendButton.tsx import React from 'react'; interface Props { onPress?: () => void; disabled?: boolean; } export const SendButton = ({ onPress, disabled }: Props) => { return (