실시간 웹 애플리케이션

실시간 웹 애플리케이션은 다른 사용자의 동시 작업을 각 사용자에게 즉시 반영합니다.

널리 사용되는 실시간 애플리케이션은 다음과 같습니다.

경매

채팅 시스템

공유 화이트보드

공동 문서 편집자

온라인 교육

TALL 스택

TALL 스택은 PHP 세계에서 눈에 띄는 결합된 프런트 엔드 및 백엔드 프레임워크입니다.

스택:

Laravel

Alpine.js

Livewire

Tailwind CSS

트리거링 액션

Livewire 구성 요소의 블레이드 템플릿에 있는 작업은 버튼 클릭 시 트리거됩니다.

<input name="bid_price" wire:model="bid_price"/>
<button wire:click="bid()/>

구성 요소에서 함수를 호출하고

namespace App\Http\Livewire;

use Livewire\Component;

class Bidder extends Component
{
    public float $bid_price;

    public float $price;

    public function bid()
    {
    }

}

연결 파이프

Laravel에서 이벤트를 방송함으로써 사용자의 행동이 다른 사용자에게 전파됩니다.

사용자가 입찰을 보낼 때 방송되는 이벤트가 있다고 가정해 보겠습니다.

namespace App\Events;

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

use App\Models\Auction;
use App\Models\User;

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

    public function __construct(
    private Auction $auction,
    private $item,
    private $user,
    private float $bid_price,
    )
    {
    //
    }

    /**
     * Get the data to broadcast.
     *
     * @return array
    */
    public function broadcastWith()
    {
      return [
        'item' => $this->item,
        'type' => $this->type,
        'bid' => $this->bid_price,
        'user' => $this->user,
      ];
    }
}

사용:

use App\Events\LiveBid; 

broadcast(new LiveBid(
    $this->auction, 
    $this->item, 
    $this->user, 
    $bid_price
))->toOthers();  

이벤트 흐름 방식

Laravel Websockets 을 사용하면 브로드캐스트 이벤트가 Livewire 구성 요소로 전송됩니다.

구성 요소는 수신하는 이벤트를 나열합니다.

namespace App\Http\Livewire;

use Livewire\Component;

class Bidder extends Component
{

    public float $price;

    protected function getListeners()
    {       
      return [
        "echo:auction.{$this->auction->id},LiveBid"
                  => 'live_price_notification',
      ];
    }  

}

경매당 채널이 있는 경우

"echo:auction.{$this->auction->id},LiveBid"

많은 경매가 동시에 진행됩니다.

이벤트를 수신하면 리스너는 배열로 브로드캐스트된 데이터를 사용하여 할당된 함수를 호출합니다.

public function live_price_notification($data)
{
      // update price
      $this->price = $data['price'];
}

프런트 엔드에 대한 동적 업데이트

따라서 Bidder 구성 요소의 경우 블레이드 템플릿인 bidder.blade.php는 가격 속성이 업데이트되면 Livewire에 의해 자동으로 동적으로 업데이트됩니다.

Price: {{ $price }} EUR

요약하자면, 흐름은,

Livewire -> Livewire

JavaScript가 필요하지 않은 곳.

이것은 더 간단한 경우입니다.

자바스크립트가 필요할 때

화이트보드 애플리케이션에서는 순전히 브라우저 이벤트이므로 마우스 이동과 같은 사용자 작업을 수신하려면 JavaScript를 사용해야 합니다. 결과적으로 다른 사용자의 행동을 반영하기 위해 우리는 JavaScript를 사용해야 하는 화면의 포인터 위치와 같은 브라우저 수준에서 렌더링해야 합니다.

TALL 스택은 가벼운 Alpine.js 프레임워크를 사용하여 브라우저 리프팅을 수행합니다.

브라우저의 작업을 Livewire 구성 요소에 통합하기 위해 Alpine.js Livewire.emit를 사용합니다.

Livewire.emit('MouseMoved', x, y)

프런트 엔드를 동적으로 업데이트하기 위해 Livewire 구성 요소에서 사용하는 캔버스의 위치를 ​​말합니다.

$this->dispatchBrowserEvent('SetPointerPosition', [
       'x' => $x, 'y' => $y
]);  

요약하자면, 흐름은,

Alpine.js -> Livewire -> Livewire -> Alpine.js

요약

PHP 애호가를 위해 TALL 스택은 순수한 PHP 플레이북으로 실시간 웹 애플리케이션을 프로그래밍하는 탁월한 방법을 제공합니다.