Necesitas un pase para acceder ⚡

Esta lección está disponible únicamente para usuarios premium.

Regístrate o ingresa a tu cuenta para continuar aprendiendo:

Laravel Aprendiz

Diseño para mostrar el estado en línea

En esta lección añadimos un círculo para indicar el estado de un usuario. Es decir, dependiendo de si está conectado, el círculo se tornará de un color representativo.

¡Comparte conocimiento!

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos

01

Bienvenida y recomendaciones importantes

02

Nuevo proyecto Laravel 5.5 o 5.6

03

Sublime Text y Git

04

NPM, Laravel Mix y dependencias JS

05

Autenticación e Introducción a BootstrapVue

06

Instalación y configuración de BootstrapVue

07

Vista de Login usando componentes de BV

08

Componentes de BV para formularios

09

Menú de navegación usando BV

10

Cerrar sesión y un primer evento general

11

Vista de Registro usando BootstrapVue

12

Alert danger para mensajes de error

13

Diseño del listado de contactos

14

Nuestros primeros componentes de Vue

15

Diseño de la conversación activa

16

Entidades y sus atributos

17

Conversation y Message

18

1 Conversación y 2 Mensajes

19

Primeros Endpoints en nuestra API

20

Cookies

21

Sesiones

22

JSON Web Tokens

23

Resumen y comparación

24

Demostración práctica en Laravel

25

Comunicación con un componente hijo

26

Axios: Petición HTTP en 2do plano

27

Consultar y listar 2 tipos de mensajes

28

Evento submit y registro de mensajes

29

Evitar autocompletado y editar data

30

Nuevo contacto y conversación

31

Mensajes según contacto

32

Adecuar respuesta JSON para Conversations

33

Query Builder a través de 1 relación

34

Listar conversaciones (Object vía props)

35

Model events y Observers

36

Evento click sobre un componente

37

Desactivar notificaciones de Laravel Mix

38

Comunicación con un componente padre

39

Cargar mensajes según selección

40

Observar cambios sobre variables props

41

Nombre del contacto seleccionado

42

Estado actual (sin real time)

43

Configuración inicial de Pusher

44

Laravel Echo y Pusher JS

45

Broadcast de eventos

46

Más acerca de las Queue Jobs

47

Escuchar eventos usando Laravel Echo

48

Mostrar mensaje recibido y refactorización

49

Mostrar barra de desplazamiento

50

Desplazar hasta el final

51

Más de un canal

52

Mostrar mensaje sólo cuando corresponde

53

Condición a prueba de balas y last message

54

Moment.js (Fechas con formato)

55

Interceptando mensajes de un canal público

56

Cómo definir y escuchar 1 canal privado

57

Diseño para mostrar el estado en línea

58

Presence channel (mostrar estado online)

59

Filtrar contactos

60

Gestionar perfil de usuario

61

Imágenes para todos y mix versioning

62

Resaltar selección

63

Repaso general y Event Bus

64

¿Qué es Vuex?

65

Instalación de Vuex

66

Mutations

67

De data a state (selectedConversation)

68

Actions

69

Getters

70

v-model reactive (respecto al state general)

71

Refactorizando ActiveConversation

72

Store como 1 archivo separado

73

Recapitulando lo visto sobre Vuex

74

Vue Router y conceptos relacionados

75

Instalación y uso de Vue Router

76

Push de ruta & Dispatch de action

77

De Laravel a Vue y parámetros de ruta

78

Server Side y Client Side Rendering

79

Últimos ajustes

80

Mensaje final y pasos siguientes

81

Silenciar notificaciones

82

Habilitar conversaciones

83

Integrar sobre proyecto Laravel existente

84

Delegar la gestión de rutas a Vue al 100%
Imagen de la serie Realtime Messenger usando Laravel, Vue, Bootstrap 4 y Pusher

Estás viendo un capítulo de la serie Realtime Messenger usando Laravel, Vue, Bootstrap 4 y Pusher

Curso gratuito de Laravel

Antes que te vayas

Inscríbete en nuestro curso gratuito de Laravel