

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Amazon GameLift Streams layanan backend dan klien web
<a name="sdk"></a>

 Amazon GameLift Streams memungkinkan Anda untuk melakukan streaming aplikasi melalui browser web. Dengan Amazon GameLift Streams Web SDK, Anda dapat mengatur layanan streaming backend. Kemudian, pengguna akhir terhubung ke aliran melalui klien web. Mereka dapat memainkan game Anda atau berinteraksi dengan aplikasi Anda di seluruh cloud. 

 Amazon GameLift Streams Web SDK menyertakan server backend sampel dan klien web sampel, yang dapat Anda gunakan untuk memulai membuat layanan backend. Anda juga dapat menggunakan sampel ini untuk menguji bagaimana Amazon GameLift Streams mengalir, tanpa pengembangan tambahan. Untuk memulai, lihat[Menyiapkan server web dan klien dengan Amazon GameLift Streams](setting-up-web-sdk.md). 

**Topics**
+ [Browser dan masukan yang didukung](sdk-browsers-input.md)
+ [Port yang dibutuhkan](required-ports.md)
+ [Menyiapkan server web dan klien dengan Amazon GameLift Streams](setting-up-web-sdk.md)
+ [Sesuaikan tampilan aliran](sdk-stream-appearance.md)
+ [Preferensi lokal](sdk-locale-support.md)
+ [Penanganan gerakan mouse](sdk-mouse-movement.md)
+ [Komunikasi saluran data antara aplikasi dan klien web](data-channels.md)

# Browser dan masukan yang didukung
<a name="sdk-browsers-input"></a>

Berikut ini mencantumkan platform dan browser yang didukung untuk melihat GameLift aliran Amazon Streams dan periferal input yang kompatibel. Browser juga harus kompatibel dengan Advanced Video Coding (AVC), juga dikenal sebagai H.264.

Secara keseluruhan, kami merekomendasikan Google Chrome, Microsoft Edge, atau aplikasi desktop berbasis Chromium khusus untuk pengalaman pengguna akhir terbaik dan kompatibilitas maksimum, terutama dengan pengontrol game.

 Untuk mempelajari lebih lanjut tentang pengontrol mana yang kompatibel dengan browser mana, lihat [Web Gamepad](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API) API. Meskipun beberapa panduan mungkin tidak berlaku untuk Amazon GameLift Streams, kami berharap sebagian besar pengontrol game berhasil terhubung melalui Bluetooth. 

[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/gameliftstreams/latest/developerguide/sdk-browsers-input.html)

## Masalah yang diketahui
<a name="sdk-browsers-input-known-issues"></a>

Berikut ini adalah masalah yang diketahui dengan browser dan masukan:
+ Safari akan segera keluar dari layar penuh setiap kali `Esc` ditekan. Ini tidak bisa dikesampingkan.
+ Tampilan browser “tertanam” atau “dalam aplikasi” seperti yang ada di dalam aplikasi seluler seperti LinkedIn, Yelp, Instagram, dan lainnya tidak didukung di iOS. Ini cenderung menonaktifkan dukungan WebRTC browser yang diperlukan untuk streaming interaktif realtime. Sebaiknya deteksi string browser non-standar dan meminta pengguna untuk membuka di Safari.
+ Jika resolusi layar dalam aplikasi Anda tidak disetel ke 1080p, pelacakan mouse mungkin terpengaruh. Kami merekomendasikan untuk menonaktifkan pemilihan resolusi lain, jika memungkinkan. Kami juga merekomendasikan menonaktifkan mode berjendela, dan hanya berjalan dalam layar penuh.
+ Untuk mendukung plug and play pengontrol game di Proton, meskipun kurangnya dukungan untuk mereka di aplikasi Linux asli, game yang berjalan di lingkungan runtime Proton *akan* selalu menampilkan pengontrol game yang terhubung, bahkan jika tidak ada yang dicolokkan pada klien. Ini bisa menjadi masalah untuk game yang meminta input pengontrol bahkan ketika pengontrol dalam keadaan idle dan tidak digunakan. Kami menyarankan agar game menampilkan UI input berdasarkan metode input terakhir.

## Batasan
<a name="sdk-browsers-input-limits"></a>
+ Sebagian besar lingkungan runtime mendukung pengontrol game, kecuali untuk Ubuntu 22.04 LTS. Jika Anda memerlukan dukungan pengontrol game, pertimbangkan untuk membuat game menggunakan lingkungan runtime lain. Untuk daftar lingkungan runtime lainnya, lihat. [Lingkungan runtime](configuration-options.md#configuration-options-runtime)
+ Pengontrol game PlayStation 5 dan Luna tidak didukung di Firefox.
+ Dukungan umpan balik haptic:
  + Umpan balik haptic pada S/X pengontrol Seri PlayStation 4 dan Xbox didukung di Chrome, Edge, dan Safari.
  + Haptics pada DualSense pengontrol PlayStation 5 hanya didukung di browser Safari.
  + Firefox tidak mendukung umpan balik haptic pada pengontrol apa pun.
  + Perangkat Android dan iOS tidak mendukung umpan balik haptic pada pengontrol apa pun.
+ Fitur **Test stream** di konsol Amazon GameLift Streams tidak mendukung mikrofon.

## IPv6 dukungan
<a name="sdk-browsers-input-ipv6-support"></a>

Streaming ke klien IPv6 -only hanya didukung dengan aplikasi runtime Windows.


| Waktu Aktif | Streaming IPv4 | Streaming IPv6 | 
| --- | --- | --- | 
| Basis Microsoft Windows Server 2022 | Ya | Ya | 
| Ubuntu 22.04 LTS | Ya | Tidak | 
| Runtime Proton | Ya | Tidak | 

# Port yang dibutuhkan
<a name="required-ports"></a>

 Untuk mengintegrasikan Amazon GameLift Streams, pastikan infrastruktur jaringan Anda memiliki port yang diperlukan terbuka dan dapat diakses. Berikut ini adalah daftar port yang harus Anda rencanakan untuk dibuka di jaringan Anda untuk berkomunikasi dengan Amazon GameLift Streams. 


| *Port* | Protokol | Tujuan | 
| --- | --- | --- | 
|  443  |  (HTTPS) TCP  |  AWS APIs, termasuk Amazon GameLift Streams  | 
|  33435-33465  |  UDP  |  Web RTC  | 

# Menyiapkan server web dan klien dengan Amazon GameLift Streams
<a name="setting-up-web-sdk"></a>

 Dalam tutorial ini, Anda akan menyiapkan aplikasi klien web yang mengintegrasikan layanan streaming Amazon GameLift Streams. Kemudian, Anda akan menggunakan Amazon GameLift Streams Web SDK, JavaScript perpustakaan, dan kode sampel yang dapat Anda mulai dengan. Kode sampel mencakup server web backend Amazon GameLift Streams sederhana dan klien web sederhana. Pada akhir tutorial ini, Anda dapat memulai streaming dengan menggunakan kode sampel. 

 Jika ini pertama kalinya Anda menggunakan Amazon GameLift Streams, kami sangat menyarankan untuk memulai dengan [Memulai streaming pertama Anda di Amazon GameLift Streams](streaming-process.md) tutorial, yang memandu Anda mengunggah game ke Amazon S3 dan menguji streaming dari dalam konsol GameLift Amazon Streams di browser Anda. 

## Prasyarat
<a name="setting-up-web-sdk-prereq"></a>
+ Akun AWS dengan kredensi yang tepat untuk akses terprogram. Untuk informasi selengkapnya, lihat [Menyiapkan Amazon GameLift Streams sebagai pengembang](setting-up.md).
+ AWS SDK.
+ Browser web yang GameLift didukung Amazon Streams — lihat. [Browser dan masukan yang didukung](sdk-browsers-input.md)
+ Node.js - lihat halaman [unduhan Node.js](https://nodejs.org/en/download).

## Unduh SDK Web
<a name="setting-up-web-sdk-materials"></a>

Untuk tutorial ini, Anda perlu mengunduh materi berikut dari bagian Sumber Daya pada [halaman produk Memulai](https://aws.amazon.com/gamelift/streams/getting-started/):
+ **Amazon GameLift Streams Web SDK bundle**: Ini termasuk kode contoh untuk layanan backend sederhana dan klien web.
+ Referensi API **SDK Web Amazon GameLift Streams: Referensi API** ini mendokumentasikan pembungkus API Amazon GameLift Streams untuk. JavaScript

## Siapkan sumber daya streaming Anda
<a name="setting-up-web-sdk-resources"></a>

Anda harus memiliki sumber daya streaming — aplikasi dan grup aliran — untuk memulai streaming. Secara khusus, Anda harus memiliki:
+  Aplikasi dalam status **Siap**. 
+  Grup aliran dalam status **Aktif** dengan kapasitas aliran yang tersedia. 
+  Untuk streaming di lokasi selain lokasi utama, aplikasi harus selesai mereplikasi ke lokasi itu. 

 Untuk menyiapkan aplikasi dan grup streaming menggunakan konsol Amazon Streams atau Amazon GameLift GameLift Streams CLI, lihat dan, masing-masing. [Siapkan aplikasi di Amazon GameLift Streams](applications.md) [Kelola streaming dengan grup streaming Amazon GameLift Streams](stream-groups.md) Atau, untuk end-to-end penelusuran di konsol Amazon GameLift Streams, lihat. [Memulai streaming pertama Anda di Amazon GameLift Streams](streaming-process.md) 

## Siapkan server backend
<a name="setting-up-web-sdk-backend"></a>

 Server backend bertanggung jawab untuk menangani tugas-tugas seperti mengautentikasi pengguna, mengonfigurasi parameter aliran, dan melakukan panggilan API layanan Amazon GameLift Streams atas nama pengguna akhir. Tinjau kode contoh dan Referensi API SDK Web Amazon GameLift Streams untuk mempelajari lebih lanjut tentang pengaturan ini. Secara khusus, lihat file server.js dalam paket Amazon GameLift Streams Web SDK. 

**penting**  
 Kode ini adalah contoh kode untuk tujuan pengujian dan evaluasi saja dan tidak boleh digunakan dalam kapasitas produksi. 

**Untuk menjalankan layanan backend sampel**

1.  Buka terminal atau command prompt dan arahkan ke folder`AmazonGameLiftStreamsWebSDK\GameLiftStreamsSampleGamePublisherService\`. 

1.  Jalankan perintah berikut: 

   ```
   npm install
   node server.js
   ```

 Dengan layanan backend sampel berjalan, pengguna akhir dapat terhubung ke aliran melalui klien web. Uji klien web pada langkah berikutnya. 

## Luncurkan klien web
<a name="setting-up-web-sdk-client"></a>

Aplikasi klien web bertanggung jawab untuk menerima dan mendekode GameLift aliran Amazon Streams, streaming ke pengguna akhir, dan menyediakan UI browser web bagi pengguna akhir untuk terlibat dengan aplikasi. Tinjau kode sampel dan Referensi API SDK Web Amazon GameLift Streams untuk mempelajari selengkapnya tentang cara mengintegrasikan JavaScript Amazon GameLift Streams Web SDK ke dalam aplikasi klien web Anda sendiri. Secara khusus, lihat `public/index.html` di paket Amazon GameLift Streams Web SDK. Anda juga dapat melihat sumber halaman web ketika Anda meluncurkan klien web di browser Anda.

**catatan**  
Runtime Windows di Amazon GameLift Streams mendukung sesi streaming melalui IPv4 atau. IPv6 Namun, lingkungan runtime Linux dan Proton hanya mendukung streaming. IPv4

**Untuk meluncurkan aplikasi klien web**

1.  Buka browser web dan navigasikan ke`http://localhost:port/`. Nomor port diatur oleh server backend; secara default, ini adalah port HTTP 8000. 

1. Mainkan game atau gunakan perangkat lunak.

   1. Untuk melampirkan input, seperti mouse Anda, pilih **Lampirkan input**.

   1. Untuk keluar dari permainan, pilih tombol **Esc**.

   1. Untuk menghentikan proses server, pilih **Ctrl\$1C** kunci.

## Bersihkan sumber daya streaming
<a name="setting-up-web-sdk-cleanup"></a>

**Awas**  
 Grup streaming mengeluarkan biaya ketika telah mengalokasikan kapasitas streaming, bahkan jika kapasitas itu tidak digunakan. Untuk menghindari biaya yang tidak perlu, skala grup streaming Anda ke ukuran yang Anda butuhkan. Kami menyarankan selama pengembangan agar Anda menskalakan kapasitas selalu aktif dan kapasitas idle target di grup streaming Anda ke nol saat tidak digunakan. Untuk informasi lebih lanjut, lihat[Skalakan grup aliran ke kapasitas nol](pricing.md#pricing-pause-stream-groups).

Setelah Anda menyelesaikan tutorial dan tidak perlu lagi melakukan streaming aplikasi Anda, ikuti langkah-langkah ini untuk membersihkan sumber daya Amazon GameLift Streams Anda.

**Menghapus grup aliran**

 Saat Anda menghapus grup streaming, Amazon GameLift Streams berfungsi untuk melepaskan semua kapasitas streaming. 

**Untuk menghapus grup streaming menggunakan konsol Amazon GameLift Streams**

1.  Masuk ke Konsol Manajemen AWS dan buka [konsol Amazon GameLift Streams](https://console.aws.amazon.com/gameliftstreams/). 

1.  Untuk melihat daftar grup aliran yang ada, di panel navigasi, pilih **Grup streaming**. 

1.  Pilih nama grup streaming yang ingin Anda hapus. 

1.  Pada halaman detail grup streaming, pilih **Hapus**. 

1.  Di kotak dialog **Hapus**, konfirmasikan tindakan hapus. 

 Amazon GameLift Streams mulai merilis sumber daya komputasi dan menghapus grup streaming. Selama waktu ini, grup streaming berada dalam status **Menghapus**. Setelah Amazon GameLift Streams menghapus grup streaming, Anda tidak dapat mengambilnya lagi. 

**Menghapus aplikasi**

 Anda hanya dapat menghapus aplikasi yang memenuhi persyaratan berikut: 
+  Aplikasi dalam status **Siap** atau **Kesalahan**. 
+  Aplikasi tidak di-streaming dalam sesi stream yang sedang berlangsung. Anda harus menunggu hingga klien mengakhiri sesi streaming atau menelepon [TerminateStreamSession](https://docs.aws.amazon.com/gameliftstreams/latest/apireference/API_TerminateStreamSession.html)di Amazon GameLift Streams API untuk mengakhiri streaming. 

 Jika aplikasi ditautkan ke grup stream apa pun, Anda harus membatalkan tautannya dari semua grup stream terkait sebelum Anda dapat menghapusnya. Di konsol, sebuah kotak dialog akan memandu Anda menyelesaikan proses ini. 

**Untuk menghapus aplikasi menggunakan konsol Amazon GameLift Streams**

1. Masuk ke Konsol Manajemen AWS dan buka [konsol Amazon GameLift Streams](https://console.aws.amazon.com/gameliftstreams/).

1. Di bilah navigasi, pilih **Aplikasi** untuk melihat daftar aplikasi yang ada. Pilih aplikasi yang ingin Anda hapus. 

1. Di halaman detail aplikasi, pilih **Hapus**. 

1. Di kotak dialog **Hapus**, konfirmasikan tindakan hapus. 

 Amazon GameLift Streams mulai menghapus aplikasi. Selama waktu ini, aplikasi dalam `Deleting` status. Setelah Amazon GameLift Streams menghapus aplikasi, Anda tidak dapat lagi mengambilnya. 

# Sesuaikan tampilan aliran
<a name="sdk-stream-appearance"></a>

## Memuat layar
<a name="sdk-loading-screen"></a>

Ketika pelanggan membuka browser web untuk melihat aliran, klien web mulai membuat koneksi ke sesi streaming Amazon GameLift Streams. Saat sesi streaming dimuat, Anda dapat menampilkan latar belakang dan logo khusus ke layar pelanggan.

Contoh klien Amazon GameLift Streams Web SDK, dalam `GameLiftStreamsSampleGamePublisherService/public/LoadingScreen/loadingscreen.js` file, menunjukkan bagaimana Anda dapat menerapkan logo animasi di klien web front-end Anda. Layar pemuatan default terdiri dari 2 gambar: latar belakang dan latar depan. Gambar latar depan diposisikan di tengah dan memiliki animasi pulsa. Animasi hanya diputar saat sesi streaming terhubung.

**Untuk mengaktifkan layar pemuatan**

1. Di klien sampel Amazon GameLift Streams Web SDK, navigasikan ke folder. `GameLiftStreamsSampleGamePublisherService/public/LoadingScreen/`

1. Tambahkan gambar latar belakang dan latar depan Anda menggunakan nama default, `Background.png` dan`LoadingLogo.png`. Jika Anda ingin mengganti nama mereka atau menggunakan format gambar yang berbeda, Anda harus memperbarui kode di`GameLiftStreamsSampleGamePublisherService/public/loadingscreen.js`.

1. (Opsional) Di`GameLiftStreamsSampleGamePublisherService/public/loadingscreen.js`, perbarui JavaScript kode untuk mengimplementasikan animasi yang berbeda.

# Preferensi lokal
<a name="sdk-locale-support"></a>

 Di Amazon GameLift Streams, Anda dapat mengatur preferensi lokal per aliran. Ini berguna jika aplikasi Anda mengambil informasi spesifik lokasi dari sistem operasi pengguna akhir, seperti waktu atau mata uang. 

 Amazon GameLift Streams mendukung bahasa-bahasa berikut: 


| Nilai | Deskripsi | 
| --- | --- | 
|  `en_US`  |  Bahasa Inggris AS (default)  | 
|  `ja_jp.UTF-8`  |  Bahasa Jepang  | 

 **Untuk mengubah setelan lokal** 

 Saat Anda menelepon [StartStreamSession](https://docs.aws.amazon.com/gameliftstreams/latest/apireference/API_StartStreamSession.html)menggunakan Amazon GameLift Streams API, tambahkan `LANG=<language>` ke file Anda`AdditionalEnvironmentVariables`. Karena preferensi lokal unik per pengguna, Anda menyetelnya di tingkat sesi streaming. Jika Anda tidak menyetel ini, streaming menggunakan bahasa Inggris AS secara default. 

**Example Contoh**  

```
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"}'
```

# Penanganan gerakan mouse
<a name="sdk-mouse-movement"></a>

Penanganan gerakan mouse sangat penting untuk memberikan pengalaman pengguna yang responsif dan intuitif dalam aplikasi streaming. Amazon GameLift Streams secara otomatis mengoptimalkan transmisi input mouse berdasarkan perilaku kursor aplikasi Anda, memastikan bahwa gerakan mouse terasa alami apakah kursor tersembunyi atau terlihat. Memahami cara Amazon GameLift Streams memproses peristiwa mouse membantu Anda merancang aplikasi yang bekerja secara mulus dengan layanan streaming dan memberikan pengalaman pengguna sebaik mungkin.

## Mode masukan mouse
<a name="sdk-mouse-input-modes"></a>

Amazon GameLift Streams menggunakan dua mode berbeda untuk mentransmisikan peristiwa mouse ke aplikasi Anda, secara otomatis memilih mode yang sesuai berdasarkan visibilitas kursor:

Modus relatif  
Dalam mode relatif, pembaruan mouse ditransmisikan sebagai perbedaan kecil dan bertahap dari posisi sebelumnya. Mode ini sangat ideal untuk aplikasi yang membutuhkan pelacakan gerakan mouse yang presisi dan terus menerus, seperti game first-person shooter (FPS) atau antarmuka yang menggunakan orientasi 3D. Amazon GameLift Streams menggunakan mode relatif saat kursor sistem operasi disembunyikan atau sepenuhnya transparan.

Modus absolut  
Dalam mode absolut, posisi kursor mouse ditransmisikan sebagai koordinat layar yang tepat. Mode ini berfungsi dengan baik untuk aplikasi yang mengandalkan posisi kursor yang tepat, seperti point-and-click game atau UI apa pun dengan elemen yang dapat diklik. Amazon GameLift Streams menggunakan mode absolut saat kursor sistem operasi terlihat, meskipun aplikasi Anda menampilkan gambar kursor khusus.

Pemilihan otomatis ini memastikan kinerja optimal untuk berbagai jenis aplikasi tanpa memerlukan konfigurasi manual.

## Kunci penunjuk
<a name="sdk-pointer-lock"></a>

Kunci penunjuk adalah fitur API web yang menangkap kursor mouse dalam elemen tertentu, menyembunyikan kursor dan mencegahnya meninggalkan area yang ditunjuk. Fitur ini sangat berharga untuk game yang membutuhkan gerakan mouse tanpa batas untuk kontrol kamera atau membidik, tanpa gangguan kursor yang terlihat atau batasan mencapai tepi jendela.

Amazon GameLift Streams menyediakan fungsionalitas kunci penunjuk otomatis melalui `autoPointerLock` properti di antarmuka Web SDK. `InputConfiguration` Fitur ini terintegrasi dengan [requestPointerLock API](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestPointerLock) untuk memberikan penangkapan mouse yang intuitif dan sadar konteks.

### Perilaku kunci pointer otomatis
<a name="sdk-pointer-lock-behavior"></a>

Amazon GameLift Streams secara otomatis mengaktifkan kunci penunjuk saat aplikasi layar penuh dan kursor jarak jauh tidak terlihat di host aliran. Perilaku ini selaras dengan pola pengembangan game umum:
+ **Game FPS/TPS dan kontrol orientasi 3D** - Pointer terkunci secara otomatis dan kursor disembunyikan, memberikan kontrol kamera tak terbatas yang penting untuk gameplay FPS.
+ **Point-and-click game dan kontrol UI** - Saat game membuat kursor terlihat untuk interaksi menu atau gameplay strategi, penunjuk tetap terlihat dan tidak terkunci, menjaga pengalaman pengguna yang diinginkan.

### Opsi konfigurasi
<a name="sdk-pointer-lock-configuration"></a>

`autoPointerLock`Properti menerima nilai-nilai berikut:

`true`  
Mouse selalu ditangkap ketika kursor jarak jauh tidak terlihat.

`false`  
Mouse tidak pernah ditangkap, terlepas dari visibilitas kursor.

`'fullscreen'` (default)  
Mouse hanya ditangkap ketika elemen video dalam mode layar penuh dan kursor jarak jauh tidak terlihat.

**penting**  
`autoPointerLock`tidak berpengaruh di browser Safari atau di platform iOS karena keterbatasan platform.

## Praktik terbaik
<a name="sdk-mouse-best-practices"></a>

Untuk memastikan penanganan mouse yang optimal dalam aplikasi streaming Anda:
+ **Selalu streaming layar penuh** - Aplikasi Anda seharusnya sudah berjalan dalam mode layar penuh agar berfungsi dengan baik di layanan kami. Selain itu, sebaiknya gunakan dukungan browser untuk menjadikan streaming elemen layar penuh untuk pengalaman pengguna akhir terbaik. Ini akan membantu menghindari masalah seperti masalah penyelarasan antara kursor sistem dan kursor perangkat lunak.
+ **Sembunyikan kursor untuk gerakan relatif** - Jika aplikasi Anda mengharapkan gerakan mouse relatif (seperti kontrol kamera gaya FPS atau interaksi berbasis drag), sembunyikan kursor sistem operasi selama interaksi tersebut. Dalam beberapa skenario, Anda mungkin perlu menyembunyikan kursor pada mouse-down dan menunjukkannya lagi pada mouse-up.
+ **Tampilkan kursor untuk pemosisian absolut** - Saat aplikasi Anda membutuhkan posisi kursor yang tepat untuk interaksi UI, pastikan kursor sistem operasi tetap terlihat untuk mengaktifkan mode koordinat absolut.
+ **Uji skenario input yang berbeda** - Verifikasi bahwa aplikasi Anda menangani mode mouse relatif dan absolut dengan benar, karena Amazon GameLift Streams dapat beralih antar mode berdasarkan perubahan visibilitas kursor Anda.
+ **Uji mode jendela yang berbeda** - Uji penanganan mouse aplikasi Anda dalam mode berjendela dan layar penuh, jika berlaku. Tentukan `autoPointerLock` pengaturan mana yang terbaik untuk konfigurasi input Anda.

# Komunikasi saluran data antara aplikasi dan klien web
<a name="data-channels"></a>

 Saluran data memungkinkan Anda mengkomunikasikan pesan arbitrer dengan aman antara aplikasi Amazon GameLift Streams dan klien web ( JavaScript kode yang berjalan di browser web pengguna akhir). Ini memungkinkan pengguna akhir untuk berinteraksi dengan aplikasi yang streaming Amazon GameLift Streams, melalui browser web tempat mereka melihat streaming. 

Berikut adalah beberapa contoh kasus penggunaan saluran data di Amazon GameLift Streams:
+ Pengguna dapat membuka aplikasi URLs di browser lokal mereka.
+ Pengguna dapat meneruskan konten di clipboard bolak-balik ke aplikasi.
+ Pengguna dapat mengunggah konten dari mesin lokal mereka ke aplikasi.
+ Pengembang dapat mengimplementasikan UI di browser yang mengirimkan perintah ke aplikasi.
+ Pengguna dapat melewati skema untuk mengontrol tampilan lapisan visualisasi.

## Fitur
<a name="data-channels-features"></a>

**Batas ukuran pesan**  
Amazon GameLift Streams Web SDK memberlakukan batas ukuran maksimum 64 KB (65536 byte) per pesan. Ini memastikan bahwa batas ukuran pesan kompatibel dengan sebagian besar browser, dan bahwa komunikasi memiliki dampak rendah pada total bandwidth aliran.

**Metrik**  
 Metrik penggunaan saluran data Anda dikirim ke akun AWS Anda saat sesi streaming berakhir. Untuk informasi selengkapnya, lihat [Saluran data](monitoring-cloudwatch.md#monitoring-data-channels) di bagian *Memantau GameLift Aliran Amazon*. 

## Menggunakan saluran data
<a name="data-channels-using"></a>

Amazon GameLift Streams Web SDK menyediakan `sendApplicationMessage` fungsi yang mengirim pesan sebagai array byte ke aplikasi. Pesan diproses oleh fungsi callback, `clientConnection.applicationMessage` yang Anda tentukan.

Jika klien mengirim pesan sebelum aplikasi terhubung ke port saluran data, pesan akan antri. Kemudian, ketika aplikasi terhubung, ia menerima pesan. Namun, jika aplikasi mengirim pesan sebelum klien terhubung ke port saluran data, pesan akan hilang. Aplikasi harus memeriksa status koneksi klien sebelum mengirim pesan.

## Di sisi klien
<a name="data-channels-using-client"></a>

Tulis kode berikut dalam aplikasi klien web Anda.

1.  Tentukan fungsi callback untuk menerima pesan masuk dari aplikasi. 

   ```
   function streamApplicationMessageCallback(message) {
       console.log('Received ' + message.length + ' bytes of message from 
       Application');
   }
   ```

1.  Setel `clientConnection.applicationMessage` ke fungsi callback Anda. 

   ```
   clientConnection: {
       connectionState: streamConnectionStateCallback,
       channelError: streamChannelErrorCallback,
       serverDisconnect: streamServerDisconnectCallback,
       applicationMessage: streamApplicationMessageCallback,
   }
   ```

1.  Panggil `GameLiftStreams.sendApplicationMessage` fungsi untuk mengirim pesan ke aplikasi Anda. Anda dapat memanggil ini kapan saja, selama sesi streaming aktif dan input dilampirkan. 

Sebagai contoh, lihat klien sampel Amazon GameLift Streams Web SDK, yang menunjukkan cara mengatur saluran data sederhana di sisi klien.

## Di sisi aplikasi
<a name="data-channels-using-application"></a>

Tulis logika berikut dalam aplikasi Anda.

### Langkah 1. Connect ke port saluran data
<a name="data-channels-using-application-1"></a>

Saat aplikasi Anda dimulai, sambungkan ke port `40712` aktif`localhost`. Aplikasi Anda harus mempertahankan koneksi ini selama seluruh durasi eksekusi. Jika aplikasi menutup koneksi, itu tidak dapat dibuka kembali.

### Langkah 2. Dengarkan acara
<a name="data-channels-using-application-2"></a>

Peristiwa dimulai dengan header ukuran tetap, diikuti oleh data terkait panjang variabel. Saat aplikasi Anda menerima acara, uraikan acara untuk mengambil informasi.

**Format peristiwa**
+ **Header**: Header 4-byte dalam formulir `abcc`
  +  `a`: Byte id klien. Ini mengidentifikasi koneksi klien tertentu, dalam kasus beberapa koneksi (karena pemutusan dan koneksi ulang).
  +  `b`: Jenis acara byte. `0`- klien terhubung, `1` - klien terputus, `2` - pesan dikirim dari klien. Jenis acara lainnya dapat diterima dengan pembaruan layanan Amazon GameLift Streams di masa mendatang, dan harus diabaikan.
  +  `cc`: Panjang data peristiwa terkait. Ini direpresentasikan sebagai 2 byte dengan urutan besar-endian (byte pertama adalah yang paling signifikan). Jika jenis acara adalah 2, data peristiwa mewakili isi pesan dari klien.
+ **Data**: Byte yang tersisa berisi data peristiwa, seperti pesan klien. Panjang data ditunjukkan oleh `cc` di header.

**Untuk mendengarkan acara**

1. Baca empat byte header untuk mengambil id klien, jenis peristiwa, dan panjang data peristiwa.

1. Baca data peristiwa panjang variabel, terlepas dari id klien dan jenis acara, sesuai dengan panjang yang dijelaskan di header. Penting untuk membaca data tanpa syarat sehingga data peristiwa tidak pernah tertinggal di buffer, di mana data tersebut dapat dikacaukan dengan header acara berikutnya. Jangan membuat asumsi tentang panjang data berdasarkan jenis peristiwa.

1. Ambil tindakan yang sesuai berdasarkan jenis acara, jika diakui oleh aplikasi Anda. Tindakan ini mungkin termasuk mencatat koneksi masuk atau pemutusan, atau mengurai pesan klien dan memicu logika aplikasi.

### Langkah 3. Mengirimkan pesan ke klien
<a name="data-channels-using-application-3"></a>

Aplikasi harus mengirimkan pesan dengan format header empat byte yang sama yang digunakan oleh peristiwa yang masuk.

**Untuk mengirimkan pesan ke klien**

1. Tulis header dengan properti berikut:

   1. `a`: Byte id klien. Jika pesan Anda menanggapi pesan klien, pesan tersebut harus menggunakan kembali id klien yang sama dengan pesan klien yang masuk, untuk menghindari kondisi balapan seperti mengirimkan respons dari koneksi klien lama ke klien yang baru terhubung kembali. Jika aplikasi Anda mengirim pesan yang tidak diminta ke klien, itu harus mengatur id klien agar sesuai dengan peristiwa “koneksi klien” terbaru (tipe acara 0).

   1. `b`: Jenis acara pesan keluar harus selalu 2. Klien mengabaikan pesan dengan jenis acara lainnya.

   1. `cc`: Panjang pesan, dalam byte.

1. Tulis byte pesan.

Pesan dikirim ke klien yang ditentukan, kecuali klien terputus. Ketika klien terputus terhubung kembali, ID klien baru ditetapkan melalui peristiwa yang terhubung dengan klien. Setiap pesan yang tidak terkirim untuk ID klien lama akan dibuang.

**Example**  
Pseudo-code berikut menunjukkan logika untuk mengkomunikasikan pesan di sisi aplikasi. Untuk contoh lengkap menggunakan Winsock, lihat [Kode Klien Winsock Lengkap](https://learn.microsoft.com/en-us/windows/win32/winsock/complete-client-code) dalam dokumentasi Windows Sockets 2.  

```
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)
```