Real-Time Multiplayer Game with Laravel & WebSockets

Hello, laravel web developers! In this article, we'll see real-time multiplayer game with laravel & websockets. Hey there! If you’ve ever wanted to create a multiplayer game that updates in real-time, you're in the right place.

In this guide, I’ll walk you through the process of building a real-time multiplayer game server using Laravel and WebSockets. We'll look at how to manage real-time communication between players, keep the game state synchronized, and handle the game logic on the server.

To start, make sure you have Laravel installed. If you don’t, you can install it via Composer:

composer create-project --prefer-dist laravel/laravel multiplayer-game

Next, let’s install the beyondcode/laravel-websockets package, which allows us to handle WebSocket connections easily within Laravel:

composer require beyondcode/laravel-websockets

Run the WebSocket server:

php artisan websockets:serve

Laravel Echo makes it easy to work with WebSockets in the frontend. To use it, we need to install the Echo library and the Pusher driver.

First, install the necessary dependencies:

npm install --save laravel-echo pusher-js

In your resources/js/bootstrap.js, initialize Laravel Echo:

Make sure the  file is correctly set up for WebSockets:

BROADCAST_DRIVER=pusher
PUSHER_APP_KEY=someRandomKey
PUSHER_APP_SECRET=someRandomSecret
PUSHER_APP_ID=yourAppId
PUSHER_APP_CLUSTER=mt1

Now, we’ll set up broadcasting for the game events. Players need to be updated about the game state in real-time, so we’ll broadcast these events over WebSockets.

In routes/channels.php, create a channel for the game:

Broadcast::channel('game.{gameId}', function ($user, $gameId) {
    return true;
});

Next, create a GameEvent that will broadcast game updates:

php artisan make:event GameEvent

In GameEvent.php, modify the broadcastOn() method to broadcast to a specific game channel:

public function broadcastOn()
{
    return new Channel('game.' . $this->game->id);
}

Now, trigger this event in your controller whenever the game state changes:

use App\Events\GameEvent;

public function updateGameState(Request $request, Game $game)
{
    // Update the game state
    $game->update($request->all());

    // Broadcast the updated game state
    broadcast(new GameEvent($game))->toOthers();

    return response()->json($game);
}

To ensure that all players see the same game state in real-time, you'll need to handle state synchronization on both the server and the client side.

First, listen for the broadcasted event on the client:

Echo.channel(`game.${gameId}`)
    .listen('GameEvent', (event) => {
        // Update the game state on the client side
        updateGameState(event.game);
    });

In this code, whenever the server broadcasts an update to the game, the client will receive the event and update the game state.

Now let’s implement some basic gameplay logic on the server. For example, if you’re building a simple turn-based game, you can manage the turn logic like this:

public function takeTurn(Request $request, Game $game)
{
    // Check if it's the player's turn
    if ($game->current_turn !== $request->user()->id) {
        return response()->json(['error' => 'Not your turn'], 403);
    }

    // Process the player's move (e.g., updating positions)
    $game->processMove($request->input('move'));

    // Broadcast the updated game state
    broadcast(new GameEvent($game))->toOthers();

    return response()->json($game);
}

On the client side, you can send the player's move to the server via an AJAX request:

axios.post(`/game/${gameId}/turn`, {
    move: playerMove,
})
.then(response => {
    console.log('Move processed:', response.data);
})
.catch(error => {
    console.error('Error:', error);
});

Finally, to see everything in action, make sure your WebSocket server is running:

php artisan websockets:serve

Now you can start testing the game with multiple players connected. As players make moves or update the game state, those changes will be broadcast in real-time to all connected clients.

You might also like:

• Read Also: Advanced Custom Error Handling and Logging Strategies in Laravel 11
• Read Also: How To Build Live Chat App In Laravel 9 And Vue JS
• Read Also: How to Image Upload Laravel 11 Vue 3 Example
• Read Also: Laravel 9 Vue JS CRUD Operation Example