기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
# Amazon GameLift Streams 백엔드 서비스 및 웹 클라이언트
Amazon GameLift Streams를 사용하면 웹 브라우저를 통해 애플리케이션을 스트리밍할 수 있습니다. Amazon GameLift Streams 웹 SDK를 사용하여 백엔드 스트리밍 서비스를 설정할 수 있습니다. 그런 다음 최종 사용자는 웹 클라이언트를 통해 스트림에 연결합니다. 클라우드를 통해 게임을 플레이하거나 애플리케이션과 상호 작용할 수 있습니다.
Amazon GameLift Streams 웹 SDK에는 백엔드 서비스 생성을 시작하는 데 사용할 수 있는 샘플 백엔드 서버와 샘플 웹 클라이언트가 포함되어 있습니다. 또한 이러한 샘플을 사용하여 추가 개발 없이 Amazon GameLift Streams가 스트리밍되는 방식을 테스트할 수 있습니다. 시작하려면 단원을 참조하십시오[Amazon GameLift Streams를 사용하여 웹 서버 및 클라이언트 설정](setting-up-web-sdk.md).
**Topics**
+ [지원되는 브라우저 및 입력](sdk-browsers-input.md)
+ [필수 포트](required-ports.md)
+ [Amazon GameLift Streams를 사용하여 웹 서버 및 클라이언트 설정](setting-up-web-sdk.md)
+ [스트림 모양 사용자 지정](sdk-stream-appearance.md)
+ [로캘 기본 설정](sdk-locale-support.md)
+ [마우스 이동 처리](sdk-mouse-movement.md)
+ [애플리케이션과 웹 클라이언트 간의 데이터 채널 통신](data-channels.md)
# 지원되는 브라우저 및 입력
다음은 Amazon GameLift Streams 스트림 및 호환되는 입력 주변 장치를 보는 데 지원되는 플랫폼 및 브라우저입니다. 브라우저는 H.264라고도 하는 고급 비디오 코딩(AVC)과도 호환되어야 합니다.
전반적으로 최상의 최종 사용자 경험과 특히 게임 컨트롤러와의 호환성을 극대화하려면 Google Chrome, Microsoft Edge 또는 사용자 지정 Chromium 기반 데스크톱 애플리케이션을 사용하는 것이 좋습니다.
어떤 컨트롤러가 어떤 브라우저와 호환되는지에 대한 자세한 내용은 [Web Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API)를 참조하세요. Amazon GameLift Streams에는 일부 지침이 적용되지 않을 수 있지만 대부분의 게임 컨트롤러가 Bluetooth를 통해 성공적으로 연결될 것으로 예상됩니다.
[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ko_kr/gameliftstreams/latest/developerguide/sdk-browsers-input.html)
## 알려진 문제
다음은 브라우저 및 입력과 관련하여 알려진 문제입니다.
+ Safari는를 누를 때마다 즉시 전체 화면을 종료`Esc`합니다. 재정의할 수 없습니다.
+ LinkedIn, Yelp, Instagram 등과 같은 모바일 앱 내부와 같은 “임베디드” 또는 “앱 내” 브라우저 뷰는 iOS에서 지원되지 않습니다. 이는 실시간 대화형 스트리밍에 필요한 브라우저 WebRTC 지원을 비활성화하는 경향이 있습니다. 비표준 브라우저 문자열을 감지하고 사용자에게 Safari에서 열라는 메시지를 표시하는 것이 좋습니다.
+ 애플리케이션의 화면 해상도가 1080p로 설정되지 않은 경우 마우스 추적이 영향을 받을 수 있습니다. 가능하면 다른 해상도 선택을 비활성화하는 것이 좋습니다. 윈도우 모드는 비활성화하고 전체 화면에서만 실행하는 것이 좋습니다.
+ 기본 Linux 애플리케이션에서 게임 컨트롤러를 지원하지 않음에도 불구하고 Proton에서 게임 컨트롤러의 플러그 앤 플레이를 지원하기 위해 Proton 런타임 환경에서 실행되는 게임은 클라이언트에 연결된 게임 컨트롤러가 없는 경우에도 *항상* 연결된 상태로 표시됩니다. 이는 컨트롤러가 유휴 상태이고 사용되지 않은 경우에도 컨트롤러 입력을 묻는 게임의 경우 문제가 될 수 있습니다. 게임은 마지막 입력 방법을 기반으로 입력 UI를 표시하는 것이 좋습니다.
## 제한 사항
+ Ubuntu 22.04 LTS를 제외한 대부분의 런타임 환경은 게임 컨트롤러를 지원합니다. 게임 컨트롤러 지원이 필요한 경우 다른 런타임 환경을 사용하여 게임을 생성하는 것이 좋습니다. 다른 런타임 환경 목록은 섹션을 참조하세요[런타임 환경](configuration-options.md#configuration-options-runtime).
+ PlayStation 5 및 Luna 게임 컨트롤러는 Firefox에서 지원되지 않습니다.
+ 햅틱 피드백 지원:
+ PlayStation 4 및 Xbox 시리즈 S/X 컨트롤러에 대한 햅틱 피드백은 Chrome, Edge 및 Safari에서 지원됩니다.
+ PlayStation 5 DualSense 컨트롤러의 햅틱은 Safari 브라우저에서만 지원됩니다.
+ Firefox는 컨트롤러에 대한 햅틱 피드백을 지원하지 않습니다.
+ Android 및 iOS 디바이스는 컨트롤러에 대한 햅틱 피드백을 지원하지 않습니다.
+ Amazon GameLift Streams 콘솔의 **스트림 테스트** 기능은 마이크를 지원하지 않습니다.
## IPv6 지원
IPv6-only 클라이언트로의 스트리밍은 Windows 런타임 애플리케이션에서만 지원됩니다.
| 런타임 | IPv4를 통한 스트리밍 | IPv6를 통한 스트리밍 |
| --- | --- | --- |
| Microsoft Windows Server 2022 Base | 예 | 예 |
| Ubuntu 22.04 LTS | 예 | 아니요 |
| Proton 런타임 | 예 | 아니요 |
# 필수 포트
Amazon GameLift Streams를 통합하려면 네트워크 인프라에 필요한 포트가 열려 있고 액세스할 수 있는지 확인합니다. 다음은 Amazon GameLift Streams와 통신하기 위해 네트워크에서 열려야 하는 포트 목록입니다.
| 포트 | 프로토콜 | 용도 |
| --- | --- | --- |
| 443 | (HTTPS) TCP | Amazon GameLift Streams를 포함한 AWS APIs |
| 33435-33465 | UDP | 웹 RTC |
# Amazon GameLift Streams를 사용하여 웹 서버 및 클라이언트 설정
이 자습서에서는 Amazon GameLift Streams의 스트리밍 서비스를 통합하는 웹 클라이언트 애플리케이션을 설정합니다. 그런 다음 Amazon GameLift Streams 웹 SDK, JavaScript 라이브러리 및 시작할 수 있는 샘플 코드를 사용합니다. 샘플 코드에는 간단한 Amazon GameLift Streams 백엔드 웹 서버와 간단한 웹 클라이언트가 포함되어 있습니다. 이 자습서를 마치면 샘플 코드를 사용하여 스트림을 시작할 수 있습니다.
Amazon GameLift Streams를 처음 사용하는 경우 [Amazon GameLift Streams에서 첫 번째 스트림 시작](streaming-process.md)자습서부터 시작하는 것이 좋습니다. 자습서에서는 Amazon S3에 게임을 업로드하고 브라우저의 Amazon GameLift Streams 콘솔 내에서 스트리밍을 테스트하는 방법을 안내합니다.
## 사전 조건
+ 프로그래밍 방식 액세스를 위한 적절한 자격 증명이 있는 AWS 계정입니다. 자세한 내용은 [Amazon GameLift Streams를 개발자로 설정](setting-up.md) 단원을 참조하십시오.
+ AWS SDK.
+ Amazon GameLift Streams 지원 웹 브라우저 - 섹션을 참조하세요[지원되는 브라우저 및 입력](sdk-browsers-input.md).
+ Node.js - [Node.js 다운로드 페이지를 참조하세요](https://nodejs.org/en/download).
## 웹 SDK 다운로드
이 자습서에서는 [제품 시작하기 페이지의 리소스 섹션에서](https://aws.amazon.com/gamelift/streams/getting-started/) 다음 자료를 다운로드해야 합니다.
+ **Amazon GameLift Streams 웹 SDK 번들**: 여기에는 간단한 백엔드 서비스 및 웹 클라이언트에 대한 샘플 코드가 포함됩니다.
+ **Amazon GameLift Streams Web SDK API 참조**:이 API 참조는 JavaScript용 Amazon GameLift Streams API 래퍼를 문서화합니다.
## 스트리밍 리소스 설정
스트림을 시작하려면 애플리케이션과 스트림 그룹인 스트림 리소스가 있어야 합니다. 특히 다음이 있어야 합니다.
+ **준비** 상태인 애플리케이션입니다.
+ 사용 가능한 스트림 용량이 있는 **활성** 상태의 스트림 그룹입니다.
+ 기본 위치가 아닌 다른 위치에서 스트리밍하려면 애플리케이션이 해당 위치로 복제를 완료했어야 합니다.
Amazon GameLift Streams 콘솔 또는 Amazon GameLift Streams CLI를 사용하여 애플리케이션과 스트림 그룹을 설정하려면 [Amazon GameLift Streams 스트림 그룹을 사용하여 스트리밍 관리](stream-groups.md)각각 [Amazon GameLift Streams에서 애플리케이션 준비](applications.md) 및 섹션을 참조하세요. 또는 Amazon GameLift Streams 콘솔의 end-to-end 연습은 섹션을 참조하세요[Amazon GameLift Streams에서 첫 번째 스트림 시작](streaming-process.md).
## 백엔드 서버 설정
백엔드 서버는 최종 사용자를 대신하여 사용자 인증, 스트림 파라미터 구성, Amazon GameLift Streams 서비스 API 호출 수행과 같은 작업을 처리합니다. 이 설정에 대해 자세히 알아보려면 샘플 코드와 Amazon GameLift Streams Web SDK API 참조를 검토하세요. 특히 Amazon GameLift Streams Web SDK 패키지의 server.js 파일을 참조하세요.
**중요**
이 코드는 테스트 및 평가 목적으로만 사용되는 예제 코드이며 프로덕션 용량에 사용해서는 안 됩니다.
**샘플 백엔드 서비스를 실행하려면**
1. 터미널 또는 명령 프롬프트를 열고 폴더로 이동합니다`AmazonGameLiftStreamsWebSDK\GameLiftStreamsSampleGamePublisherService\`.
1. 다음 명령을 실행합니다.
```
npm install
node server.js
```
샘플 백엔드 서비스를 실행하면 최종 사용자가 웹 클라이언트를 통해 스트림에 연결할 수 있습니다. 다음 단계에서 웹 클라이언트를 테스트합니다.
## 웹 클라이언트 시작
웹 클라이언트 애플리케이션은 Amazon GameLift Streams 스트림을 수신 및 디코딩하고, 최종 사용자에게 스트리밍하고, 최종 사용자가 애플리케이션에 참여할 수 있도록 웹 브라우저 UI를 제공하는 역할을 합니다. JavaScript Amazon GameLift Streams Web SDK를 자체 웹 클라이언트 애플리케이션에 통합하는 방법에 대해 자세히 알아보려면 샘플 코드와 Amazon GameLift Streams Web SDK API 참조를 검토하세요. 특히 Amazon GameLift Streams 웹 SDK 패키지`public/index.html`의 섹션을 참조하세요. 브라우저에서 웹 클라이언트를 시작할 때 웹 페이지 소스를 볼 수도 있습니다.
**참고**
Amazon GameLift Streams의 Windows 런타임은 IPv4 또는 IPv6를 통한 스트림 세션을 지원합니다. 그러나 Linux 및 Proton 런타임 환경은 IPv4를 통한 스트리밍만 지원합니다.
**웹 클라이언트 애플리케이션을 시작하려면**
1. 웹 브라우저를 열고 로 이동합니다`http://localhost:port/`. 포트 번호는 백엔드 서버에서 설정합니다. 기본적으로 HTTP 포트 8000입니다.
1. 게임을 플레이하거나 소프트웨어를 사용합니다.
1. 마우스와 같은 입력을 연결하려면 **입력 연결을** 선택합니다.
1. 게임을 종료하려면 **Esc** 키를 선택합니다.
1. 서버 프로세스를 중지하려면 **Ctrl\$1C** 키를 선택합니다.
## 스트리밍 리소스 정리
**주의**
스트림 그룹에 스트리밍 용량이 할당되면 해당 용량이 사용되지 않더라도 비용이 발생합니다. 불필요한 비용을 방지하려면 스트림 그룹을 필요한 크기로 조정하세요. 개발 중에는 사용하지 않을 때 스트림 그룹의 상시 가동 용량과 대상 유휴 용량을 0으로 조정하는 것이 좋습니다. 자세한 정보는 [스트림 그룹을 0 용량으로 확장](pricing.md#pricing-pause-stream-groups) 섹션을 참조하세요.
자습서를 완료하고 더 이상 애플리케이션을 스트리밍할 필요가 없는 경우 다음 단계에 따라 Amazon GameLift Streams 리소스를 정리합니다.
**스트림 그룹 삭제**
스트림 그룹을 삭제하면 Amazon GameLift Streams가 모든 스트림 용량을 해제합니다.
**Amazon GameLift Streams 콘솔을 사용하여 스트림 그룹을 삭제하려면**
1. 에 로그인 AWS Management Console 하고 [Amazon GameLift Streams 콘솔](https://console.aws.amazon.com/gameliftstreams/)을 엽니다.
1. 기존 스트림 그룹 목록을 보려면 탐색 창에서 **스트림 그룹을** 선택합니다.
1. 삭제할 스트림 그룹의 이름을 선택합니다.
1. 스트림 그룹 세부 정보 페이지에서 **삭제**를 선택합니다.
1. **삭제** 대화 상자에서 삭제 작업을 확인합니다.
Amazon GameLift Streams는 컴퓨팅 리소스를 해제하고 스트림 그룹을 삭제하기 시작합니다. 이 시간 동안 스트림 그룹은 **삭제** 중 상태입니다. Amazon GameLift Streams가 스트림 그룹을 삭제한 후에는 더 이상 검색할 수 없습니다.
**애플리케이션 삭제**
다음 조건을 충족하는 애플리케이션만 삭제할 수 있습니다.
+ 애플리케이션이 **준비 완료** 또는 **오류** 상태입니다.
+ 진행 중인 스트림 세션에서는 애플리케이션이 스트리밍되지 않습니다. 클라이언트가 스트림 세션을 종료할 때까지 기다리거나 Amazon GameLift Streams API에서 [TerminateStreamSession](https://docs.aws.amazon.com/gameliftstreams/latest/apireference/API_TerminateStreamSession.html)을 직접적으로 호출하여 스트림을 종료해야 합니다.
애플리케이션이 스트림 그룹에 연결된 경우 애플리케이션을 삭제하기 전에 모든 관련 스트림 그룹에서 연결을 해제해야 합니다. 콘솔에서 이 프로세스를 안내하는 대화 상자가 나타납니다.
**Amazon GameLift Streams 콘솔을 사용하여 애플리케이션을 삭제하려면**
1. 에 로그인 AWS Management Console 하고 [Amazon GameLift Streams 콘솔](https://console.aws.amazon.com/gameliftstreams/)을 엽니다.
1. 탐색 모음에서 **애플리케이션을** 선택하여 기존 애플리케이션 목록을 봅니다. 삭제할 애플리케이션을 선택합니다.
1. 애플리케이션 세부 정보 페이지에서 **삭제**를 선택합니다.
1. **삭제** 대화 상자에서 삭제 작업을 확인합니다.
Amazon GameLift Streams가 애플리케이션 삭제를 시작합니다. 이 시간 동안 애플리케이션은 `Deleting` 상태입니다. Amazon GameLift Streams가 애플리케이션을 삭제한 후에는 더 이상 검색할 수 없습니다.
# 스트림 모양 사용자 지정
## 화면 로드
고객이 스트림을 보기 위해 웹 브라우저를 열면 웹 클라이언트가 Amazon GameLift Streams 스트림 세션에 대한 연결을 설정하기 시작합니다. 스트림 세션이 로드되는 동안 사용자 지정 배경과 로고를 고객 화면에 표시할 수 있습니다.
`GameLiftStreamsSampleGamePublisherService/public/LoadingScreen/loadingscreen.js` 파일의 Amazon GameLift Streams Web SDK 샘플 클라이언트는 프런트 엔드 웹 클라이언트에서 애니메이션 로고를 구현하는 방법을 보여줍니다. 기본 로드 화면은 배경과 전경이라는 2개의 이미지로 구성됩니다. 포그라운드 이미지는 중간에 위치하며 펄스 애니메이션이 있습니다. 애니메이션은 스트림 세션이 연결되어 있는 동안에만 재생됩니다.
**로딩 화면을 활성화하려면**
1. Amazon GameLift Streams Web SDK 샘플 클라이언트에서 `GameLiftStreamsSampleGamePublisherService/public/LoadingScreen/` 폴더로 이동합니다.
1. 기본 이름인 및를 사용하여 배경 `Background.png` 및 전경 이미지를 추가합니다`LoadingLogo.png`. 이름을 바꾸거나 다른 이미지 형식을 사용하려면에서 코드를 업데이트해야 합니다`GameLiftStreamsSampleGamePublisherService/public/loadingscreen.js`.
1. (선택 사항)에서 JavaScript 코드를 `GameLiftStreamsSampleGamePublisherService/public/loadingscreen.js`업데이트하여 다양한 애니메이션을 구현합니다.
# 로캘 기본 설정
Amazon GameLift Streams에서 스트림당 로캘 기본 설정을 지정할 수 있습니다. 이는 애플리케이션이 시간 또는 통화와 같은 최종 사용자의 운영 체제에서 위치별 정보를 검색하는 경우에 유용합니다.
Amazon GameLift Streams는 다음 언어를 지원합니다.
| 값 | 설명 |
| --- | --- |
| `en_US` | 미국 영어(기본값) |
| `ja_jp.UTF-8` | 일본어 |
**로캘 설정을 변경하려면**
Amazon GameLift Streams API를 사용하여 [StartStreamSession](https://docs.aws.amazon.com/gameliftstreams/latest/apireference/API_StartStreamSession.html)을 호출할 때를 `LANG=`에 추가합니다`AdditionalEnvironmentVariables`. 로캘 기본 설정은 사용자별로 고유하므로 스트림 세션 수준에서 설정합니다. 이를 설정하지 않으면 스트림은 기본적으로 미국 영어를 사용합니다.
**Example 예제**
```
aws gameliftstreams start-stream-session \
--identifier arn:aws:gameliftstreams:us-west-2:123456789012:streamgroup/1AB2C3De4 \
--protocol WebRTC \
--signal-request "[webrtc-ice-offer json string]" \
--user-id xnshijwh \
--additional-environment-variables '{"LANG": "ja_JP.UTF-8"}'
```
# 마우스 이동 처리
마우스 이동 처리는 스트리밍된 애플리케이션에서 응답성이 뛰어나고 직관적인 사용자 경험을 제공하는 데 매우 중요합니다. Amazon GameLift Streams는 애플리케이션의 커서 동작에 따라 마우스 입력 전송을 자동으로 최적화하여 커서가 숨겨져 있든 보이지 않든 마우스 움직임이 자연스럽게 느껴지도록 합니다. Amazon GameLift Streams가 마우스 이벤트를 처리하는 방법을 이해하면 스트리밍 서비스와 원활하게 작동하고 최상의 사용자 경험을 제공하는 애플리케이션을 설계하는 데 도움이 됩니다.
## 마우스 입력 모드
Amazon GameLift Streams는 마우스 이벤트를 애플리케이션에 전송하기 위해 두 가지 고유한 모드를 사용하며, 커서 가시성에 따라 적절한 모드를 자동으로 선택합니다.
상대 모드
상대 모드에서 마우스 업데이트는 이전 위치와의 작은 증분 차이로 전송됩니다. 이 모드는 3D 방향을 사용하는 1인칭 슈팅 게임(FPS) 또는 인터페이스와 같이 정확하고 지속적인 마우스 움직임 추적이 필요한 애플리케이션에 적합합니다. Amazon GameLift Streams는 운영 체제 커서가 숨겨지거나 완전히 투명한 경우 상대 모드를 사용합니다.
절대 모드
절대 모드에서 마우스 커서 위치는 정확한 화면 좌표로 전송됩니다. 이 모드는 point-and-click 게임 또는 클릭 가능한 요소가 있는 UI와 같이 정확한 커서 위치 지정에 의존하는 애플리케이션에 적합합니다. Amazon GameLift Streams는 애플리케이션에 사용자 지정 커서 이미지가 표시되더라도 운영 체제 커서가 표시될 때 절대 모드를 사용합니다.
이 자동 선택은 수동 구성 없이도 다양한 애플리케이션 유형에 최적의 성능을 보장합니다.
## 포인터 잠금
포인터 잠금은 특정 요소 내에서 마우스 커서를 캡처하여 커서를 숨기고 지정된 영역을 벗어나지 못하게 하는 웹 API 기능입니다. 이 기능은 눈에 보이는 커서의 방해나 창 가장자리 도달 제한 없이 카메라 제어 또는 조준을 위해 무제한 마우스 이동이 필요한 게임에 특히 유용합니다.
Amazon GameLift Streams는 웹 SDK `InputConfiguration` 인터페이스의 `autoPointerLock` 속성을 통해 자동 포인터 잠금 기능을 제공합니다. 이 기능은 [requestPointerLock API](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestPointerLock)와 통합되어 직관적이고 컨텍스트를 인식하는 마우스 캡처를 제공합니다.
### 자동 포인터 잠금 동작
Amazon GameLift Streams는 애플리케이션이 전체 화면이고 스트림 호스트에서 원격 커서가 보이지 않을 때 포인터 잠금을 자동으로 활성화합니다. 이 동작은 일반적인 게임 개발 패턴과 잘 일치합니다.
+ **FPS/TPS 게임 및 3D 방향 제어** - 포인터가 자동으로 잠기고 커서가 숨겨져 FPS 게임 플레이에 필수적인 무제한 카메라 제어를 제공합니다.
+ **Point-and-click 게임 및 UI 제어 -** 게임에서 메뉴 상호 작용 또는 전략 게임 플레이에 커서를 표시하면 포인터가 계속 표시되고 잠금 해제되어 의도한 사용자 경험을 유지합니다.
### 구성 옵션
`autoPointerLock` 속성은 다음 값을 허용합니다.
`true`
마우스는 원격 커서가 보이지 않을 때 항상 캡처됩니다.
`false`
마우스는 커서 가시성에 관계없이 캡처되지 않습니다.
`'fullscreen'`(기본값)
마우스는 비디오 요소가 전체 화면 모드이고 원격 커서가 보이지 않는 경우에만 캡처됩니다.
**중요**
`autoPointerLock`는 플랫폼 제한으로 인해 Safari 브라우저 또는 iOS 플랫폼에 영향을 주지 않습니다.
## 모범 사례
스트리밍된 애플리케이션에서 최적의 마우스 처리를 보장하려면:
+ **항상 전체 화면 스트리밍** - 서비스에서 제대로 작동하려면 애플리케이션이 이미 전체 화면 모드로 실행 중이어야 합니다. 또한 브라우저 지원을 사용하여 스트림을 최상의 최종 사용자 경험을 위한 전체 화면 요소로 만드는 것이 좋습니다. 이렇게 하면 시스템 커서와 소프트웨어 커서 간의 정렬 문제와 같은 문제를 방지하는 데 도움이 됩니다.
+ **상대 모션에 대한 커서 숨기기** - 애플리케이션에서 상대 마우스 모션(예: FPS 스타일 카메라 제어 또는 드래그 기반 상호 작용)이 필요한 경우 이러한 상호 작용 중에 운영 체제 커서를 숨깁니다. 일부 시나리오에서는 마우스 아래로 커서를 숨기고 마우스 위로 커서를 다시 표시해야 할 수 있습니다.
+ **절대 위치 지정을 위한 커서 표시** - 애플리케이션에 UI 상호 작용을 위한 정확한 커서 위치가 필요한 경우 절대 좌표 모드를 활성화하기 위해 운영 체제 커서가 계속 표시되는지 확인합니다.
+ **다양한 입력 시나리오 테스트** - Amazon GameLift Streams가 커서 가시성 변경에 따라 모드 간에 전환할 수 있으므로 애플리케이션이 상대적 마우스 모드와 절대 마우스 모드를 모두 올바르게 처리하는지 확인합니다.
+ **다양한 창 모드 테스트** - 해당하는 경우 창 모드와 전체 화면 모드 모두에서 애플리케이션의 마우스 처리를 테스트합니다. 입력 구성에 가장 적합한 `autoPointerLock` 설정을 결정합니다.
# 애플리케이션과 웹 클라이언트 간의 데이터 채널 통신
데이터 채널을 사용하면 Amazon GameLift Streams 애플리케이션과 웹 클라이언트(최종 사용자의 웹 브라우저에서 실행되는 JavaScript 코드) 간에 임의의 메시지를 안전하게 전달할 수 있습니다. 이를 통해 최종 사용자는 스트림을 보고 있는 웹 브라우저를 통해 Amazon GameLift Streams가 스트리밍하는 애플리케이션과 상호 작용할 수 있습니다.
다음은 Amazon GameLift Streams의 데이터 채널 사용 사례의 예입니다.
+ 사용자는 로컬 브라우저에서 애플리케이션에서 URLs 열 수 있습니다.
+ 사용자는 클립보드의 콘텐츠를 애플리케이션에 앞뒤로 전달할 수 있습니다.
+ 사용자는 로컬 시스템에서 애플리케이션으로 콘텐츠를 업로드할 수 있습니다.
+ 개발자는 애플리케이션에 명령을 보내는 브라우저에서 UI를 구현할 수 있습니다.
+ 사용자는 스키마를 전달하여 시각화 계층의 표시를 제어할 수 있습니다.
## Features
**메시지 크기 제한**
Amazon GameLift Streams Web SDK는 메시지당 최대 64KB(65536바이트)의 크기 제한을 적용합니다. 이렇게 하면 메시지 크기 제한이 대부분의 브라우저와 호환되고 통신이 스트림의 총 대역폭에 미치는 영향이 낮아집니다.
**지표**
스트림 세션이 종료되면 데이터 채널 사용량에 대한 지표가 AWS 계정으로 전송됩니다. 자세한 내용은 Amazon GameLift 스트림 모니터링 섹션[데이터 채널](monitoring-cloudwatch.md#monitoring-data-channels)의 섹션을 참조하세요. * GameLift *
## 데이터 채널 사용
Amazon GameLift Streams Web SDK는 메시지를 애플리케이션에 바이트 배열로 전송하는 `sendApplicationMessage` 함수를 제공합니다. 메시지는 `clientConnection.applicationMessage` 사용자가 정의한 콜백 함수에 의해 처리됩니다.
애플리케이션이 데이터 채널 포트에 연결되기 전에 클라이언트가 메시지를 보내면 메시지가 대기열에 추가됩니다. 그런 다음 애플리케이션이 연결되면 메시지를 수신합니다. 그러나 클라이언트가 데이터 채널 포트에 연결하기 전에 애플리케이션이 메시지를 보내면 메시지가 손실됩니다. 애플리케이션은 메시지를 보내기 전에 클라이언트의 연결 상태를 확인해야 합니다.
## 클라이언트 측에서
웹 클라이언트 애플리케이션에 다음 코드를 작성합니다.
1. 애플리케이션에서 수신 메시지를 수신할 콜백 함수를 정의합니다.
```
function streamApplicationMessageCallback(message) {
console.log('Received ' + message.length + ' bytes of message from
Application');
}
```
1. 콜백 함수`clientConnection.applicationMessage`로 설정합니다.
```
clientConnection: {
connectionState: streamConnectionStateCallback,
channelError: streamChannelErrorCallback,
serverDisconnect: streamServerDisconnectCallback,
applicationMessage: streamApplicationMessageCallback,
}
```
1. `GameLiftStreams.sendApplicationMessage` 함수를 호출하여 애플리케이션에 메시지를 보냅니다. 스트림 세션이 활성 상태이고 입력이 연결되어 있는 한 언제든지 이를 호출할 수 있습니다.
예를 들어 클라이언트 측에서 간단한 데이터 채널을 설정하는 방법을 보여주는 Amazon GameLift Streams Web SDK 샘플 클라이언트를 참조하세요.
## 애플리케이션 측에서
애플리케이션에 다음 로직을 작성합니다.
### 1단계. 데이터 채널 포트에 연결
애플리케이션이 시작되면 `40712`의 포트에 연결합니다`localhost`. 애플리케이션은 전체 실행 기간 동안이 연결을 유지해야 합니다. 애플리케이션이 연결을 닫으면 다시 열 수 없습니다.
### 2단계. 이벤트 수신 대기
이벤트는 고정 크기 헤더로 시작한 다음 가변 길이 관련 데이터로 시작합니다. 애플리케이션이 이벤트를 수신하면 이벤트를 구문 분석하여 정보를 검색합니다.
**이벤트 형식**
+ **헤더**: 양식의 4바이트 헤더 `abcc`
+ `a` : 클라이언트 ID 바이트입니다. 이는 여러 연결의 경우(연결 해제 및 재연결로 인해) 특정 클라이언트 연결을 식별합니다.
+ `b` : 이벤트 유형 바이트. `0` - 클라이언트 연결됨, `1` - 클라이언트 연결 해제됨, `2` - 클라이언트에서 메시지가 전송됩니다. 향후 Amazon GameLift Streams 서비스 업데이트 시 다른 이벤트 유형이 수신될 수 있으므로 무시해야 합니다.
+ `cc` : 연결된 이벤트 데이터의 길이입니다. 이는 빅 엔디안 순서가 있는 2바이트로 표시됩니다(첫 번째 바이트가 가장 중요함). 이벤트 유형이 2인 경우 이벤트 데이터는 클라이언트의 메시지 콘텐츠를 나타냅니다.
+ **데이터**: 나머지 바이트에는 클라이언트 메시지와 같은 이벤트 데이터가 포함됩니다. 데이터 길이는 헤더`cc`에 로 표시됩니다.
**이벤트를 수신하려면**
1. 네 개의 헤더 바이트를 읽고 이벤트 데이터의 클라이언트 ID, 이벤트 유형 및 길이를 검색합니다.
1. 헤더에 설명된 길이에 따라 클라이언트 ID 및 이벤트 유형에 관계없이 가변 길이 이벤트 데이터를 읽습니다. 이벤트 데이터가 버퍼에 남아 다음 이벤트 헤더와 혼동되지 않도록 데이터를 조건 없이 읽는 것이 중요합니다. 이벤트 유형에 따라 데이터 길이를 가정하지 마십시오.
1. 애플리케이션에서 인식하는 경우 이벤트 유형에 따라 적절한 조치를 취합니다. 이 작업에는 수신 연결 또는 연결 해제 로깅 또는 클라이언트 메시지 구문 분석과 애플리케이션 로직 트리거가 포함될 수 있습니다.
### 3단계. 클라이언트로 메시지 전송
애플리케이션은 수신 이벤트에서 사용하는 것과 동일한 4바이트 헤더 형식의 메시지를 전송해야 합니다.
**클라이언트에 메시지를 전송하려면**
1. 다음 속성을 사용하여 헤더를 작성합니다.
1. `a` : 클라이언트 ID 바이트입니다. 메시지가 클라이언트 메시지에 대한 응답인 경우 이전 클라이언트 연결에서 새로 다시 연결된 클라이언트로 응답을 전달하는 것과 같은 경쟁 조건을 방지하기 위해 수신 클라이언트 메시지와 동일한 클라이언트 ID를 재사용해야 합니다. 애플리케이션이 클라이언트에 원치 않는 메시지를 보내는 경우 가장 최근의 "클라이언트 연결" 이벤트(이벤트 유형 0)와 일치하도록 클라이언트 ID를 설정해야 합니다.
1. `b` : 발신 메시지의 이벤트 유형은 항상 2여야 합니다. 클라이언트는 다른 이벤트 유형의 메시지를 무시합니다.
1. `cc` : 메시지 길이, 바이트 단위.
1. 메시지 바이트를 작성합니다.
클라이언트가 연결 해제되지 않는 한 메시지는 지정된 클라이언트로 전송됩니다. 연결이 해제된 클라이언트가 다시 연결되면 클라이언트 연결 이벤트를 통해 새 클라이언트 ID가 할당됩니다. 이전 클라이언트 ID에 대한 전송되지 않은 메시지는 모두 삭제됩니다.
**Example**
다음 의사 코드는 애플리케이션 측에서 메시지를 통신하는 로직을 보여줍니다. Winsock을 사용하는 전체 예제는 Windows 소켓 2 설명서의 [Winsock 클라이언트 코드 완료](https://learn.microsoft.com/en-us/windows/win32/winsock/complete-client-code)를 참조하세요.
```
connection = connect_to_tcp_socket("localhost:40712")
loop:
while has_pending_bytes(connection):
client_id = read_unsigned_byte(connection)
event_type = read_unsigned_byte(connection)
event_length = 256 * read_unsigned_byte(connection)
event_length = event_length + read_unsigned_byte(connection)
event_data = read_raw_bytes(connection, event_length)
if message_type == 0:
app_process_client_connected(client_id)
else if message_type == 1:
app_process_client_disconnected(client_id)
else if message_type == 2:
app_process_client_message(client_id, event_data)
else:
log("ignoring unrecognized event type")
while app_has_outgoing_messages():
target_client_id, message_bytes = app_next_outgoing_message()
message_length = length(message_bytes)
write_unsigned_byte(connection, target_client_id)
write_unsigned_byte(connection, 2)
write_unsigned_byte(connection, message_length / 256)
write_unsigned_byte(connection, message_length mod 256)
write_raw_bytes(connection, message_bytes)
```