Chatroom SLB

This is an project Vite project using Lit 2, Typescript, and Sass imports.

structure

Chatroom App ├── index.html │ ├── │ ├── app.ts │ ├── │ ├── main.component.ts │ ├── main.controller.ts │ ├── main.model.ts │ ├── main.scss │ ├── ... ├── public/ │ ├── index.scss ├── src/ │ ├── components/ │ ├── main/ │ ├── main.component.ts │ ├── main.controller.ts │ ├── main.model.ts │ ├── main.scss │ ├── ... │ ├── models/ │ ├── ... │ ├── services/ │ ├── ... │ ├── utils/ │ ├── ... │ ├── index.d.ts │ ├── app.ts │ ├── vite-env.d.ts ├── .env ├── .env.development ├── .env.production ├── package.json ├── tsconfig.json ├── vite.config.ts

Component Hierarchy

Root

• <chatroom-component> (src/app.ts)
  • Properties:
    • token: string
    • showMainContainer: boolean

  Main Container

  • <main-container> (src/components/main/main.component.ts)
    • Properties:
      • ...

    Dialog Box

    • <dialog-box> (src/components/dialog-box/dialog-box.component.ts)
      • Properties:
        • ...
      • Events:
        • ...

    Message Box

    • <message-box> (src/components/message-box/message-box.component.ts)
      • Properties:
        • ...
      • Events:
        • ...

Data Flow

1. ChatroomComponent initializes the main container
2. MainContainerComponent manages:
   • MQTT connection via MQTTService ...

Component Architecture

Each component follows MVC pattern:

• Component (.component.ts) - View layer
• Controller (.controller.ts) - Business logic
• Model (.model.ts) - Data management

Getting Started

Prerequisites

• Node.js
• npm

Installation

1. Clone the repository:

   git clone https://github.com/crag-wang/chatroom.git

2. Navigate to the project directory:

   cd chatroom

3. Install dependencies:

   npm install

Development

To start the development server, run:

npm run dev