diff --git a/shared/common/project-setup/web.mdx b/shared/common/project-setup/web.mdx index b06a3effb..57f9305aa 100644 --- a/shared/common/project-setup/web.mdx +++ b/shared/common/project-setup/web.mdx @@ -1,23 +1,20 @@ -1. **Clone the repository**: + +1. Clone the [ sample code repository](https://github.com/AgoraIO/signaling-sdk-samples-web) to + `` in your development environment: - To clone the repository to your local machine, open Terminal and navigate to the directory where you want to clone the repository. Then, use the following command: - - ```bash git clone https://github.com/AgoraIO/signaling-sdk-samples-web ``` - - -1. **Install the dependencies**: - Navigate to the root directory of the cloned repository and run the following command: +1. Install the dependencies. Open Terminal in the root directory of the cloned repository and run the following command: ```bash pnpm install ``` - By default is installed automatically. However, you can also [Install manually](../reference/downloads#through-the-agora-website). + + diff --git a/shared/common/project-test/android.mdx b/shared/common/project-test/android.mdx deleted file mode 100644 index 1015503a3..000000000 --- a/shared/common/project-test/android.mdx +++ /dev/null @@ -1,28 +0,0 @@ - -3. **Set the APP ID** - - In `agora-manager/res/raw/config.json`, set `appId` to the [AppID](../reference/manage-agora-account?platform=android#get-the-app-id) of your project. - -1. **Set the authentication method** - - Choose one of the following authentication methods: - - - **Temporary token**: - 1. Set `rtcToken` with the value of your [temporary token](../reference/manage-agora-account#generate-a-temporary-token). - 1. Set `channelName` - with the name of a channel you used to create the token. - - **Authentication server**: - 1. Setup an [Authentication server](../get-started/authentication-workflow?platform#create-and-run-a-token-server) - 1. In `config.json`, set: - - `channelName` with the name of a channel you want to join. - - `rtcToken` to an empty string. - - `serverUrl` to the base URL of your authentication server. For example, `https://agora-token-service-production-1234.up.railway.app`. - -1. **Start the reference app** - - 1. In Android Studio, connect a physical Android device to your development machine. - - 1. Click **Run** to start the app. - - A moment later you see the project installed on your device. If this is the first time you run the project, you need to grant microphone and camera access to your . - - diff --git a/shared/common/project-test/electron.mdx b/shared/common/project-test/electron.mdx deleted file mode 100644 index 23cb0aff0..000000000 --- a/shared/common/project-test/electron.mdx +++ /dev/null @@ -1,22 +0,0 @@ - - - 1. Take the following steps to setup a new Electron project: - - 1. Open a terminal window and navigate to the directory where you want to create the project. - - 2. Execute the following command in the terminal: - - ``` bash - git clone https://github.com/electron/electron-quick-start - ``` - This command clones the Electron quick-start project that you use to implement . - - 2. Install the - - Open a terminal window in your project folder and execute the following command to download and install the . - - ``` bash - npm i agora-electron-sdk - ``` - Make sure the path to your project folder does not contain any spaces. This might cause error during the installation. - diff --git a/shared/common/project-test/flutter.mdx b/shared/common/project-test/flutter.mdx deleted file mode 100644 index 75bf41d81..000000000 --- a/shared/common/project-test/flutter.mdx +++ /dev/null @@ -1,28 +0,0 @@ - - -3. **Set the APP ID** - In `flutter-reference-app/assets/config/config.json`, set `appId` to the [AppID](../reference/manage-agora-account?platform=android#get-the-app-id) of your project. - -1. **Set the authentication method** - - Choose one of the following authentication methods: - - - **Temporary token**: - 1. Set `rtcToken` with the value of your [temporary token](../reference/manage-agora-account#generate-a-temporary-token). - 1. Set `channelName` - with the name of a channel you used to create the token. - - **Authentication server**: - 1. Setup an [Authentication server](../get-started/authentication-workflow?platform#create-and-run-a-token-server) - 1. In `config.json`, set: - - `channelName` with the name of a channel you want to join. - - `rtcToken` to an empty string. - - `serverUrl` to the base URL of your authentication server. For example, `https://agora-token-service-production-1234.up.railway.app`. - -1. **Start the reference app** - - 1. Connect a physical mobile device to your development machine. - - 1. In your IDE, click **Run** to start the app. - - A moment later you see the project installed on your device. If this is the first time you run the project, you need to grant microphone and camera access to your . - - diff --git a/shared/common/project-test/index.mdx b/shared/common/project-test/index.mdx deleted file mode 100644 index 2d8fac272..000000000 --- a/shared/common/project-test/index.mdx +++ /dev/null @@ -1,21 +0,0 @@ -import Android from './android.mdx'; -import Ios from './ios.mdx'; -import MacOS from './macos.mdx'; -import Web from './web.mdx'; -import ReactNative from './react-native.mdx'; -import ReactJS from './react-js.mdx'; -import Electron from './electron.mdx'; -import Flutter from './flutter.mdx'; -import Unity from './unity.mdx'; -import Windows from './windows.mdx'; - - - - - - - - - - - diff --git a/shared/common/project-test/ios.mdx b/shared/common/project-test/ios.mdx deleted file mode 100644 index f21f0f8b6..000000000 --- a/shared/common/project-test/ios.mdx +++ /dev/null @@ -1,7 +0,0 @@ -import Source from './swift.mdx'; - - - - - - diff --git a/shared/common/project-test/macos.mdx b/shared/common/project-test/macos.mdx deleted file mode 100644 index 74e608cdd..000000000 --- a/shared/common/project-test/macos.mdx +++ /dev/null @@ -1,8 +0,0 @@ -import Source from './swift.mdx'; - - - - - - - \ No newline at end of file diff --git a/shared/common/project-test/react-js.mdx b/shared/common/project-test/react-js.mdx deleted file mode 100644 index b1df955ed..000000000 --- a/shared/common/project-test/react-js.mdx +++ /dev/null @@ -1,39 +0,0 @@ - - - -3. In the `video-sdk-samples-reactjs` reference app, open `src/agora-manager/config.json` and set `appId` to the - [AppID](https://docs-beta.agora.io/en/video-calling/reference/manage-agora-account?platform=android#get-the-app-id) of your project. - -1. Set the authentication token: - - **Temporary token**: - 1. Set `rtcToken` with the value of your [temporary token](https://docs-beta.agora.io/en/video-calling/reference/manage-agora-account?platform=android#generate-a-temporary-token) - - **Authentication server**: - 1. Setup an [Authentication server](https://docs-beta.agora.io/en/video-calling/get-started/authentication-workflow?platform#create-and-run-a-token-server) - 1. In `config.json`: - - 1. Set `rtcToken` to an empty string. - 1. Set `serverUrl` to the base URL of your authentication server. For example, `https://agora-token-service-production-1234.up.railway.app`. - 1. Start a proxy server so this web app can make HTTP calls to fetch a token. In a Terminal instance in the reference app root, run the following command: - - ```bash - node ./utils/proxy.js - ``` - -1. Start this reference app. - - In Terminal, run the following command: - - ``` bash - yarn dev - ``` - -1. Open the project in your browser. The default URL is http://localhost:5173/. - -1. In the dropdown, select this document and test . - - - - - - - \ No newline at end of file diff --git a/shared/common/project-test/react-native.mdx b/shared/common/project-test/react-native.mdx deleted file mode 100644 index e45dcb562..000000000 --- a/shared/common/project-test/react-native.mdx +++ /dev/null @@ -1,61 +0,0 @@ - - -1. **Setup a React Native environment for project** - - In the terminal, run the following command: - - ```bash - npx react-native init ProjectName --template react-native-template-typescript - ``` - - npx creates a new boilerplate project in the `ProjectName` folder. - - For Android projects, enable the project to use Android SDK. In the `android` folder of your project, set the `sdk.dir` in the `local.properties` file. For example: - - - ```bash - sdk.dir=C:\\PATH\\TO\\ANDROID\\SDK - ``` - -1. **Test the setup** - - Launch your Android or iOS simulator and run your project by executing the following command: - - 1. Run `npx react-native start` in the root of your project to start Metro. - 1. Open another terminal in the root of your project and run `npx react-native run-android` to start the Android app, or run `npx react-native run-ios` to start the iOS app. - - You see your new app running in your Android or iOS simulator. You can also run your project on a physical Android or iOS device. For detailed instructions, see [Running on device](https://reactnative.dev/docs/running-on-device). - -1. **Integrate and configure ** - - To integrate on React Native 0.60.0 or later: - 1. Navigate to the root folder of your project in the terminal and integrate with either: - - npm - - ```bash - npm i --save react-native-agora - ``` - - - yarn - - ```bash - // Install yarn. - npm install -g yarn - // Download the Agora React Native SDK using yarn. - yarn add react-native-agora - ``` - - Do not link native modules manually, React Native 0.60.0 and later support [Autolinking](https://github.com/react-native-community/cli/blob/main/docs/autolinking.md). - - 1. If your target platform is iOS, use CocoaPods to install : - - ```bash - npx pod-install - ``` - - 1. uses Swift in native modules, your project must support compiling Swift. To create `File.swift`: - - 1. In Xcode, open `ios/ProjectName.xcworkspace`. - 1. Click **File > New > File, select iOS > Swift File**, then click **Next > Create** . - - \ No newline at end of file diff --git a/shared/common/project-test/swift.mdx b/shared/common/project-test/swift.mdx deleted file mode 100644 index b5d0bb8a6..000000000 --- a/shared/common/project-test/swift.mdx +++ /dev/null @@ -1,28 +0,0 @@ - -3. **Set the APP ID** - - In `DocsAppConfig.swift` set `appId` to the [AppID](../reference/manage-agora-account?platform=android#get-the-app-id) of your project. - -1. **Set the authentication method**: - - - **Temporary token**: - 1. Set `rtcToken` with the value of your [temporary token](../reference/manage-agora-account#generate-a-temporary-token). - 1. Set `channelName` - with the name of a channel you used to create the token. - - **Authentication server**: - 1. Setup an [Authentication server](../get-started/authentication-workflow?platform#create-and-run-a-token-server) - 1. In `DocsAppConfig.swift`: - - 1. Set `rtcToken` to an empty string. - 1. Set `serverUrl` to the base URL of your authentication server. For example, `https://agora-token-service-production-1234.up.railway.app`. - -1. **Run the reference app**: - - If this is the first time you run the project, grant microphone and camera access to your . - -1. **Test ** - - In the dropdown, select this document and test . - - - - \ No newline at end of file diff --git a/shared/common/project-test/unity.mdx b/shared/common/project-test/unity.mdx deleted file mode 100644 index fdfb4e54d..000000000 --- a/shared/common/project-test/unity.mdx +++ /dev/null @@ -1,25 +0,0 @@ - - -3. **Set the APP ID** - - In `Assets/agora-manager/config.json`, set `appId` to the [AppID](../reference/manage-agora-account?platform=android#get-the-app-id) of your project. - -1. **Set the authentication method** - - Choose one of the following authentication methods: - - - **Temporary token**: - 1. Set `rtcToken` with the value of your [temporary token](../reference/manage-agora-account#generate-a-temporary-token). - 1. Set `channelName` - with the name of a channel you used to create the token. - - **Authentication server**: - 1. Setup an [Authentication server](../get-started/authentication-workflow?platform#create-and-run-a-token-server) - 1. In `config.json`, set: - - `channelName` with the name of a channel you want to join. - - `rtcToken` to an empty string. - - `serverUrl` to the base URL of your authentication server. For example, `https://agora-token-service-production-1234.up.railway.app`. - -1. **Run the reference app**: - - In Unity, click **Play**. You see the running on your device. - - \ No newline at end of file diff --git a/shared/common/project-test/web.mdx b/shared/common/project-test/web.mdx deleted file mode 100644 index bcc98dd32..000000000 --- a/shared/common/project-test/web.mdx +++ /dev/null @@ -1,36 +0,0 @@ - - - -1. **Set the AppID** - - In `src/agora_manager/config.json`, set `appId` to the [AppID](../reference/manage-agora-account#get-the-app-id) of your project. - - - In `/src/signaling_manager/config.json`, set `appId` to the [AppID](../reference/manage-agora-account#get-the-app-id) of your project. - -1. **Set the authentication method** - - Choose one of the following authentication methods: - - - **Temporary token**: - 1. Set `token` with the value of your [temporary token](../reference/manage-agora-account#generate-a-temporary-token). - 1. Set `channelName` - with the name of a channel you used to create the token. - - **Authentication server**: - 1. Setup an [Authentication server](../get-started/authentication-workflow?platform#create-and-run-a-token-server) - 1. In `config.json`, set: - - `channelName` with the name of a channel you want to join. - - `token` to an empty string. - - `serverUrl` - with the base URL for your token server. For example: `https://agora-token-service-production-yay.up.railway.app`. - -1. **Run the reference app** - - In Terminal, navigate to ``, then run the following command: - - ```bash - pnpm dev - ``` - - Use the URL displayed in the terminal to open the in your browser. - - - diff --git a/shared/common/project-test/windows.mdx b/shared/common/project-test/windows.mdx deleted file mode 100644 index 45ca55387..000000000 --- a/shared/common/project-test/windows.mdx +++ /dev/null @@ -1,59 +0,0 @@ - - - -1. **Create an MFC dialog-based application** - - 1. From the main menu, choose **File** > **New** > **Project**. - - 1. Enter **MFC** into the search box and then choose **MFC App** from the result list. - - 1. In **Project Name**, input `AgoraImplementation` and press **Create** to open the **MFC Application Wizard**. - - 1. In **MFC Application**, under **Application type** , select **Dialog based**, then click **Finish**. Your project opens in Visual Studio. - - -1. **Integrate ** - - To integrate the into your project. - - 1. Unzip the latest version of [](/sdks) in a local directory. - - 1. Copy the `sdk` directory of the downloaded SDK package to the root of your project, ``. - - 1. Create a new directory `/Debug`. - - 1. Copy the files from `` to `/Debug`. - - -1. **Configure your project properties** - - Right-click the project name In **Solution Explorer**, then click **Properties** to configure the following project properties, and click **OK**. - - 1. In **AgoraImplementation Property pages**, select **Win32** from the **Platform** dropdown list. - - If your targeted platform is `x64`, then select `x64` from the **Platform** dropdown list. - - 1. Go to the **C/C++** > **General** > **Additional Include Directories** menu, click **Edit**, and input the following string in the pop-up window: - - ``` - ;$(SolutionDir)sdk\high_level_api\include;$(ProjectDir) - ``` - - 1. Go to the **Linker** > **General** > **Additional Library Directories** menu, click **Edit**, and input the following string in the pop-up window: - - ``` - ;$(SolutionDir)sdk\x86; - ``` - The sample code uses `x86` platform. If you are using `x64`, then add the following string to the **Additional Library Directories** field: - - ``` - ;$(SolutionDir)sdk\x86_64 - ``` - - 1. Go to the **C/C++** > **Preprocessor** > **Preprocessor Definitions** menu, click **Edit**, and input the following path in the pop-up window: - - ``` - ;_CRT_SECURE_NO_WARNINGS - ``` - - \ No newline at end of file diff --git a/shared/signaling/authentication-workflow/implementation/web.mdx b/shared/signaling/authentication-workflow/implementation/web.mdx index 3d70cc0bc..cbcaac1f8 100644 --- a/shared/signaling/authentication-workflow/implementation/web.mdx +++ b/shared/signaling/authentication-workflow/implementation/web.mdx @@ -120,7 +120,7 @@ To retrieve tokens from the token server and use them to authenticate your { console.log(response); - messageCallback("Left the channel: " + streamChannelName); + messageCallback("left channel: " + streamChannelName); streamChannel = null; }); } diff --git a/shared/signaling/authentication-workflow/test/web.mdx b/shared/signaling/authentication-workflow/test/web.mdx index e53740d8a..4ce7f8ffe 100644 --- a/shared/signaling/authentication-workflow/test/web.mdx +++ b/shared/signaling/authentication-workflow/test/web.mdx @@ -6,20 +6,35 @@ - `appId` - with the value from . - `serverUrl` - with the base URL for your token server. For example: `https://agora-token-service-production-yay.up.railway.app`. +1. **Start the reference app** -1. **Run the reference app**: + 1. In Terminal, navigate to ``. - In Terminal, navigate to ``, then run the following command: + 1. Run the following commands: - ``` bash - pnpm dev - ``` + ``` bash + pnpm dev + ``` -1. **Test the authentication server functionality**: +1. **Run the proxy server** + + For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. To make requests to your + token server, this sample app uses the [NodeJS corsAnywhere proxy](/src/authentication_guide/proxy.js) which adds [CORS + headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) to the proxied requests. To start this server: + + 1. In a new Terminal, navigate to `/src` + + 1. Run the following command: + + ``` bash + node proxy + ``` + +1. **Send messages between users** For each user you want to communicate between: - 1. Use the URL displayed in Terminal to open the app in your browser. + 1. Open a browser tab instance at http://127.0.0.1:5173/src/authentication_workflow/index.html. 1. Enter a numeric user ID. diff --git a/shared/signaling/cloud-proxy/_cloud-proxy.mdx b/shared/signaling/cloud-proxy/_cloud-proxy.mdx index c2f918486..d26829d22 100644 --- a/shared/signaling/cloud-proxy/_cloud-proxy.mdx +++ b/shared/signaling/cloud-proxy/_cloud-proxy.mdx @@ -43,6 +43,10 @@ This section shows how to use the to implement in y ## Test +For each user you use in your tests: + +1. [Generate a temporary token](../reference/manage-agora-account#generate-a--token). + diff --git a/shared/signaling/cloud-proxy/project-test/index.mdx b/shared/signaling/cloud-proxy/project-test/index.mdx index f030391fe..7b1ffffef 100644 --- a/shared/signaling/cloud-proxy/project-test/index.mdx +++ b/shared/signaling/cloud-proxy/project-test/index.mdx @@ -7,11 +7,7 @@ import Flutter from './flutter.mdx'; import MacOS from './macos.mdx' import Unity from './unity.mdx' import Windows from './windows.mdx'; -import Test from '@docs/shared/common/project-test/index.mdx'; -To test this functionality: - - diff --git a/shared/signaling/cloud-proxy/project-test/web.mdx b/shared/signaling/cloud-proxy/project-test/web.mdx index a3e87af40..f6db9c201 100644 --- a/shared/signaling/cloud-proxy/project-test/web.mdx +++ b/shared/signaling/cloud-proxy/project-test/web.mdx @@ -1,7 +1,18 @@ +2. In `/src/signaling_manager/config.json`: -3. **Test Cloud Proxy** + 1. Replace the value of `token` with the temporary token. - Login to , you send and receive messages through Cloud Proxy. + 1. Replace the values for `uid`, and `appId` with the with the values from . This must be the same app ID you used to generate the token. Channel name can be any string. + +1. Open a command prompt in the project folder, and run the following command: + + ``` bash + pnpm dev + ``` + +1. Open the reference app at http://127.0.0.1:5173/src/cloud_proxy/index.html. + +1. Login to , then send and receive messages through cloud proxy. diff --git a/shared/signaling/data-encryption/project-implementation/web.mdx b/shared/signaling/data-encryption/project-implementation/web.mdx index e74008532..942dfcad6 100644 --- a/shared/signaling/data-encryption/project-implementation/web.mdx +++ b/shared/signaling/data-encryption/project-implementation/web.mdx @@ -51,7 +51,7 @@ encryptionMode = config.encryptionMode; // Start channel encryption const rtmConfig = { - logLevel: config.logLevel, + logLevel: config.logFilter, useStringUserId: config.useStringUserId, encryptionMode: config.encryptionMode, salt: encryptionSaltBase64, diff --git a/shared/signaling/data-encryption/project-test/index.mdx b/shared/signaling/data-encryption/project-test/index.mdx index 334e2ed32..7e0d62854 100644 --- a/shared/signaling/data-encryption/project-test/index.mdx +++ b/shared/signaling/data-encryption/project-test/index.mdx @@ -7,10 +7,8 @@ import Flutter from './flutter.mdx'; import ReactNative from './react-native.mdx' import MacOS from './macos.mdx'; import Windows from './windows.mdx'; -import Test from '@docs/shared/common/project-test/index.mdx'; - -To test this functionality: +To ensure that you have implemented data encryption in your : 1. **Create the cypher key and salt** @@ -25,22 +23,7 @@ To test this functionality: ``` bash openssl rand -base64 32 ``` -1. **Configure data encryption** - - In `/src/signaling_manager/config.json`: - - 1. Paste the `-hex 32 key` into the `cipherKey` variable. - - 1. Paste the salt from the `-base64 32` call into the `salt` variable. - - 1. Set `encryptionMode` to 1. - - - - -4. **Test data encryption** - Login to as multiple users, then send and receive secure messages. diff --git a/shared/signaling/data-encryption/project-test/web.mdx b/shared/signaling/data-encryption/project-test/web.mdx index cdd010fd9..8cdac48c4 100644 --- a/shared/signaling/data-encryption/project-test/web.mdx +++ b/shared/signaling/data-encryption/project-test/web.mdx @@ -1,4 +1,29 @@ +2. [Generate a temporary token](../reference/manage-agora-account#generate-a--token). + +1. In `/src/signaling_manager/config.json`: + + 1. Replace the value of `token` with the temporary token. + + 1. Replace the values for `uid`, and `appId` with the with the values from . This must be the same app ID you used to generate the token. Channel name can be any string. + + 1. Paste the `-hex 32 key` into the `cipherKey` variable. + + 1. Paste the salt from the `-base64 32` call into the `salt` variable. + + 1. Set `encryptionMode` to 1. + +1. Open a command prompt in the project folder, and run the following command: + + ``` bash + pnpm dev + ``` + +1. **For each user you to test**: + + 1. Open the reference app at http://127.0.0.1:5173/src/data_encryption/index.html. + + 1. Login to , then send and receive secure messages. diff --git a/shared/signaling/geofencing/index.mdx b/shared/signaling/geofencing/index.mdx index 05c2deedb..b89d4a257 100644 --- a/shared/signaling/geofencing/index.mdx +++ b/shared/signaling/geofencing/index.mdx @@ -54,6 +54,11 @@ If your fails to connect to the specified region of as multiple users, then send and receive messages using geofencing. diff --git a/shared/signaling/geofencing/project-test/web.mdx b/shared/signaling/geofencing/project-test/web.mdx index 5c2aa9d29..673e2e0fe 100644 --- a/shared/signaling/geofencing/project-test/web.mdx +++ b/shared/signaling/geofencing/project-test/web.mdx @@ -1,4 +1,18 @@ +2. In `/src/signaling_manager/config.json`: + 1. Replace the value of `token` with the temporary token. + + 1. Replace the values for `uid`, and `appId` with the with the values from . This must be the same app ID you used to generate the token. Channel name can be any string. + +1. Open a command prompt in the project folder, and run the following command: + + ``` bash + pnpm dev + ``` + +1. Open the reference app at http://127.0.0.1:5173/src/geofencing/index.html. + +1. Login to , then send and receive messages using geofencing. diff --git a/shared/signaling/get-started-sdk/implementation/web.mdx b/shared/signaling/get-started-sdk/implementation/web.mdx index 28aedcaef..7dedfe6bb 100644 --- a/shared/signaling/get-started-sdk/implementation/web.mdx +++ b/shared/signaling/get-started-sdk/implementation/web.mdx @@ -30,7 +30,13 @@ "cipherKey": "", "presenceTimeout": 300, "logUpload": false, - "logLevel": "debug", + "logFilter": { + "error": true, + "warn": true, + "info": true, + "track": true, + "debug": false + }, "cloudProxy": true, "useStringUserId": false, "rtcToken": "" @@ -61,7 +67,7 @@ 4. **Handle and respond to events** - The following event listeners handle notification events for features: + The following event listener handles events for all features, including: - [Messages](/en/signaling/reference/api#messages): send and receive messages between users - [Presence](/en/signaling/reference/api#presence): monitor user online, offline, subscription and user historical status change @@ -71,67 +77,70 @@ - [Status](en/signaling/reference/api?platform=web#setstate): add custom statuses such as scores, game status, location, mood, and hosting status for themselves. - [token expiration](/en/signaling/reference/api#event-listeners): ensure the users is always connected to - The following code sets up event handlers for events: + Add the following code after the try-catch block of `setupSignalingEngine` function: ``` typescript - // Add listeners to handle event notifications - // Message event handler - signalingEngine.addEventListener("message", eventArgs => { - eventsCallback("message", eventArgs); - messageCallback( - "Received message from " + - eventArgs.publisher + - ": " + - eventArgs.message - ); - }); - // State event handler - signalingEngine.addEventListener("status", eventArgs => { - eventsCallback("status", eventArgs); - messageCallback( - "Connection state changed to: " + - eventArgs.state + - ", Reason: " + - eventArgs.reason - ); - }); - // Presence event handler - signalingEngine.addEventListener("presence", eventArgs => { - eventsCallback("presence", eventArgs); - if (eventArgs.eventType === "SNAPSHOT") { + // Event listener to handle incoming messages and connection status changes + signalingEngine.addEventListener({ + // Message event handler + message: (eventArgs) => { + eventsCallback("message", eventArgs); messageCallback( - `User ${eventArgs.snapshot[0].userId} joined channel ${eventArgs.channelName}` + "Received message from " + + eventArgs.publisher + + ": " + + eventArgs.message ); - } else { + }, + // State event handler + status: (eventArgs) => { + eventsCallback("status", eventArgs); messageCallback( - "Presence event: " + - eventArgs.eventType + - ", User: " + - eventArgs.publisher + "Connection state changed to: " + + eventArgs.state + + ", Reason: " + + eventArgs.reason ); - } - }); - // Storage event handler - signalingEngine.addEventListener("storage", eventArgs => { - eventsCallback("storage", eventArgs); - }); - // Topic event handler - signalingEngine.addEventListener("topic", eventArgs => { - eventsCallback("topic", eventArgs); - }); - // Lock event handler - signalingEngine.addEventListener("lock", eventArgs => { - eventsCallback("lock", eventArgs); + }, + // Presence event handler. + presence: (eventArgs) => { + eventsCallback("presence", eventArgs); + if (eventArgs.eventType === "SNAPSHOT") { + messageCallback( + `User ${eventArgs.snapshot[0].userId} joined channel ${eventArgs.channelName}` + ); + } else { + messageCallback( + "Presence event: " + + eventArgs.eventType + + ", User: " + + eventArgs.publisher + ); + } + }, + // Storage event handler + storage: (eventArgs) => { + eventsCallback("storage", eventArgs); + }, + // Topic event handler + topic: (eventArgs) => { + eventsCallback("topic", eventArgs); + }, + // Lock event handler + lock: (eventArgs) => { + eventsCallback("lock", eventArgs); + }, + // TokenPrivilegeWillExpire event handler + TokenPrivilegeWillExpire: (eventArgs) => { + eventsCallback("TokenPrivilegeWillExpire ", eventArgs); + }, }); - // TokenPrivilegeWillExpire event handler - signalingEngine.addEventListener("TokenPrivilegeWillExpire", eventArgs => { - eventsCallback("TokenPrivilegeWillExpire ", eventArgs); - }); ``` 1. **Login to ** - In , each token is specific to a user ID. If `uid` and `token` do not match, your user cannot initiate . + In , each token is specific to a user ID. If `uid` and `token` do not match, your user cannot + initiate . ``` typescript // Login to the signaling engine @@ -151,12 +160,12 @@ 1. **Monitor users in channel using presence** - In , you can use `presence` to get information about users in the channel. To get a list of active users, call `presence.getOnlineUsers()`: + In , you can use `presence` to get information about users in the channel. To get a list of active users, call `presence.whoNow()`: ``` typescript // Get list of active members in the channel const getOnlineMembersInChannel = async (channelName, channelType) => { - const result = await getSignalingEngine().presence.getOnlineUsers( + const result = await getSignalingEngine().presence.whoNow( channelName, channelType ); diff --git a/shared/signaling/get-started-sdk/test/web.mdx b/shared/signaling/get-started-sdk/test/web.mdx index fbc7e818b..ee3568c40 100644 --- a/shared/signaling/get-started-sdk/test/web.mdx +++ b/shared/signaling/get-started-sdk/test/web.mdx @@ -1,7 +1,5 @@ -2. **Configure the project**: - - In `/src/signaling_manager/config.json`: +2. In `/src/signaling_manager/config.json`: 1. Replace the value for `token` with the token. @@ -11,18 +9,16 @@ 1. Channel name can be any string. -1. **Run the reference app**: - - Open Terminal in the project folder, then run the following command: +1. Open a command prompt in the project folder, and run the following command: ``` bash pnpm dev ``` - Use the URL displayed in Terminal to open the app in your browser. +1. Open the reference app at http://127.0.0.1:5173/src/sdk_quickstart/index.html. -1. **Test this functionality**: +1. Login to , then send and receive messages. - Choose **SDK quickstart**, then log in to and send and receive messages. When you open the reference app in multiple tabs, after login you see the messages sent and received in the log. + When you open the reference app in multiple tabs, after login you see the messages sent and received in the log. diff --git a/shared/signaling/reference/web.mdx b/shared/signaling/reference/web.mdx index 8cfe36c1c..cc0b84905 100644 --- a/shared/signaling/reference/web.mdx +++ b/shared/signaling/reference/web.mdx @@ -30,17 +30,7 @@ class RTM( constructor( appId: string, userId: string, - rtmConfig?: { - token: string, - encryptionMode: string, - cipherKey: string, - salt: Uint8Array, - useStringUserId: boolean, - presenceTimeout: number, - logUpload: boolean, - logLevel: string, - cloudProxy: boolean - } + rtmConfig?: RTMConfig ); ) ``` @@ -49,7 +39,7 @@ class RTM( | :---------: | :------------------------------------------------: | :------: | :----: | ------------------------------------------------------------------------------- | | `appId` | string | Required | - | The App ID of your Agora project on the Agora console. | | `userId` | string | Required | - | The unique ID to identify a user or device. | -| `rtmConfig` | `RtmConfig` | Optional | - | The configuration parameters for initialization, see [`RtmConfig`](#rtmconfig). | +| `rtmConfig` | `rtm` | Optional | - | The configuration parameters for initialization, see `rtm`. | #### Basic Usage @@ -102,7 +92,7 @@ const rtmConfig = { cipherKey : "yourCipherKey", presenceTimeout : 300, logUpload : true, - logLevel : 'debug', + logFilter : 'debug', cloudProxy : false, useStringUserId : false }; @@ -130,63 +120,65 @@ In Signaling there are seven types of event as follows: You can add event listeners in the following way: ```javascript -// Add message event listeners -// Message -rtm.addEventListener("message", event => { - const channelType = event.channelType; // Which channel type it is, Should be "STREAM" or "MESSAGE" . - const channelName = event.channelName; // Which channel does this message come from - const topic = event.topicName; // Which Topic does this message come from, it is valid when the channelType is "STREAM". - const messageType = event.messageType; // Which message type it is, Should be "sting" or "binary" . - const customType = event.customType; // User defined type - const publisher = event.publisher; // Message publisher - const message = event.message; // Message payload - const pubTime = event.publishTime; // Message publisher timestamp -}); -// Presence -rtm.addEventListener("presence", event => { - const action = event.eventType; // Which action it is ,should be one of 'SNAPSHOT'、'INTERVAL'、'JOIN'、'LEAVE'、'TIMEOUT、'STATE_CHANGED'、'OUT_OF_SERVICE'. - const channelType = event.channelType; // Which channel type it is, Should be "STREAM" or "MESSAGE" . - const channelName = event.channelName; // Which channel does this event come from - const publisher = event.publisher; // Who trigger this event - const states = event.stateChanged; // User state payload - const interval = event.interval; // Interval payload - const snapshot = event.snapshot; // Snapshot payload -}); -// Topic -rtm.addEventListener("topic", event => { - const action = event.evenType; // Which action it is ,should be one of 'SNAPSHOT'、'JOIN'、'LEAVE'. - const channelName = event.channelName; // Which channel does this event come from - const publisher = event.userId; // Who trigger this event - const topicInfos = event.topicInfos; // Topic information payload - const totalTopics = event.totalTopics; // How many topics -}); -// Storage -rtm.addEventListener("storage", event => { - const channelType = event.channelType; // Which channel type it is, Should be "STREAM" or "MESSAGE" . - const channelName = event.channelName; // Which channel does this event come from - const publisher = event.publisher; // Who trigger this event - const storageType = event.storageType; // Which category the event is, should be 'USER'、'CHANNEL' - const action = event.eventType; // Which action it is ,should be one of "SNAPSHOT"、"SET"、"REMOVE"、"UPDATE" or "NONE" - const data = event.data; // 'USER_METADATA' or 'CHANNEL_METADATA' payload -}); -// Lock -rtm.addEventListener("lock", event => { - const channelType = event.channelType; // Which channel type it is, Should be "STREAM" or "MESSAGE" . - const channelName = event.channelName; // Which channel does this event come from - const publisher = event.publisher; // Who trigger this event - const action = event.evenType; // Which action it is ,should be one of 'SET'、'REMOVED'、'ACQUIRED'、'RELEASED'、'EXPIRED'、'SNAPSHOT' - const lockName = event.lockName; // Which lock it effect - const ttl = event.ttl; // The ttl of this lock - const snapshot = event.snapshot; // Snapshot payload -}); -// Connection State Change -rtm.addEventListener("status", event => { - const currentState = event.state; // Which connection state right now - const changeReason = event.reason; // Why trigger this event -}); -// Token Privilege Will Expire -rtm.addEventListener("TokenPrivilegeWillExpire", (channelName) => { - const channelName = channelName; // Which Channel Token Will Expire +// add message event listeners +rtm.addEventListener({ + // Message + message : event => { + const channelType = event.channelType; // Channel type, 'STREAM' or 'MESSAGE'. + const channelName = event.channelName; // Channel name + const topic = event.topicName; // Topic name, available only when channelType is 'STREAM'. + const messageType = event.messageType; // Message type, "string" or "binary" . + const customType = event.customType; // User-defined type + const publisher = event.publisher; // Message publisher + const message = event.message; // Message payload + const pubTime = event.publishTime; // Message timestamp + }, + // Presence + presence : event => { + const action = event.eventType; // Action type, 'SNAPSHOT','INTERVAL','JOIN','LEAVE','TIMEOUT,'STATE_CHANGED','OUT_OF_SERVICE'. + const channelType = event.channelType; // Channel type, 'STREAM' or 'MESSAGE'. + const channelName = event.channelName; // Channel name + const publisher = event.publisher; // User triggers this event + const state = event.stateChanged; // User state payload + const interval = event.interval; // Interval payload + const snapshot = event.snapshot; // Snapshot payload + }, + // Topic + topic : event => { + const action = event.evenType; // Action type, 'SNAPSHOT','JOIN',or 'LEAVE'. + const channelName = event.channelName; // Channel name + const publisher = event.userId; // User triggers this event + const topicInfos = event.topicInfos; // Topic information payload + const totalTopics = event.totalTopics; // Topic number + }, + // Storage + storage : event => { + const channelType = event.channelType; // Channel type, 'STREAM' or 'MESSAGE'. + const channelName = event.channelName; // Channel name + const publisher = event.publisher; // User triggers this event + const storageType = event.storageType; // Category of the metadata, 'USER or 'CHANNEL' + const action = event.eventType; // Action type, 'SNAPSHOT', 'SET', 'REMOVE', 'UPDATE' or 'NONE' + const data = event.data; // User metadata or channel metadata payload + }, + // Lock + lock : event => { + const channelType = event.channelType; // Channel type, 'STREAM' or 'MESSAGE'. + const channelName = event.channelName; // Channel name + const publisher = event.publisher; // User triggers this event + const action = event.evenType; // Action type, 'SET','REMOVED','ACQUIRED','RELEASED','EXPIRED', or 'SNAPSHOT' + const lockName = event.lockName; // Lock name + const ttl = event.ttl; // The ttl of this lock + const snapshot = event.snapshot; // Snapshot payload + }, + // Connection State Change + status : (states, reason) => { + const currentState = states; // Connection state + const changeReason = reason; // Reason Why the user triggers this event + }, + // Token Privilege Will Expire + TokenPrivilegeWillExpire : (channelName) => { + const channelName = channelName; // Name of the channel in which the token is to expire + }, }); ``` @@ -979,22 +971,22 @@ The presence feature provides the ability to monitor user online, offline, and u Presence applies to both message channels and stream channels. -### `getOnlineUsers` +### `whoNow` #### Description -Call the `getOnlineUsers` method to query user information in real-time such as the number of online users, the list of online users and their temporary user status in the specified channel. +Call the `whoNow` method to query user information in real-time such as the number of online users, the list of online users and their temporary user status in the specified channel. #### Method -You can call the `getOnlineUsers` method in the following way: +You can call the `whoNow` method in the following way: ```javascript -rtm.presence.getOnlineUsers( +rtm.presence.whoNow( channelName: string, channelType: string, options?: object -): Promise; +): Promise; ``` @@ -1021,7 +1013,7 @@ const options = { page : "yourBookMark" } try { - const result = await rtm.presence.getOnlineUsers( "chat_room", 'MESSAGE', options ); + const result = await rtm.presence.whoNow( "chat_room", 'MESSAGE', options ); console.log(result); } catch (status) { console.log(status); @@ -1030,9 +1022,9 @@ try { #### Return Value -If the method call succeeds, a `GetOnlineUsersResponse` is returned. +If the method call succeeds, a `WhoNowResponse` is returned. ```javascript -type GetOnlineUsersResponse = { +type WhoNowResponse = { timeToken: number , // Reserved property, indicating the timestamp of the successful operation. totalOccupancy : number , // Number of the online users in the channel. occupants : Array , // List of the online users in the channel and their temporary user state. @@ -1043,18 +1035,18 @@ type GetOnlineUsersResponse = { If the method call fails, [`ErrorInfo`](#errorinfo) is returned. -### `getUserChannels` +### `whereNow` #### Description -In scenarios such as statistic analytics and debugging, you may need to know all the channels that a specified user has subscribed to or joined. Call the `getUserChannels` method to get the list of channels where the specified user is in real-time. +In scenarios such as statistic analytics and debugging, you may need to know all the channels that a specified user has subscribed to or joined. Call the `whereNow` method to get the list of channels where the specified user is in real-time. #### Method -You can call the `getUserChannels` method in the following way: +You can call the `whereNow` method in the following way: ```javascript -rtm.presence.getUserChannels(userId: string): Promise; +rtm.presence.whereNow(userId: string): Promise; ``` | Parameter | Type | Required | Default | Description | @@ -1065,7 +1057,7 @@ rtm.presence.getUserChannels(userId: string): Promise; ```javascript try { - const result = await rtm.presence.getUserChannels( "Tony" ); + const result = await rtm.presence.whereNow( "Tony" ); console.log(result); } catch (status) { console.log(status); @@ -1074,9 +1066,9 @@ try { #### Return value -If the method call succeeds, a `GetUserChannelsResponse` is returned. +If the method call succeeds, a `WhereNowResponse` is returned. ```javascript -type GetUserChannelsResponse = { +type WhereNowResponse = { timeToken: number , // Reserved property, indicating the timestamp of the successful operation. totalChannel : number , // Number of the channels that the user has joined or subscribed to. channels : Array // List of the channels including channel name and channel type. @@ -2010,7 +2002,7 @@ You can call the `setLock` method in the following way: ```javascript rtm.lock.setLock( channelName: string, - channelType: string, + channelType: ConstantsType.ChannelType, lockName: string, options?: { ttl?: number; @@ -2037,7 +2029,7 @@ rtm.lock.setLock( try { const result = await rtm.Lock.setLock( channel:"my_channel", - channelType:"STREAM", + channelType:1, lockName: "my_lock", { ttl: 30 } ); @@ -2251,7 +2243,7 @@ You can call the `getLock` method in the following way: ```javascript rtm.lock.getLock( channelName: string, - channelType: string + channelType: ConstantsType.ChannelType ): Promise; ``` @@ -2282,11 +2274,7 @@ type GetLockResponse = { channelName : string , // Channel name. channelType : string , // Channel type. totalLocks : string, // Total lock number. - lockDetails : [{ - lockName: string, // Lock name. - owner: string, // Lock owner. - ttl: number // Time to live in seconds of the lock. - }] + lockDetails : Array // Details of the lock, consisting of an abject that contains lock name, lock owner, and time to live } ``` If the method call fails, [`ErrorInfo`](#errorinfo) is returned. @@ -2304,7 +2292,7 @@ You can call the `removeLock` method in the following way: ```javascript rtm.lock.removeLock( channelName: string, - channelType: string, + channelType: ConstantsType.ChannelType, lockName: string ): Promise; ``` diff --git a/shared/signaling/storage/project-test/index.mdx b/shared/signaling/storage/project-test/index.mdx index 1a9c70aad..7b1ffffef 100644 --- a/shared/signaling/storage/project-test/index.mdx +++ b/shared/signaling/storage/project-test/index.mdx @@ -8,11 +8,6 @@ import MacOS from './macos.mdx' import Unity from './unity.mdx' import Windows from './windows.mdx'; -import Test from '@docs/shared/common/project-test/index.mdx'; - -To test this functionality: - - diff --git a/shared/signaling/storage/project-test/web.mdx b/shared/signaling/storage/project-test/web.mdx index b3f1de736..47b93d6f2 100644 --- a/shared/signaling/storage/project-test/web.mdx +++ b/shared/signaling/storage/project-test/web.mdx @@ -1,52 +1,62 @@ -4. **Login to as a first user** +1. In `/signaling-sdk-samples-web/src/signaling_manager/config.json`, update the following parameter values: - 1. Enter a numeric **User ID** and press **Login** to log in to . + * `appId`: Your enabled app ID from . - 1. Enter a **Channel name** and press **Subscribe** to subscribe to a channel. You see the following: + * `serverUrl`: The URL of your token server. See [Create and run a token server](../get-started/authentication-workflow#create-and-run-a-token-server) to set one up. - 1. Your User ID appears in the **Users in the channel** list. - 1. Under **Channel Metadata**, you see all the key-value pairs previously saved to the channel's storage. - 1. In the log events section at the bottom, you see notifications confirming update of user metadata. -4. **Login to as another user** +1. To access the token server from the web app, you use a proxy server. To start the proxy service, run the following command in Terminal from the `/signaling-sdk-samples-web/src` folder: - 1. In another browser tab, log in using a different **User ID**. Enter the same channel name as before, and press **Subscribe**. + ```bash + node proxy + ``` - You see that both User IDs appear in the user lists in both tabs. +1. To build and run the project, open a Terminal in the `/signaling-sdk-samples-web` folder, and run the following commands: -1. **Test metadata** + ``` bash + pnpm dev + ``` - In either tab, type in a **Key** and the **Value** you wish to store in the channel metadata, then press - **Update**. You see that the key-value pair is added or updated under **Channel Metadata** in both tabs. +1. In your browser, open `http://127.0.0.1:5173` and select the **Store channel and user data** project from the navigation bar. -1. **Test version control** +1. Enter a numeric **User ID** and press **Login** to log in to . - 1. Under **Set channel metadata**, type a new **Value** for an existing channel metadata **Key**. Enter a random positive integer for **Revision** and press **Update**. The log events section shows that the storage operation fails due to `outdated revision`. +1. Enter a **Channel name** and press **Subscribe** to subscribe to a channel. You see the following: + + 1. Your User ID appears in the **Users in the channel** list. + 1. Under **Channel Metadata**, you see all the key-value pairs previously saved to the channel's storage. + 1. In the log events section at the bottom, you see notifications confirming update of user metadata. + +1. In another browser tab, load `http://127.0.0.1:5173/src/storage/index.html` and log in using a different **User ID**. Enter the same channel name as before, and press **Subscribe**. You see that both User IDs appear in the user lists in both tabs. + +1. In either tab, type in a **Key** and its associated **Value** you wish to store in the channel metadata and then press **Update**. You see that the key-value pair is added or updated under **Channel Metadata** in both tabs. + +1. Test version control: + + 1. Under **Set channel metadata**, type a new **Value** for an existing channel metadata **Key**. Enter a random positive integer for **Revision** and press **Update**. The log events section shows that the storage operation fails due to 'outdated revision'. 1. Update the **Revision** value to show the same number as displayed against the metadata key under **Channel Metadata**, then press **Update** again. This time, the operation succeeds. -1. **Test locks** +1. Test locks: - 1. Under **Manage Locks**, type a **Lock Name** and press **Set**. You see a `SET` event notification confirming creation of the lock. + 1. Type a **Lock Name** under **Manage Locks** and press **Set**. You see a `SET` event notification confirming creation of the lock. - 1. In **Lock to apply**, enter the same lock name and press **Update**. You see an error reporting that the lock has not been acquired. + 1. Enter the same lock name in **Lock to apply** and press **Update**. You see an error reporting that the lock has not been acquired. 1. Press **Acquire**. You see an `ACQUIRED` event notification confirming acquisition of the lock. - 1. Press **Update**, this time the channel key value is updated under **Channel Metadata**. + 1. Press **Update** again, this time the channel key value is updated under **Channel Metadata**. 1. Press **Get**. You see details of all current locks in the logs section. 1. Press **Release** to release the lock, and **Remove** to delete it. -1. **Test metadata** +1. Test metadata: - 1. In **Save bio to user metadata**, type in some text and press **Update Bio**. You see user metadata `UPDATE` - notifications in both tabs. + 1. In either browser tab, type in some text in the **Save bio to user metadata** box and press **Update Bio**. You see user metadata `UPDATE` notifications in both tabs. - 1. In the other browser tab, under **Users in the channel** select the user for which you modified the User bio. - You see their updated metadata displayed in the log events section. + 1. In the other browser tab, select the user for which you modified the User bio under **Users in the channel**. You see their updated metadata displayed in the log events section. diff --git a/shared/signaling/stream-channel/_stream-channel.mdx b/shared/signaling/stream-channel/_stream-channel.mdx index e5c61797f..9d4cb6fbd 100644 --- a/shared/signaling/stream-channel/_stream-channel.mdx +++ b/shared/signaling/stream-channel/_stream-channel.mdx @@ -1,4 +1,5 @@ import * as data from '@site/data/variables'; +import Setup from '@docs/shared/common/project-setup/index.mdx'; import ProjectImplement from '@docs/shared/signaling/stream-channel/project-implementation/index.mdx'; import ProjectTest from '@docs/shared/signaling/stream-channel/project-test/index.mdx'; import Reference from '@docs/shared/signaling/stream-channel/reference/index.mdx'; @@ -31,6 +32,11 @@ This section shows how to use the to implement stream channels a ## Test stream channels +For each user you use in your tests: + +1. [Generate a temporary token](../reference/manage-agora-account#generate-a--token). + + ## Reference diff --git a/shared/signaling/stream-channel/project-implementation/web.mdx b/shared/signaling/stream-channel/project-implementation/web.mdx index 866dcc003..573eddaae 100644 --- a/shared/signaling/stream-channel/project-implementation/web.mdx +++ b/shared/signaling/stream-channel/project-implementation/web.mdx @@ -36,7 +36,7 @@ } else { streamChannel.leave().then((response) => { console.log(response); - messageCallback("Left the channel: " + streamChannelName); + messageCallback("left channel: " + streamChannelName); streamChannel = null; }); } @@ -60,7 +60,7 @@ } else { signalingManager.getSignalingStreamChannel().leaveTopic(topicName).then((response) => { console.log(response); - messageCallback("Left the topic: " + response.topicName); + messageCallback("left topic: " + response.topicName); }); } }; diff --git a/shared/signaling/stream-channel/project-test/index.mdx b/shared/signaling/stream-channel/project-test/index.mdx index f030391fe..7b1ffffef 100644 --- a/shared/signaling/stream-channel/project-test/index.mdx +++ b/shared/signaling/stream-channel/project-test/index.mdx @@ -7,11 +7,7 @@ import Flutter from './flutter.mdx'; import MacOS from './macos.mdx' import Unity from './unity.mdx' import Windows from './windows.mdx'; -import Test from '@docs/shared/common/project-test/index.mdx'; -To test this functionality: - - diff --git a/shared/signaling/stream-channel/project-test/web.mdx b/shared/signaling/stream-channel/project-test/web.mdx index 56b548f25..835959019 100644 --- a/shared/signaling/stream-channel/project-test/web.mdx +++ b/shared/signaling/stream-channel/project-test/web.mdx @@ -1,9 +1,35 @@ +2. In `/src/signaling_manager/config.json`: -4. **Test stream channels**: + 1. Replace the value for `token` with the temporary token. - 1. For each user, open the reference app in a new tab in your browser. + 1. Replace the values for `uid`, and `appId` with the with the values from . This must be the same app ID you used to generate the token. Channel name can be any string. - 1. Log in to , then send and receive messages using topics in channels. + 1. Replace the value for `serverUrl` with your [token server url](/en/signaling/get-started/authentication-workflow#create-and-run-a-token-server). For example: `https://agora-token-service-production-yay.up.railway.app`. + +1. **Run the proxy server** + + For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. To make requests to your + token server, this sample app uses the [NodeJS corsAnywhere proxy](/src/authentication_guide/proxy.js) which adds [CORS + headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) to the proxied requests. To start this server: + + 1. In a new Terminal, navigate to `/src` + + 1. Run the following command: + + ``` bash + node proxy + ``` + +1. Open a command prompt in the project folder, and run the following command: + + ``` bash + pnpm dev + ``` +1. For each user, in a new tab in your browser: + + 1. Open the reference app at http://127.0.0.1:5173/src/stream_channel/index.html. + + 1. Login to , then send and receive messages using topics in channels. diff --git a/signaling/get-started/get-started-sdk.mdx b/signaling/get-started/get-started-sdk.mdx index 67c555496..fcbc57444 100644 --- a/signaling/get-started/get-started-sdk.mdx +++ b/signaling/get-started/get-started-sdk.mdx @@ -41,17 +41,8 @@ In order to follow this procedure you must: -- [Raise a support ticket](https://agora-ticket.agora.io/) to activate . In your ticket, please provide the following details: - - Your Customer Id - - The project VID for which you want Signaling enabled - - The App Id for the project in which you want to integrate Signaling - - Do you require Stream Channel activation: Yes or No - - Do you need data storage (Storing user and channel attributes as metadata): Yes or No - - Your geographical region for product activation: US, EU, APAC (excluding China), or China - - The support team confirms activation through a ticket update. - -
  • Signaling 2.x is an enhanced version compared to 1.x with a wide range of new features. It follows a new pricing structure. Please visit the [Pricing](../reference/pricing) page for details.
  • The beta version of Signaling 2.x is offered free for testing its features and performance.
+- Contact support@agora.io and enable v for your project. + diff --git a/signaling/reference/pricing.mdx b/signaling/reference/pricing.mdx index 5b614a404..0d624675e 100644 --- a/signaling/reference/pricing.mdx +++ b/signaling/reference/pricing.mdx @@ -7,13 +7,13 @@ description: > export const toc = [{}] -This page explains how calculates your monthly bill for . - +This page explains how calculates your monthly bill for . + If you have already signed a contract with , the billing terms and conditions within that contract take precedence. -## 1.x pricing plans, features, and limitations +## pricing plans, features, and limitations provides the following pricing plans: @@ -143,44 +143,10 @@ The size of a single message in is calculated as 1 KB. If you send Storage in generates cloud storage occupancy. Agora samples and accumulates your actual cloud storage occupancy at 1-hour intervals to calculate the monthly fee. - - - - -## 2.x pricing plans - - 2.x is an enhanced version with wide range of new features compared to 1.x and follows a new pricing structure. You can choose from the following packages: - -| Signaling 2.x Package | Description | Package Price Per Month in USD | -|:-------------|:------------------------------------------|:----------| -| Free Package | Up to 100 Peak Concurrent Users, 100K Daily Message Volume, 3M Monthly Message volume, 1 GB Storage | Free | -| Starter Package | Up to 500 Peak Concurrent Users, 1M Daily Message Volume, 30M Monthly Message volume, 2 GB Storage | $59.00 | -| Pro Package | Up to 5K Peak Concurrent Users, 10M Daily Message Volume, 300M Monthly Message volume, 5 GB Storage | $399.00 | -| Business Package | Up to 10K Peak Concurrent Users, 20M Daily Message Volume, 600M Monthly Message volume, 10 GB Storage | $820.00 | -| Enterprise Package | For Every 1000 Peak Concurrent Users - $15
For Every 1 Million Message Count - $1.5
For Every GB of Storage -$7.5 | Pay –as-you-go (with defined unit prices in the description ) | - -### Costing examples - -**Example 1 - Fixed package**: Suppose you are using Signaling 2.x and the number of peak concurrent users (PCU) is less than 5,000, the total message count per month is less than 10 million and storage usage is less than 5 GB. The monthly billing will be $399 considering the Pro Package. - -**Example 2 - Pay-as-you-go**: Suppose you are using Signaling 2.x and the number of peak concurrent users is 20,000, the total message count per month is 7051 Million and the storage is 10 GB. The monthly billing will be as follows: - -* PCU: 20,000 - * PCU Cost = 20000/1000 x $15 = $300 ($15 for Every 1000 Peak Concurrent Users) -* Message count: 7051 Million - * Messages Cost = 7051 x $1.50 = $10,576 ($1.50 for every 1 million message count) -* Storage: 10GB - * Storage cost = 10 x $7.50= $75 ($7.50 for Every GB of Storage -$7.5) -* **Total cost**: $300 + $10,576 + $75 = $10,951 USD (PCU + Messages + Storage) - -The beta version of Signaling 2.x is offered free of charge for testing its features and performance for the duration of its public beta. - - - ## See also [Billing policies and free-of-charge policy](../reference/billing-policies) + - - + v2.x is free of charge for the duration of its public beta.