[Laravel] Broadcast+Redis+Socket io 실시간 echo server 구축

[Laravel] Broadcast+Redis+Socket io 실시간 echo server 구축

728x90

반응형

Broadcasting(브로드캐스팅)

서버에 데이터가 변경되면 메세지가 웹 소캣 연결로 보내져 클라이언트에 의해 처리될 수 있도록 하는것.

라라벨에서 제공하는 브로드캐스트 드라이버로는(Pusher Channels, Redis,디버깅 용도의 log 드라이버)를 지원한다. 추가적으로 전체적으로 브로드캐스팅을 끌 수 있도록 해주는 null 드라이버도 제공된다. 각각의 드라이버의 설정 파일은 config/broadcasting.php 파일에 존재한다.

Redis

데이터베이스, 캐시 및 메시지 브로커로 사용되는 오픈 소스 (BSD 라이선스), 인 메모리 데이터 구조 저장소이다.

쿼리 언어를 사용하지 않는 대표적인 NoSQL DBMS이다.

Socket.io

실시간 웹 애플리케이션을위한 JavaScript 라이브러리이며 웹 클라이언트와 서버간에 실시간 양방향 통신이 가능하다. 실시간 라이브러리로 자매품인 Websocket도 있다.

Laravel에서의 실시간 서비스 튜토리얼을 시작해 보겠다.

필요 라이브러리

predis laravel-echo-server laravel-echo socket.io-client redis-server(구성하려는 OS에 별도로 설치 해야함)

STEP 1. Install Laravel Project(본인은 8.17.0v)

composer create-project --prefer-dist laravel/laravel blog

STEP 2. Install predis

composer require predis/predis

STEP 3. Create Event

브로드캐스팅 서비스를 이용하기 위해 이벤트를 생성해야 한다. 아래 명령어를 입력하게 되면

App\Events\Sendmessage.php 파일이 생성된다.

php artisan make:event SendMessage

App/Events/SendMessage.php

'번째 데이터']; } }

STEP 4. Update configuration File

브로드캐스팅 서비스를 이용하기 위해 .env 환경변수 파일과 config\database.php 파일을 수정해야 한다.

php artisan make:event SendMessage

.env

BROADCAST_DRIVER= redis DB_DATABASE= Using your db DB_USERNAME= your db id DB_PASSWORD= upir db password REDIS_HOST=127.0.0.1 REDIS_PASSWORD=null #redis 기본 포트는 6379 REDIS_PORT=6379 #추후에 echo-server 파일 구성시 6001포트로 구성할 예정 LARAVEL_ECHO_PORT=6001

config\database.php

. . . 'redis' => [ 'client' => env('REDIS_CLIENT', 'predis'), 'options' => [ 'cluster' => env('REDIS_CLUSTER', 'redis'), 'prefix' => env('REDIS_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_database_'), ], 'default' => [ 'url' => env('REDIS_URL'), 'host' => env('REDIS_HOST', '127.0.0.1'), 'password' => env('REDIS_PASSWORD', null), 'port' => env('REDIS_PORT', '6379'), 'database' => env('REDIS_DB', '0'), ], 'cache' => [ 'url' => env('REDIS_URL'), 'host' => env('REDIS_HOST', '127.0.0.1'), 'password' => env('REDIS_PASSWORD', null), 'port' => env('REDIS_PORT', '6379'), 'database' => env('REDIS_CACHE_DB', '1'), ], ], . . .

STEP 5. Install laravel-echo-server

브로드캐스팅 서비스를 이용하기 위해 laravel-echo-server을 설치하고 초기설정 파일을 생성해야 한다.

npm install -g laravel-echo-server

라라벨 프로젝트의 root directory에서 command창에서 입력해야 한다.

laravel-echo-server init

URL은 본인의 프로젝트 루트 경로를 입력해 주면 된다.

정상적으로 파일이 생성되면 아래와 같이 생성된다.

laravel-echo-server.json

{ "authHost": "http://localhost:8800", "authEndpoint": "/broadcasting/auth", "clients": [], "database": "redis", "databaseConfig": { "redis": {}, "sqlite": { "databasePath": "/database/laravel-echo-server.sqlite" } }, "devMode": true, "host": null, "port": "6001", "protocol": "http", "socketio": {}, "secureOptions": 67108864, "sslCertPath": "", "sslKeyPath": "", "sslCertChainPath": "", "sslPassphrase": "", "subscribers": { "http": true, "redis": true }, "apiOriginAllow": { "allowCors": false, "allowOrigin": "", "allowMethods": "", "allowHeaders": "" } }

STEP 6. Install npm, laravel-echo, socket.io-client

npm install

npm install laravel-echo

npm install socket.io-client

설치를 완료 한 후, laravel-echo-setup.js라는 파일을 생성해준다.

resources/assets/js/laravel-echo-setup.js

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

mix파일에 다음 코드를 추가해 준다.

webpack.mix.js

mix.js('resources/assets/js/laravel-echo-setup.js', 'public/js');

추가 한 후 아래 코드를 실행해준다.

npm run dev

STEP 7. 브로드캐스팅 서비스를 받기 위한 뷰 파일 수정

라라벨 프로젝트를 구성하면 기본적으로 route 되어있는 welcome.blade.php 파일을 수정할 것이다.

welcome.blade.php

Laravel Broadcast Redis Socket io Tutorial Laravel Broadcast Redis Socket io Tutorial window.laravel_echo_port='{{env("LARAVEL_ECHO_PORT")}}'; var i = 0; //App\Events\SendMessage에 정의되어있는 수신받을 채널명. window.Echo.channel('laravel_database_slsl') //수신받을 클래스 명. .listen('SendMessage', (data) => { i++; $("#notification").append('

'); console.log(data); });

STEP 8. 브로드캐스팅 이벤트 호출

routes/web.php

Route::get('/t', function () { event(new \App\Events\SendMessage()); dd('Event Run Successfully.'); });

command창을 열어 라라벨 프로젝트 루트 디렉토리에서 아래 코드를 실행한다.

laravel-echo-server start

브라우저를 열고 URL로 접속한다.(본인이 구성한 URL로 접속)

http://localhost:8800

커맨드창을 확인 해본다.

오류없이 설정을 했다면 위의 문구가 떠야한다.

web.php에 구성한 이벤트 호출 URL을 호출한다.

http://localhost:8800/t

수신받을 데이터가 구성되어있는 페이지의 개발자 도구와 laravel-echo-server를 start한 command창을 확인하면 데이터 수신 여부를 알 수 있다.

수신받을 채널명, 어떤 함수의 이벤트가 발생 했는지 알 수있다.

추후 필요 데이터에 따라 커스터마이징 하면 될 것 같 다!

도움이 되셨다면 하트 및 댓글 부탁드립니다♥

출처

https://www.itsolutionstuff.com/post/laravel-broadcast-redis-socket-io-tutorial-example.html

728x90

반응형

from http://wondongho.tistory.com/170 by ccl(A) rewrite - 2021-01-05 11:25:37