Sample app

Here we provide you with a sample application to experience ZEGOCLOUD's In-app Chat, and also describe how to run the sample code.

Prerequisites

• A device that is connected to the internet and have a browser installed.

• Node.js 14.18.1 or later
• For the browser compatibility, see Compatibility.
• Contact the ZEGOCLOUD Technical support to get the AppID and ServerSecret for SDK integration.
• Get the Token that SDK required for login authentication. For details, see Authentication.

Sample code structure

The following structure shows the subdirectory structure of the In-app Chat sample code:

├── README.md                     # Description on how to run the sample project
├── index.html
├── package.json                    
├── public                        
├── src 
│   ├── App.vue                   # Business component   
│   ├── assets                    # Media resources   
│   ├── components                # Business component directory  
│   ├── components.d.ts            
│   ├── env.d.ts                    
│   ├── main.ts                   # Entry file
│   ├── utils.ts                  # Utility class methods    
│   ├── store                     
│   ├── styles                    # css file directory    
├── tsconfig.json                 # ts config file  
├── vite.config.ts                # vite config file 

Run the sample code

1. Open the utils.ts file under the src folder, and modify the configurations with the AppID and ServerSecret you get in the Prerequisites steps and save it.

   const appConfig = {
       appID: 0, // Contact the ZEGOCLOUD techinical support to get the AppID. 
       serverSecret: '', // ontact the ZEGOCLOUD techinical support to get the ServerSecret.
   };

2. Run the following command in sequence to start the project by referring to the README.md file.

   npm install # Install dependencies required.
   npm run dev # Run the sample project after installing dependencies.