Documentación Oficial

HoshiChat

Chat en tiempo real impulsado por Laravel Echo, Vue 3 y WebSockets. Instala en minutos y empieza a construir.

Laravel 10 Vue 3 Laravel Echo SQLite Vite
🪟

Instalación en Windows

16 pasos · PowerShell · PHP 8.2 · Node LTS

01 Instalar PHP 8.2 🐘

Ve a windows.php.net/download → descarga PHP 8.2 (64-bit) → extrae el ZIP en C:\php

PowerShell · Administrador 
setx PATH "%PATH%;C:\php"
php -v
✅ Si ves una versión, PHP está instalado
02 Instalar Composer 🎵

Ve a getcomposer.org/download → descarga Composer-Setup.exe → ejecútalo → cuando pida el path de PHP selecciona C:\php

Verificar 
composer --version
✅ Si ves una versión, Composer está instalado
03 Instalar Node.js LTS 💚

Ve a nodejs.org → descarga la versión LTS → Siguiente → Siguiente → Finalizar. Abre una nueva PowerShell y verifica:

PowerShell nueva 
node --version
npm --version
✅ Si ves dos versiones, Node.js está instalado
04 Instalar Git 🌿

Ve a git-scm.com → descarga para Windows → Siguiente → Siguiente → Finalizar

Verificar 
git --version
✅ Si ves una versión, Git está instalado
05 Clonar el repositorio 📦

Abre PowerShell en la carpeta donde quieras el proyecto (ej: C:\Proyectos)

PowerShell 
git clone https://github.com/IsoleucineDev/Laravel_Echo.git
cd Laravel_Echo
cd HoshiChat
✅ Debes ver carpetas: app/, resources/, routes/, database/…
06 Instalar dependencias PHP 📥
PowerShell · dentro de HoshiChat 
composer install
⏳ Puede tardar 2–3 minutos. Espera sin cerrar la ventana.
✅ Sin errores al finalizar
07 Instalar dependencias Node 📦
PowerShell 
npm install
⏳ Puede tardar 2–3 minutos. No cierres la ventana.
✅ Sin errores al finalizar
08 Crear el archivo .env 📄
PowerShell 
New-Item .env -Type File
Pega este contenido dentro del .env:
.env 
APP_NAME=HoshiChat
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost:8000

DB_CONNECTION=sqlite
DB_DATABASE=database/database.sqlite

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=test_id
PUSHER_APP_KEY=test_key
PUSHER_APP_SECRET=test_secret
PUSHER_APP_CLUSTER=mt1
09 Generar clave de la aplicación 🔑
PowerShell 
php artisan key:generate
✅ "Application key set successfully"
10 Crear base de datos SQLite 🗄️
PowerShell 
type nul > database/database.sqlite
✅ Se crea el archivo database.sqlite en la carpeta database/
11 Ejecutar migraciones 🏗️
PowerShell 
php artisan migrate
✅ Verás mensajes de tablas creadas
12 Cargar datos de prueba 🌱
PowerShell 
php artisan db:seed --class=ConversationSeeder
✅ "Conversaciones creadas exitosamente!"
13 Arrancar los servidores (2 terminales) 🖥️

Terminal #1 — Servidor Laravel:

PowerShell 1 
php artisan serve

Terminal #2 — Compilador Vite:

PowerShell 2 
npm run dev
⚠️ Ambas terminales deben quedar ABIERTAS mientras usas la app.
14 Abrir en el navegador 🌐
URL 
http://localhost:8000/chat
✅ Debes ver la página de login de HoshiChat
15 Iniciar sesión 🔐
  • Email: user1@example.com
  • Contraseña: password
  • Click en Login
✅ Si ves la interfaz de chat, ¡funciona!
16 Probar el chat en tiempo real ⚡
  • Abre otra ventana en modo incógnito (Ctrl+Shift+N)
  • Ve a http://localhost:8000/chat
  • Login con user2@example.com / password
  • Usuario 1 escribe "Hola"
  • Usuario 2 debe verlo al instante, sin recargar
✅ Si apareció sin recargar, ¡Laravel Echo funciona!
Checklist Final

✅ Checklist Windows

Progreso 0 / 17
🐧

Instalación en Linux

18 pasos · Terminal · apt · PHP 8 · Node 18

01 Actualizar el sistema 🔄
Terminal 
sudo apt update
sudo apt upgrade -y
✅ Sin errores = sistema actualizado
02 Instalar PHP y extensiones 🐘
Terminal 
sudo apt install php php-cli php-curl php-json php-sqlite3 php-mbstring php-tokenizer php-xml php-fpm -y
Verificar:
Verificar 
php -v
✅ Si ves una versión, PHP está instalado
03 Instalar Composer 🎵
Terminal 
curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer
sudo chmod +x /usr/local/bin/composer
Verificar:
Verificar 
composer --version
✅ Si ves una versión, Composer está instalado
04 Instalar Node.js 18 💚
Terminal 
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install nodejs -y
Verificar:
Verificar 
node --version
npm --version
✅ Si ves dos versiones, Node.js está instalado
05 Instalar Git 🌿
Terminal 
sudo apt install git -y
Verificar:
Verificar 
git --version
✅ Si ves una versión, Git está instalado
06 Clonar el repositorio 📦

Abre Terminal en la carpeta donde quieras el proyecto (ej: ~/Proyectos)

Terminal 
git clone https://github.com/IsoleucineDev/Laravel_Echo.git
cd Laravel_Echo
cd HoshiChat
Verificar carpetas:
Verificar 
ls -la
✅ Debes ver: app, bootstrap, config, database, resources, routes…
07 Configurar permisos de carpetas 🔓
Terminal 
sudo chown -R $USER:$USER .
chmod -R 755 storage bootstrap/cache
⚠️ Este paso evita errores de permisos más adelante. No lo saltes.
08 Instalar dependencias PHP 📥
Terminal 
composer install
⏳ Puede tardar 2–3 minutos. Espera sin cerrar.
✅ Sin errores al finalizar
09 Instalar dependencias Node 📦
Terminal 
npm install
⏳ Puede tardar 2–3 minutos. No cierres la ventana.
✅ Sin errores al finalizar
10 Crear el archivo .env 📄
Terminal 
cp .env.example .env
nano .env
Verifica que tenga este contenido:
.env 
APP_NAME=HoshiChat
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost:8000

DB_CONNECTION=sqlite
DB_DATABASE=database/database.sqlite

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=test_id
PUSHER_APP_KEY=test_key
PUSHER_APP_SECRET=test_secret
PUSHER_APP_CLUSTER=mt1
💾 Para guardar en nano: Ctrl+O → Enter → Ctrl+X
11 Generar clave de la aplicación 🔑
Terminal 
php artisan key:generate
✅ "Application key set successfully"
12 Crear base de datos SQLite 🗄️
Terminal 
touch database/database.sqlite
Verificar:
Verificar 
ls -la database/database.sqlite
✅ Debes ver el archivo listado
13 Ejecutar migraciones 🏗️
Terminal 
php artisan migrate
✅ Verás mensajes de tablas creadas
14 Cargar datos de prueba 🌱
Terminal 
php artisan db:seed --class=ConversationSeeder
✅ "Conversaciones creadas exitosamente!"
15 Arrancar los servidores (2 terminales) 🖥️

Terminal #1 — Servidor Laravel:

Terminal 1 
php artisan serve

Terminal #2 — Compilador Vite:

Terminal 2 
npm run dev
⚠️ Ambas terminales deben quedar ABIERTAS mientras usas la app.
16 Abrir en el navegador 🌐
URL 
http://localhost:8000/chat
✅ Debes ver la página de login de HoshiChat
17 Iniciar sesión 🔐
  • Email: user1@example.com
  • Contraseña: password
  • Click en Login
✅ Si ves la interfaz de chat, ¡funciona!
18 Probar el chat en tiempo real ⚡
  • Abre otra ventana en modo incógnito (Ctrl+Shift+N)
  • Ve a http://localhost:8000/chat
  • Login con user2@example.com / password
  • Usuario 1 escribe "Hola"
  • Usuario 2 debe verlo al instante, sin recargar
✅ Si apareció sin recargar, ¡Laravel Echo funciona!
Checklist Final

✅ Checklist Linux

Progreso 0 / 19