Improved Installation and Frontend Hooks in Laravel Echo 2.1

The Laravel team has just shipped some big improvements to Laravel Echo, a JavaScript library for real-time event broadcasting.

Improved Installation Experience

First, improvements have been made to the installation experience. When you run the install:broadcasting Artisan command, you will now be prompted for the relevant credentials, write the corresponding .env variables, and more.

New `useEcho` hook

Secondly, they have now added useEcho hooks for React and Vue. These hooks will make it simpler to start listening for events and automatically leave channels or disconnect when appropriate. For example, in Vue:

<script setup lang="ts">
import { useEcho } from "@laravel/echo-vue";
 
useEcho(
    `orders.${orderId}`,
    "OrderShipmentStatusUpdated",
    (e) => {
        console.log(e.order);
    },
);
</script>

New `useEchoModel` Hook

It is now easy to listen for model events with the new useEchoModel hook, including type safety.

<script setup lang="ts">
import { useEchoModel } from "@laravel/echo-vue";
 
useEchoModel("App.Models.User", userId, ["UserUpdated"], (e) => {
    console.log(e.model);
});
</script>

Specify the Shape of Event Payload Data

Lastly, support has also been added for allowing developers to specify the shape of their event payload data, providing better type safety and auto-completion.

type User = {
    id: number;
    name: string;
    email: string;
};
 
useEchoModel<User, "App.Models.User">("App.Models.User", userId, ["UserUpdated"], (e) => {
    console.log(e.model.id);
    console.log(e.model.name);
});