Laravel Broadcast — redis 편

Published in

sjk5766

7 min readOct 20, 2019

본 포스팅에서는 Laravel에서 redis를 이용해 broadcasting 하는 내용을 다루겠습니다.

우선 전반적인 그림을 보면 아래와 같습니다. Laravel은 이벤트가 발생하면 Redis로 전송하고, Redis가 받은 데이터는 웹 소켓 역할을 하는 Laravel-echo-server로 전달됩니다. Laravel-echo는 Client 단에서 socket 통신으로 listening을 하며 laravel-echo-server로 부터 데이터를 받습니다.

서버 측 작업사항

Redis는 로컬 or docker container에서 구동하고 있다고 가정합니다. 저는 container에서 구동하고 있기 때문에 아래 설정을 redis (container 이름)로 설정하지만 local에 설치하셨다면 127.0.0.1 과 같은 설정을 쓰시면 됩니다.

Laravel에서 redis와 연동할 수 있도록 predis를 설치합니다.

composer require predis/predis

config/broadcasting.php 파일을 열고 default broadcast 드라이버를 redis로 셋팅합니다.

'default' => env('BROADCAST_DRIVER', 'redis'),

config/app.php 파일에서 아래 코드가 주석처리 되어있습니다. 주석 해제합니다.

App\Providers\BroadcastServiceProvider::class,

laravel-echo-server 설치하고 초기화 합니다.

npm install -g laravel-echo-server
laravel-echo-server init

laravel-echo-server init 명령어 후에 laravel-echo-server.json 파일이 생성됩니다. laravel-echo-server.json 에서 redis 부분에 포트와 host를 추가합니다.

"databaseConfig": {
  "redis": {
    "port": "6379",
    "host": "redis" // local에 설치했다면 127.0.0.1
  },

config/database.php 파일을 열고 redis 설정정보를 변경합니다. client와 default의 host 설정을 변경합니다.

'client' => env('REDIS_CLIENT', 'predis')
'host' => env('REDIS_HOST', 'redis')

.env 파일을 열고 broadcast 드라이버를 redis로 변경합니다.

BROADCAST_DRIVER=redis

위 까지가 서버 쪽 설정이고 이제 서버측에서 broadcasting을 위해 event를 생성합니다.

php artisan make:event test

app/Events 경로의 test.php 파일을 열고 ShouldBroadcast 인터페이스를 상속받고 public channel을 열어줍니다.

broadcastOn 메소드 내부에서 test라는 이름의 채널을 열었습니다.

routes/web.php 에서 /broadcast 로 접근할 경우 test 브로드캐스트가 발생하도록 코드를 작성합니다.

클라이언트 측 작업사항

클라이언트 측에서 소켓통신으로 리스닝할 모듈을 설치합니다.

npm install --save socket.io-client
npm install --save laravel-echo

vue 스캐폴딩을 위해 아래 명령어를 입력합니다.

composer require laravel/ui --dev
php artisan ui vue

blade 템플릿에서 자바스크립트를 해석하기 위해 resources/views 경로에서 welcome.blade.php 파일에 아래 코드를 추가합니다.

<script src="{{ mix('js/app.js') }}"></script>

resources/js/bootstrap.js 에 laravel-echo 설정을 추가합니다.

import Echo from "laravel-echo"
window.io = require('socket.io-client');window.Echo = new Echo({
  broadcaster: 'socket.io',
  host: window.location.hostname + ':6001'
});

디폴트로 생성되는 resources/js/components/ExampleComponent.vue에 아래 코드를 추가합니다.

Echo.channel('laravel_database_test') // 채널 이름
  .listen('test', (e) => { // 이벤트 이름
  console.log(e);
});

채널의 이름이 laravel_database_test 인 이뉴는 laravel 내부에서 laravel_database를 자동으로 추가하기 때문입니다. 서버측에서 채널이름을 test로 만들었기 때문에 laravel_database_test를 사용합니다. listen 메소드에서는 수신할 이벤트 이름을 적어주면 됩니다.

이제 아래 명령어로 전체 모듈 설치 및 build 합니다.

npm install && npm run dev

결과 확인

localhost에 접속합니다.

이 상태에서 localhost/braodcast 로 접속합니다.

laravel route에서 broadcast로 들어올 경우 test 이벤트를 발생시키도록 해놨습니다. 다시 채널을 리스닝 하고 있는 localhost의 console을 보면 아래와 같이 무언가를 수신한 것을 확인할 수 있습니다.

다시 app/Events/test.php 파일을 열고 broadcastWith 메소드를 아래와 같이 추가합니다.

public function broadcastWith()
{
  return ["key" => "value"];
}

다시 테스트 해보시면 broadcastWith에서 정의한 return 값이 Client 측으로 전달 되는 것을 확인할 수 있습니다.

Laravel Broadcast — redis 편

Written by Jeongkuk Seo