[laravel] 라라벨 브로드캐스팅+ 라라벨에코서버

라라 벨 브로드캐스팅에 대해 알아보겠습니다.

라라 벨 브로드캐스팅이란, 서버에 데이터가 변경되면 메시지가 웹 소캣 연결로 보내져 클라이언트에 의해 처리될 수 있도록 합니다. 

바로 테스트를 해보도록 하겠습니다.

테스트는 모든 클라이언트에 대해 메시지를 송신하는 쪽으로 만들었습니다.

만들어 보는것

위와 같은 작업을 수행합니다.

• 1) laravel서버 쪽에서 이벤트를 발생시켜, 레이디스 서버에 6379 포트를 이용하여 데이터를 전달합니다.

• 2) laravel-echo-server와 redis의 SUB/PUB는 항상 연결되어있는 상태로 만들어줍니다. 

  • 혹시 redis의 SUB/PUB를 모르시는 분은 먼저 개념을 잡아오시는 게 좋을 듯합니다.
• 3) 클라이언트와 laravel-echo-server는 websocket를 이용하여 항상 연결되어있는 상태로 만들어줍니다.
  • 1번에서 데이터를 넘겨주었을 때를 라라 벨에코서버는 SUB를 이용하여 데이터를 받아옵니다. 그후 받은 데이터를 클라이언트화면에 뿌려줍니다.

사전작업

redis서버

nodeJs

laravel프레임워크

 

라이브러리 설치

npm install --save laravel-echo socket.io-client
composer require predis/predis

laravel-echo-server설치

npm install -g laravel-echo-server

라라 벨 에코 서버를 설치합니다.

참고로 라라벨 에코서버를 이용할 때는 redis서버가 반드시 필요하기 때문에 사전작업의 redis서버를 준비해 주세요

 

 

그 후 라라벨 에코 서버 json파일을 작성해줍니다.

laravel-echo-server init

? Do you want to run this server in development mode? Yes
? Which port would you like to serve from? 6001
? Which database would you like to use to store presence channel members? redis
? Enter the host of your Laravel authentication server. http://localhost:8000
? Will you be serving on http or https? http
? Do you want to generate a client ID/Key for HTTP API? Yes
? Do you want to setup cross domain access to the API? Yes
? Specify the URI that may access the API: http://localhost:8000
? Enter the HTTP methods that are allowed for CORS: GET, POST
? Enter the HTTP headers that are allowed for CORS: Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Autho
rization, X-CSRF-TOKEN, X-Socket-Id
? What do you want this config to be saved as? laravel-echo-server.json
appId: fb9e72802cace662
key: 9bf6eb178b5601e2353d387c9d46531b

init을 이용하면 위와 같이 설정을 할 수 있습니다.

 

마지막으로 라라벨 에코 서버를(laravel-echo-server start) 기동시 킵니다.

$laravel-echo-server start

L A R A V E L  E C H O  S E R V E R

version 1.5.3

Starting server...

✔  Running at localhost on port 6001
✔  Listening for http events...
✔  Listening for redis events...

Server ready!

혹시 아래와 같은 에러가 보인다면 redis서버가 준비되어있지 않은 상태이니 한번 확인해주세요!

[ioredis] Unhandled error event: Error: connect ECONNREFUSED 127.0.0.1:6379
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1097:14)

 

 

라라벨 쪽 작업

1. config/app.php 코드 수정

App\Providers\BroadcastServiceProvider::class,

프로바이더 쪽에 위의 코드를 추가시켜주세요

 

2.. env파일 변경

BROADCAST_DRIVER=log로 되어있는 곳을

BROADCAST_DRIVER=redis

redis로 변경해주세요

 

서버 쪽 작업

전체 송신 기능용으로 작성하겠습니다.

 

1. Event관련 함수 작성

php artisan make:event PublicEvent

artisan커멘드를 이용하여 작성합니다.

 

2. app/Events/PublicEvent.php 파일 수정

<?php

namespace App\Events;

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

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

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        // redis채널이름 
        return new Channel('public-event');
    }

    public function broadcastWith()
    {
      return [
        "message" => "hello world",
      ];
    }
}

위와 같이 코드를 변경해주세요.

 

3. route/web.php 코드 수정

어떤 이벤트가 발생해야 브로드캐스트가 가능하므로, 이벤트를 작성합니다.

이번 경우는 어떤 url로 접속했을 때 반응하는 브로드캐스트입니다.

Route::get('/public-event', function(){
	broadcast(new \App\Events\PublicEvent())
	return "return값은 없어도 상관없음.";
});

return 값은 없어도 상관없지만 화면에 아무것도 찍히지 않으면 헷갈리니까 넣어봤습니다.

 

클라이언트 쪽 작업

1. resources/js/bootstrap.js 코드 수정

//for Echo
import Echo from 'laravel-echo';
window.io = require('socket.io-client');

// 접속정보
window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: 'http://localhost:6001',
});

// redis채널설정
window.Echo.channel('laravel_database_public-event')
    .listen('PublicEvent', (e) => {
        console.log(e);
    });

위의 코드를 추가해주세요.

자세히는 모르겠지만, 저 같은 경우는 laravel_database_뒤에 채널 이름이 만들어졌습니다...

redis 로그를 이용하여 어떤 채널이 만들어졌는지 확인해주세요....

 

2. laravelMix이용

npm install
npm run dev

laravel Mix를 이용하여 public/js/app.js에 수정한 코드를 추가시켰습니다.

 

 

3. blade페이지 수정

저 같은 경우는 resources/views/welcome.blade.php 파일을 수정하였습니다.

<meta name="csrf-token" content="{{ csrf_token() }}">

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

위의 두 코드를 추가합니다.

 

 

확인 작업

localhost:8000/public-event 화면과

localhost:8000의 화면을 동시에 켜놓고

public-event화면을 새로고침 하면 아래와 같은 hello world가 출력되는 것을 볼 수 있습니다.