JavaScript

Create the UI

Create the user interface for your web chat application.

The following HTML defines 2 <section> areas that you will use to display:

  • Buttons to either log in as Alice or Bob
  • The chat interface including the feed of messages along with a text area and button to send messages

The web page loads two scripts once the page body has rendered:

  • The vonageClientSDK.min.js file from the @vonage/client-sdk Node modules folder
  • The chat.js file that will contain your application's code. Create this empty file in the project's root directory

Create a file named index.html in your project directory with the following contents:

Creating a web-based chat app

Create a web application that enables users to message each other

Steps
1
Introduction to this task
2
Prerequisites
3
Create a Vonage Application
4
Create a conversation
5
Create the users
6
Add users to the conversation
7
Generate JWTs
8
Install Client SDK
9
Create the UI
10
Authenticate your Users
11
Instantiate VonageClient and create a Session
12
Show the message history
13
Send a message
14
Run your application
15
What's next?