Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 2 vistas

    Webdev-Labs - Aplicación Mini Chat - C - ZIP

    Cargado por

    j8043031

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    Webdev-Labs - Aplicación Mini Chat - C - ZIP

    Cargado por

    j8043031
    2 vistas13 páginas

    Título original

    webdev-labs -Aplicación Mini Chat_ c_ZIP

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    2 vistas13 páginas

    Webdev-Labs - Aplicación Mini Chat - C - ZIP

    Cargado por

    j8043031

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    de 13

    CS396: Primavera de 2022

    Introducción al Desarrollo Web


    Temario Horario Asignaciones Lecturas y Calendario Campuswire (en
    Referencias inglés)

    Asignaciones > Laboratorio 9. Aplicación Mini


    Chat
    Fecha de vencimiento el viernes, 05/27 @ 11:59 PM. 5 puntos.

    Créditos y felicitaciones:

    • Cooper Barth escribió el laboratorio original de WebSockets usando Node.js


    • Victoria Chávez diseñó las características de accesibilidad
    • Sarah lo adaptó para trabajar con Python

    Actualizaciones
    Si no puede hacer funcionar su servidor de chat local, use el servidor de chat del
    curso, al que se puede acceder aquí: wss://chat-server-cs396.herokuapp.com

    Lecturas de fondo
    • WebSockets para diversión y ganancias (una descripción general agradable y
    concisa)

    • Una introducción conceptual de WebSockets (una introducción más larga y


    detallada)

    • La biblioteca websockets (Python)

    • Demostración usando websockets y Python

    • Uso de pasajes en vivo de Aria


    • Borra la cola de borrado asertivo

    • Errores del lector de pantalla de Mac

    Hasta ahora, hemos estado usando el protocolo HTTP para enviar mensajes entre el cliente
    de un usuario en el servidor. Con HTTP, los clientes deben iniciar conexiones individuales con
    el servidor para solicitar y recibir datos.

    Sin embargo, hay ejemplos en los que puede ser útil que el servidor envíe datos al cliente sin
    que el cliente lo solicite explícitamente. Los WebSockets son útiles para estos casos, ya que
    cada cliente establece una conexión persistente con el servidor a través de la cual el
    servidor puede enviar mensajes.

    Protocolo HTTP (http:// o https://) Protocolo de socket web (ws:// o wss://)

    Hoy, creará una aplicación de mensajería con WebSockets. Esto requiere dos componentes:

    • Un servidor WebSocket que controla los mensajes entrantes de cada cliente

    • Un cliente que establece una conexión con el servidor y envía mensajes al servidor
    cada vez que un usuario chatea.

    Tenga en cuenta que el servidor y el cliente no tienen que estar en la misma máquina (y,
    además, el cliente ni siquiera tiene que estar alojado en la nube).
    1. Configura tus archivos y servidor local

    LAB09.ZIP 

    1. Organizar archivos
    1. Descarga el archivo y descomprímelo. Debería ver los siguientes archivos: lab09.zip

    lab09
    ├── client
    │ ├── client.js
    │ ├── index.css
    │ └── index.html
    └── server
    ├── .env
    ├── Procfile
    ├── app.py
    └── requirements.txt

    2. Configura tu entorno virtual


    Abra el terminal y navegue hasta el directorio dentro de su directorio. A continuación,
    configure un entorno virtual e instale las dependencias de la siguiente manera (en función
    de su sistema operativo): server lab09

    Para Mac, Unix, Linux o GitBash


    python3 -m venv env
    source env/bin/activate
    python -m pip install -r requirements.txt # install dependencies

    Para Windows Powershell o símbolo del sistema


    # create the virtual environment
    py -m venv env

    # run the activate.bat script as follows:


    env\Scripts\activate
    # and finally, install the Python dependencies
    py -m pip install -r requirements.txt

    3. Ejecute su servidor
    Tenga en cuenta que esto NO ES un servidor Flask. Ante esto:

    1. Ejecutará el servidor como un archivo python normal (con su entorno virtual activado):
    python app.py

    2. Cada vez que realice un cambio, tendrá que reiniciar el servidor. app.py

    2. Implementar la funcionalidad del servidor


    Antes de implementar cualquier cosa, haga un balance del código. Primero, abra en VS Code
    y échele un vistazo. Algunas cosas a tener en cuenta: server/app.py

    • Este servidor no usa flask. Más bien, está usando la biblioteca de terceros para
    escuchar las solicitudes de websocket. websockets

    • La función hace eco ingenuamente de un mensaje al cliente de


    origen. respond_to_message

    • El servidor no realiza un seguimiento de todos los websockets que están conectados a


    él. Por lo tanto, no sabe cómo transmitir el mensaje de un usuario a todas las demás
    conexiones de socket.

    async def respond_to_message(websocket, message):


    data = json.loads(message)
    print(data)
    websocket.send(json.dumps(data))

    Su trabajo consiste en editar el código para controlar los tres tipos diferentes de mensajes
    JSON que se muestran a continuación. Estos formatos de datos son obligatorios:
    simplemente los inventamos como formas razonables de enviar información de inicio de
    sesión, desconexión y chat. Puedes configurar estos mensajes como quieras, pero aquí solo
    tomamos algunas decisiones sobre cómo hacer las cosas: app.py

    1. Iniciar sesión: { "type": "login", "user_joined": "walter", "active_users":


    ["walter", "maria", "laura"] }
    2. Desconectar: { "type": "login", "user_left": "walter", "active_users":
    ["maria", "laura"] }

    3. Charla: { "type": "chat", "text": "is this working?", "username":


    "my_username" }

    Manejará cada uno de estos mensajes de acuerdo con las especificaciones que se describen
    a continuación:

    1. Iniciar sesión
    Si es "login", agregue el socket y el usuario registrado al
    diccionario: data.get('type') logged_in_users

    logged_in_users[websocket] = data.get('username')

    A continuación, envíe el siguiente mensaje a cada cliente:

    {
    "type": "login",
    "user_joined": data.get('username'),
    "active_users": list(logged_in_users.values())
    }

    Puede probar esto abriendo en su navegador web, haciendo clic en los botones "Conectar" y
    "Establecer nombre" (y también proporcionando un nombre de usuario) y viendo si obtiene la
    salida JSON correcta en la consola del navegador. lab09/client/index.html

    2. Desconectar
    Si es "desconectar", elimine al usuario del diccionario logged_in_users. data.type

    del logged_in_users[websocket]

    A continuación, envíe el siguiente mensaje a cada cliente:

    {
    "type": "disconnect",
    "user_left": data.get('username'),
    "active_users": list(logged_in_users.values())
    }
    Puede probar esto abriendo en una segunda pestaña del navegador y haciendo clic en los
    botones "Conectar" y "Establecer nombre" (y también proporcionando un nombre de
    usuario). A continuación, cierra la pestaña del navegador que acabas de abrir. Ahora vuelve a
    la primera pestaña del navegador y mira la consola. Debería ver un mensaje en la consola
    que indica que un usuario se conectó y luego se desconectó del servidor de
    chat. lab09/client/index.html

    3. Chat
    Si es "chat", simplemente envíe el objeto a cada cliente (no es necesario procesamiento).
    Puede probar esto enviando un mensaje de chat en el cliente y, a continuación, ver si obtiene
    la salida JSON correcta en la consola del navegador. data.get('type') data

    Si no es "login", "disconnect" o "message", ignore el mensaje (no lo transmita) y regístreselo


    en la consola: data.get('type') console.log('Unrecognized message type:', data);

    Transmitir el mensaje a todos


    Por último, escribirá código que iterará a través de los websockets rastreados desde el y
    transmitirá el mensaje recibido a todos los clientes conectados: logged_in_users

    for sock in logged_in_users:


    # Be sure to replace "data" with a message that conforms to
    # the specs above:
    await sock.send(json.dumps(data))

    Algunas notas sobre la ampliación de este ejercicio


    Si estuviéramos construyendo esto en una aplicación completa, (probablemente)
    almacenaríamos cada usuario, conversación y mensaje en una base de datos para
    cargar el historial de chat apropiado cada vez que el usuario abra la aplicación. Por
    ahora, los mensajes solo se almacenarán en el cliente y no se conservarán entre
    sesiones (¿quizás una característica de privacidad?).

    Probablemente también necesitaríamos que el usuario se autentique mediante un


    token JWT, y que un usuario solo pueda transmitir mensajes a personas con
    relaciones de seguimiento recíproco (tú me sigues y yo te sigo).
    3. Implementar la funcionalidad del cliente
    Ábrelo en tu navegador. La interfaz es una interfaz de chat simple que permite al usuario
    seleccionar una sala de chat (solo localhost por ahora), establecer su nombre y enviar
    mensajes a otros usuarios en la sala de chat. index.html

    Ahora ábrelo en VS Code y échale un vistazo. Gran parte de este cliente (simple) ya se ha
    implementado para usted, incluidos: client.js

    1. Código para configurar los oyentes de eventos web socket + socket (cuando el usuario
    hace clic en el botón "Conectar").
    2. Código para enviar mensajes al servidor (responder a eventos de la interfaz de usuario).
    3. Código para escuchar y responder a (algunos) eventos DOM.
    4. Código para manejar cambios en la interfaz de usuario (es decir, mostrar y ocultar
    elementos DOM).
    5. Un código auxiliar de controlador de eventos (función) llamado que
    implementará. handleServerMessage

    Su trabajo consistirá en implementar el controlador de eventos, que actualizará la interfaz


    de usuario cada vez que el cliente reciba un mensaje del servidor. Manejará los mensajes del
    servidor de acuerdo con las especificaciones que se describen a
    continuación: handleServerMessage

    1. Iniciar sesión o desconectar


    Si el tipo de datos es "login" o "disconnect", muestre la lista de usuarios registrados en el div
    (panel derecho). #users-list

    2. Chat
    Si data.type es "chat", añada el mensaje de chat al div (panel principal) con el nombre y el
    mensaje del remitente. Utilice las clases "left" y "right" para diferenciar al usuario actual de
    todos los demás usuarios. #chat

    Si su cliente y servidor funcionan, debería poder abrir dos pestañas separadas del
    navegador, iniciar sesión en el mismo servidor en cada una y enviar mensajes entre ellas (vea
    el video a continuación). index.html
    4. Accesibilidad
    Es importante pensar en cómo los usuarios ciegos o con baja visión podrían interactuar con
    una aplicación de chat. Específicamente:

    1. Los nuevos mensajes de chat se insertan en el DOM cada vez que otro usuario envía un
    mensaje.
    2. New users are coming and going all of the time.

    Given this, please ensure that all of the regions that are updated when websocket messages
    are received use the and attributes. Read more on live regions here. aria-live role

    Both Apple and Windows machines have a pre-installed screenreader. Use VoiceOver on Mac
    or Narrator on Windows to test the behavior described above (see instructions below).

    Screen Reader Demo


    Here is an example of how a screen reader might interact with your chat interface (turn on
    the volume):
    Lab09 Screen Reader Demo

    play_arrow

    Con tecnología de Panopto closed_caption fullscreen


    keyboard_arrow_up
    Mac VoiceOver Instructions
    Turn on VoiceOver
    Open System Preferences, go to Accessibility, and enable VoiceOver
    Turn off VoiceOver
    Click the X on the top left of the gray VoiceOver transcription box

    Windows Narrator Instructions


    Turn on Narrator
    Open the Start menu, search for Narrator, enable and do not close the Narrator window

    Turn off Narrator


    Pull up the Narrator window and click Exit Narrator. If you’ve closed this window, press the
    Windows logo key + Ctrl + Enter on your keyboard. In earlier versions of Windows, you may
    need to press Windows logo key + Enter.

    5. (Optional) Experiment with ngrok


    Ngrok is a command line tool for creating a secure URL that points to server that is running
    on your local computer. Using this url, others can access your server securely without you
    having to host it online.

    You should sign up for ngrok using your Northwestern email and download/extract the
    version for your preferred OS.

    Run ; if the command fails, find the location where the ngrok executable was downloaded to
    and add the folder to your system PATH. Then, run with the token listed in your ngrok
    dashboard. ngrok help ngrok authtoken <token>
    With your server running in another terminal window, type to open a tunnel to your server.
    You should now be able to add the forwarding url (minus the http://) to the list of servers on
    your client and use it as a separate chat room. ngrok http 8081

    What to Turn In
    When you’re done, zip the completed folder and submit it to Canvas.

    También podría gustarte