JavaScript

Crear la interfaz de usuario

Crea la interfaz de usuario para tu aplicación de chat web.

El siguiente código HTML define 2 <section> áreas que utilizarás para mostrar:

Botones para iniciar sesión como Alice o Bob
La interfaz de chat incluye la alimentación de mensajes junto con un área de texto y un botón para enviar mensajes

La página web carga dos scripts una vez que se ha cargado el cuerpo de la página:

El vonageClientSDK.min.js archivo de la @vonage/client-sdk Carpeta de módulos de nodo
El chat.js archivo que contendrá el código de tu aplicación. Crea este archivo vacío en el directorio raíz del proyecto

Cree un archivo llamado index.html en el directorio de su proyecto con el siguiente contenido:

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                font: 13px Helvetica, Arial;
            }

            button {
                cursor: pointer;
            }

            #login {
                width: 100%;
                height: 100vh;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            #message-textarea {
                width: 85%;
                font-size: 20px;
            }

            #messages {
                display: none;
            }

            #message-feed {
                font-size: 18px;
                padding-bottom: 20px;
                line-height: 22pt;
                height: 300px;
                overflow-y: auto;
            }

            #send {
                width: 85%;
            }
        </style>
    </head>

    <body>
        <section id="login">
            <button id="alice-login">Log in as Alice</button>
            <br /><br />
            <button id="bob-login">Log in as Bob</button>
        </section>

        <section id="messages">
            <div id="message-feed"></div>
            <div>
            <textarea id="message-textarea"></textarea>
            <button id="send">Send</button>
            </div>
        </section>

        <script src="./node_modules/@vonage/client-sdk/dist/vonageClientSDK.min.js"></script>
        <script src="./chat.js"></script>
    </body>
</html>