本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 了解 Amazon Chime SDK 的 Web 應用程式元件架構
<a name="web-app-comp-arch-java"></a>

此圖顯示 Amazon Chime SDK Web 用戶端應用程式的架構：

![\[顯示 Amazon Chime SDK Web 應用程式架構的圖表。\]](http://docs.aws.amazon.com/zh_tw/chime-sdk/latest/dg/images/architecture-2.png)


Web 應用程式通常包含由應用程式商業邏輯層支援的 HTML 和 CSS 使用者介面層。您可以使用純 HTML 和 JavaScript 建置 Web 應用程式，也可以使用 React 和 Angular 等 UI 架構。

Web 應用程式的商業邏輯層會透過一組 JavaScript APIs 與適用於 JavaScript 的 Amazon Chime SDK 用戶端程式庫互動。[https://aws.github.io/amazon-chime-sdk-js/classes/defaultmeetingsession.html](https://aws.github.io/amazon-chime-sdk-js/classes/defaultmeetingsession.html) 是 SDK 的根物件。建置伺服器應用程式時，您可以使用 會議和出席者資訊來[https://aws.github.io/amazon-chime-sdk-js/classes/meetingsessionconfiguration.html](https://aws.github.io/amazon-chime-sdk-js/classes/meetingsessionconfiguration.html)初始化應用程式，並加入會議。DefaultMeetingSession 也會公開 [https://aws.github.io/amazon-chime-sdk-js/interfaces/audiovideofacade.html](https://aws.github.io/amazon-chime-sdk-js/interfaces/audiovideofacade.html)，這可讓商業邏輯層採取動作，並在工作階段的基礎狀態變更時註冊更新使用者介面的回呼。

適用於 JavaScript 的 Amazon Chime SDK 用戶端程式庫是開放原始碼，具有一組您可以視需要覆寫的可自訂元件。預設實作可讓您建置完整的統一通訊應用程式，例如我們的示範 MeetingV2 應用程式。適用於 JavaScript 的 Amazon Chime SDK 用戶端程式庫取決於其他兩個程式庫：
+  [ 瀏覽器偵測](https://www.npmjs.com/package/browser-detect)用於識別瀏覽器類型和功能。
+  [ ProtoBufJs ](https://www.npmjs.com/package/protobufjs) 可對加入媒體工作階段所需的訊號命令和回應進行編碼和解碼。

Amazon Chime SDK 也依賴瀏覽器或 Electron 應用程式為音訊視訊工作階段提供 Device Management APIs和 WebRTC 實作。

適用於 JavaScript 的來源 Amazon Chime SDK 用戶端程式庫位於 TypeScript 中，但您可以使用 TypeScript 編譯器將其編譯至 JavaScript。然後，您可以使用諸如 Webpack 的模組綁定器來綁定它。最佳實務是，從 NPM 登錄檔安裝適用於 JavaScript 的 Amazon Chime SDK 用戶端程式庫，然後在 CommonJS 環境中使用它。 AWS 也提供彙總指令碼，用於將 Amazon Chime SDK 綁定到小型 JS 檔案，以防您想要直接將其作為[指令碼標籤包含在 HTML 中](https://github.com/aws/amazon-chime-sdk-js/tree/master/demos/singlejs)。