Forem: Omar Malas

Laravel Reverb: make a chatbox component for your site!

Omar Malas — Wed, 03 Apr 2024 22:31:25 +0000

Laravel 11 was released a few weeks ago and with it is laravel reverb, a first-party websocket package to help with real-time applications.
In this article I'll demonstrate how to make a simple chatbox component for support-related purposes...

first off we'll create a new laravel application using laravel new

laravel new chatbox
cd chatbox

then after all installation is complete we can use the new command to install laravel reverb

php artisan install:broadcasting

make sure the .env file has this line set to sync

QUEUE_CONNECTION=sync

next all we have to do is to create an event and listen on its channel

php artisan make:event MessageSent

and make it look something like this

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class MessageSent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     */
    public function __construct( public string $name, public string $text)
    {
        //
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */
    public function broadcastOn(): array
    {
        return [
            new Channel('messages'),
        ];
    }
}

next we create the livewire component to listen on the channel

php artisan make:volt ChatBox --class

and make it like so...

<?php
use App\Events\MessageSent;
use Livewire\Volt\Component;
new class extends Component
{
    /**
     * @var string[]
     */
    public array $messages = [];
    public string $message = '';
    protected $listeners = ['echo:messages,MessageSent' => 'onMessageSent'];
    public function addMessage()
    {
        MessageSent::dispatch(auth()->user()->name, $this->message);
        $this->reset('message');
    }
    #[On('echo:messages,MessageSent')]
    public function onMessageSent($event)
    {
        $this->messages[] = $event;
    }
}
?>

<div x-data="{ open: true }" >
    <div :class="{'-translate-y-0': open, 'translate-y-full': !open}" class="fixed transition-all duration-300 transform bottom-10 right-12 h-60 w-80">
        <div class="mb-2">
            <button @click="open = !open" type="button" :class="{ 'text-indigo-600 dark:text-white hover:bg-transparent': open }" class="w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-white rounded-lg hover:bg-indigo-400 dark:bg-indigo-600 dark:hover:bg-indigo-400">
                Chat

                <x-heroicon-o-chevron-up x-show="!open" x-cloak class="ms-auto block size-4" />
                <x-heroicon-o-chevron-down x-show="open" x-cloak class="ms-auto block size-4" />

            </button>
        </div>
        <div class="w-full h-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded overflow-auto flex flex-col px-2 py-4">
            <div x-ref="chatBox" class="flex-1 p-4 text-sm flex flex-col gap-y-1">
                @foreach($messages as $message)
                    <div><span class="text-indigo-600">{{ $message['name'] }}:</span> <span class="dark:text-white">{{ $message['text'] }}</span></div>
                @endforeach
            </div>
            <div>
                <form wire:submit.prevent="addMessage" class="flex gap-2">
                    <x-text-input wire:model="message" x-ref="messageInput" name="message" id="message" class="block w-full" />
                    <x-primary-button>
                        Send
                    </x-primary-button>
                </form>
            </div>
        </div>
    </div>
</div>

next we add it anywhere to the welcome page of the default laravel, and we need to start the reverb server...

php artisan serve

and on another terminal

php artisan reverb:start

and we are all set!
the chatbox should be working and all should be complete

Testing in Laravel: Types and Setup

Omar Malas — Wed, 23 Aug 2023 20:06:12 +0000

For Laravel Developers Testing is an essential part of development, it can ensure your function is doing what it’s supposed to.
To ensure that you need to have a robust testing suite in your Laravel applications, your testing techniques may differ from your co-worker, but the goal is always the same.

Testing can be difficult when you don’t have a UI to work with, as lots of errors appear later when bootstrapping with your frontend team.

Without further ado, here’s the top kinds of Testing in Laravel:

1. Unit Tests
Unit tests focus on isolating and testing individual components or units of your code in isolation. These components can be functions, methods, or classes. Unit tests ensure that each piece of code behaves as expected and produces the correct output for a given input.

When to Use Unit Tests:

Testing individual methods or functions.
Validating core business logic.
Ensuring that edge cases and error handling are correctly implemented. For example:

public function testUserCanChangePassword()
{
    $user = User::factory()->create();

    $user->changePassword('newpassword');

    $this->assertTrue(Hash::check('newpassword', $user->password));
}

2. Feature Tests
Feature tests take a broader approach by testing the interaction between various components of your application. These tests simulate a user’s interaction with the application, such as visiting a webpage and performing actions like form submissions.

When to Use Feature Tests:

Testing user interactions with your application.
Validating entire user flows and user interface behavior.
Ensuring that routes, controllers, and views work harmoniously. For example:

public function testUserCanLogin()
{
    $user = User::factory()->create();

    $response = $this->post('/login', [
        'email' => $user->email,
        'password' => 'password',
    ]);

    $response->assertRedirect('/dashboard');
    $this->assertAuthenticatedAs($user);
}

3. Integration Tests
Integration tests examine how different parts of your application interact with each other. These tests help ensure that components integrate correctly and work seamlessly as a cohesive unit.
When to Use Integration Tests:

Testing interactions between different layers (e.g., database, external APIs).
Validating database operations and data persistence.
Ensuring proper communication between controllers, models, and views.

public function testUserCanCreatePost()
{
    $user = User::factory()->create();

    $response = $this->actingAs($user)
                     ->post('/posts', ['title' => 'New Post']);

    $response->assertStatus(201);
    $this->assertDatabaseHas('posts', ['title' => 'New Post']);
}

These three types of tests form the foundation of Laravel’s testing suite. By employing a combination of unit, feature, and integration tests, you can thoroughly assess your application’s functionality, codebase, and user interactions. A comprehensive testing strategy contributes to code quality, reduces bugs, and enables smoother development and maintenance.

In the next sections, we’ll delve into setting up your testing environment.

Setting Up Testing Environment
Before you embark on your journey of writing tests for your Laravel applications, it’s essential to set up a proper testing environment. Laravel makes this process straightforward, providing tools and configurations that facilitate effective testing. Here’s how to get started:

1. Configure Testing Environment
Laravel comes with predefined environment configurations for testing. In your .env file, ensure the APP_ENV is set to testing when running tests. This helps Laravel automatically use the testing configuration settings.

APP_ENV=testing

2. Artisan Commands
Laravel’s Artisan command-line tool provides essential commands to assist you in testing:

To run all tests in the tests directory:

php artisan test

To run tests in a specific file or directory:

php artisan test path/to/YourTest.php

3. Database Configuration
Laravel’s testing environment uses an in-memory SQLite database by default, allowing tests to be isolated and perform operations without affecting your development or production databases. You can modify this configuration in config/database.php

'testing' => [
    'driver' => 'sqlite',
    'database' => ':memory:',
    // ...
],

4. Factories and Seeders
Factories and seeders are essential for generating test data. Laravel’s factories help you create test models with predefined attributes. Use the database/factories directory to define your factories and the database/seeders directory to set up your database seeders.

5. PHPUnit Configuration
Customize PHPUnit configurations in the phpunit.xml file in your project root. You can set up code coverage reports, specify test directories, and configure various testing-related options.

6. Testing Traits
Laravel provides testing traits to assist you in writing tests with common functionality. For example, the RefreshDatabase trait automatically resets the database after each test, ensuring a clean slate for every test case.

use Illuminate\Foundation\Testing\RefreshDatabase;
By properly configuring your testing environment, you create a solid foundation for writing tests that provide accurate results and simulate real-world scenarios. In the next sections, we’ll dive into writing unit tests, feature tests, and integration tests to demonstrate how Laravel’s testing framework can be used effectively.

Conclusion
In the world of software development, testing is not just a process; it’s a practice that can significantly elevate the quality and reliability of your Laravel applications. The Laravel framework, equipped with the powerful PHPUnit testing framework, empowers developers to create tests that validate everything from individual components to entire user flows. By embracing a comprehensive testing strategy, you’re investing in the long-term success of your projects.

We explored the fundamental types of tests that Laravel offers: unit tests, feature tests, and integration tests. Each type serves a specific purpose in ensuring your application’s functionality, user interactions, and component integration are thoroughly assessed. Remember, testing isn’t just about catching bugs; it’s about crafting code that’s resilient, maintainable, and adaptable.

We also walked through the process of setting up your testing environment. Properly configuring your environment, leveraging Laravel’s testing traits, and utilizing testing tools like factories and seeders are crucial steps to ensure accurate and efficient testing.

Happy Coding! :)