Laravel + VueJS에서 Realtime을 구축한 방법

이 기사에서는 가장 효과적인 방법으로 많은 학습과 최적화를 거친 후 Realtime의 가장 간단한 통합을 소개합니다.

기사에 사용된 기술:

Backend Laravel 6x

Fronent VueJS 2x

GraphQL - Lighthouse (A framework for serving GraphQL from Laravel)

Pusher Channels

Laravel + VueJS를 설치하고 Pusher를 등록하는 단계는 건너뛰겠습니다. 위에서 인용한 경로에서 설정 방법을 배울 수 있습니다.

#폰텐드 VueJS

fontend VueJS 측에서 설정을 안내해 드립니다.
제공된 pusher + laravel echo 측에서 지원 패키지를 설치합니다.

npm install --save laravel-echo pusher-js

여기에 vue-echo
이라는 패키지를 설치합니다.

npm install vue-echo-laravel --save

다음으로 아래 구성을 main.js, app.js 또는 bootstrap.js 파일에 추가합니다(파일에 따라 다름).

import Pusher from "pusher-js";
import VueEcho from "vue-echo-laravel";

// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;

Vue.use(VueEcho, {
  broadcaster: "pusher",
  key: "xxxxxxxxxxxxx",
  cluster: "ap3",
  forceTLS: true,
  authEndpoint: "/broadcasting/auth",
  auth: {
    headers: {
      // authorization: token ? `Bearer ${token}` : null // Enabled - If you are using Bearer for authentication
    }
  }
});

내 프로젝트에 추가한 콘텐츠입니다.



vue-echo가 등록되면 모든 vue 인스턴스는 이전에 지정한 연결에서 this.$echo 속성을 통해 채널을 구독하고 이벤트를 수신할 수 있습니다.

var vm = new Vue({
    mounted() {
        // Listen for the 'NewMessageNotification' event in the 'synchronized' private channel
        this.$echo.private('synchronized').listen('NewMessageNotification', (payload) => {
            console.log(payload);
        });
    }
});

내 프로젝트에 추가한 콘텐츠입니다.

#백엔드 라라벨

단말기

composer require pusher/pusher-php-server

config/app.php에서 이 줄을 숨기거나 추가해야 합니다.

App\Providers\BroadcastServiceProvider::class

마지막으로 .env 파일에서 브로드캐스트 드라이버를 pusher로 변경해야 합니다.

PUSHER_APP_ID=xxxxxxxx
PUSHER_APP_KEY=xxxxxxxxxx
PUSHER_APP_SECRET=xxxxxxxxxxx
PUSHER_APP_CLUSTER=xxxxxx

BROADCAST_DRIVER=pusher
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

#이벤트 만들기 - 백엔드에서

Document Events - Laravel

Document Pusher Channels Events

NewMessageNotification에서 app\Events라는 이벤트를 빠르게 생성하겠습니다.

<?php

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 Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;

class NewMessageNotification implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('synchronized');
    }

}

routes/channels.php에 return Auth::check();에 채널을 등록합니다. 이벤트를 수신하기 위해 클라이언트 측에서 로그인하도록 강제합니다.

Broadcast::channel('synchronized', function ($user) {
    return Auth::check();
});

Pusher에서 대시보드를 확인하면 성공적으로 연결이 표시됩니다.



Pusher의 Debug 콘솔 기능을 이용하여 이벤트 빠른 전송을 해보겠습니다.



또는 Laravel Backend를 사용하여 이벤트를 게시할 수도 있습니다. 다음 게시물 또는 refer here에서 안내해 드리겠습니다.

그리고 이것이 결과입니다


질문이 있으시면 아래에 댓글을 달아주세요. 행운을 빕니다.