Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

diazwatson's avatar

Multiplayer Game Using Livewire?

Hi, I am working on a multiplayer card game project and I would like to use Livewire for it.

The idea

  • Registered users can start a new game or join an existing one.
  • To join an existing game user needs to input a unique code (game identifier code?).
  • Players play in turns.
  • On every turn, a new card is presented to all players but only the player playing can interact with it (choosing true/false).

The Implementation

I have used Filament to build all the card, game and user management part but when it comes to the actual game mechanics, specially the multi user and shared game session part, I have no idea where to go 🤣

So the question is: What would be the best way to implement this part?

0 likes
8 replies
LaryAI's avatar
Level 58

Implementing a multiplayer game using Livewire can be quite challenging due to its nature of being a server-side rendering framework. However, it is possible to achieve real-time interactivity by combining Livewire with other technologies like Laravel Echo and Pusher or using WebSockets directly. Here's a high-level solution to implement the multiplayer card game mechanics:

  1. Game Lobby Creation and Joining:

    • Create a Game model with a unique identifier that players can use to join.
    • Use Livewire components to handle the creation of a new game and joining an existing game by entering the unique code.
  2. Real-time Updates:

    • Use Laravel Echo with Pusher or a similar service to broadcast game state changes to all connected clients in real-time.
    • Alternatively, you can use WebSockets directly with a package like Laravel WebSockets.
  3. Player Turns:

    • Manage turns by storing the current player's turn in the Game model.
    • Use Livewire to render the game state and check if it's the current player's turn to interact with the card.
  4. Card Interaction:

    • When it's a player's turn, enable interaction with the card through Livewire events.
    • After the player makes a choice, broadcast the updated game state to all players.

Here's a simplified example of how you might structure the Livewire components and the broadcasting part:

// GameComponent.php
class GameComponent extends Livewire\Component
{
    public $game;

    protected $listeners = ['echo:game.' . $this->game->id . ',GameUpdated' => 'updateGame'];

    public function mount($gameId)
    {
        $this->game = Game::find($gameId);
    }

    public function updateGame($gameState)
    {
        $this->game = $gameState;
    }

    public function playTurn($cardId, $choice)
    {
        if ($this->game->isPlayerTurn(auth()->user())) {
            // Perform the action with the card
            // ...

            // Update the game state
            $this->game->update(/* ... */);

            // Broadcast the updated game state
            broadcast(new GameUpdated($this->game))->toOthers();
        }
    }

    public function render()
    {
        return view('livewire.game-component', ['game' => $this->game]);
    }
}
// GameUpdated.php (Event)
class GameUpdated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $game;

    public function __construct($game)
    {
        $this->game = $game;
    }

    public function broadcastOn()
    {
        return new Channel('game.' . $this->game->id);
    }
}
// game-component.blade.php
<div>
    @if($game->isPlayerTurn(auth()->user()))
        <!-- Render the card with interaction options -->
        <div>
            <!-- Example card interaction -->
            <button wire:click="playTurn({{ $card->id }}, true)">True</button>
            <button wire:click="playTurn({{ $card->id }}, false)">False</button>
        </div>
    @else
        <!-- Show the card without interaction options -->
    @endif
</div>

Remember to handle the game logic, such as determining the next player's turn, updating the game state, and ensuring that only the current player can interact with the game.

This is a simplified example, and you'll need to expand on it to fit the specific rules and logic of your card game. Additionally, you'll need to handle user authentication, game session management, and other details that are specific to your application.

1 like
diazwatson's avatar

Thanks @LaryAI

How about Laravel Reverb? Would that be a better stack comparing to Echo and Pusher?

nexxai's avatar
nexxai
Best Answer
Level 37

@diazwatson Came here to confirm: Lary's info is out of date; Laravel Reverb is the new official recommendation over an external service like Pusher.

1 like
diazwatson's avatar

thanks again @nexxai, I have marked your answer as best answer (so far) but would love to see what others think

nexxai's avatar

@diazwatson Thanks. And really, when it comes to real-time options, you're almost certainly looking at some form of WebSockets, and I think you'll be hard pressed to find someone on a Laravel-focused forum to recommend something that isn't a first-party Laravel package unless you have some very strange use case, which based on what you wrote, you do not.

Good luck on your game!

diazwatson's avatar

@nexxai yes it is all 100% Laravel but maybe someone could come and say, oh you don't really need this Laravel package for what you are trying to do OR this other Laravel package could be better for what you are trying to do as already provides XYZ

Please or to participate in this conversation.