처음부터 차근차근
laravel 브로드캐스트 이용해서 실시간 이벤트 구현 본문
라라벨은 내장된 도구 세트가 있기 때문에 websocket을 사용하기 매우 쉽다.
생성된 이벤트를 웹소켓 서버로 브로드캐스트 해야한다.
브로드캐스팅(broadcasting)은 송신 호스트가 전송한 데이터가 네트워크에 연결된 모든 호스트에 전송되는 방식이다.
pusher 세팅
브로드캐스트를 이용하려면 composer package인 pusher을 가져와야 한다.
터미널을 켜고 프로젝트 파일 경로 안에서 아래의 명령어를 친다.
composer require pusher/pusher-php-server
pusher가 잘 깔렸는지 확인하려면 /composer.lock 폴더로 가서 'pusher'을 검색해본다.
그럼 이렇게 pusher가 잘 깔린 것을 확인할 수 있다.
그 다음 pusher.com으로 가서 로그인을 하고(아이디 없으면 새로 만들기) Channels를 클릭한다.
그다음 app이름에다가 아무 이름이나 적는다.
그리고 cluster는 채널 앱의 요청을 처리하는 서버의 물리적 위치인데, 자신의 나라와 가까운 나라를 cluster로 선택한다.
korea가 없어서 가장 가까운 Tokyo로 했다.
그리고 테크를 정해야 하는데 나는 vue와 laravel 사용하는 중이라서 저렇게 정했다.
그리고 create app을 누른다!
그 다음 오른쪽 메뉴에서 App Keys를 선택하면
이렇게 app의 키 정보가 나오는데 여기에 있는 정보들을 .evn 파일의
이 부분에다가 복붙해서 넣는다.
그리고 위로 가보면 broadcast_driver이 log로 되어있을 텐데 그것을 pusher로 변경한다.
브로드캐스트 이벤트 정의
라라벨에 주어진 이벤트가 브로드캐스트되어야 한다는 것을 알리려면, 이벤트 클래스에 Illuminate\Contracts\Broadcasting\ShouldBroadcast 인터페이스를 구현해야 한다.
php artisan make:event 이름먼저 이벤트를 만들고
그 다음 class 이름 옆에 implements SouldBroadcast 를 해주고, 전체적인 코드를 아래와 같이 변경한다.
class MyEvent implements SouldBroadcast
{
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 ['my-channel'];
}
// 브로드캐스트 이름을 변경
public function broadcastAs()
{
return 'my-event';
}
}
app.php 설정도 변경해야한다.
config \ app 으로 가서 broadcast service provider 주석처리를 해제한다.
laravel echo 설치
laravel echo는 손쉽게 채널을 구독하고, 서버 측 브로드캐스팅 드라이버에서 브로드캐스트하는 이벤트를 수신할 수 있도록 하는 JavaScript 라이브러리이다.
npm 패키지 관리자를 통해 echo를 설치할 수 있고,
이렇게 하면 package.json파일 안에 이 라이브러리가 추가된다.
npm install --save laravel-echo pusher-js
web.php 파일 수정
1. 이벤트 발생
2. 이벤트 수신(listen) -> 그리고 이걸로 뭔가를 할 것임
이 기능하는 route 새로 작성
// broadcast
Route::get('/event', function() {
event(new MyEvent('안녕안녕'));
});
// broadcast
Route::get('/listen', function() {
return view('site.chats.listen');
});
listen.blade.php
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf-tocken" content="{{ csrf_tocken() }}">
<title>Document</title>
</head>
<body>
<script src="{{ asset('js/app.js') }}"></script> <!--js폴더 안에 있는 laravel echo, pusher 로드-->
</body>
</html>
그리고 resource \ js \ bootstrap.js로 가서 맨 아래에 있는 laravel echo 코드 주석을 해제한다.
import Echo from 'laravel-echo'; // laravel echo import
window.Pusher = require('pusher-js'); // pusher을 제공하는지 확인
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
forceTLS: true,
encryption: true // 추가
});
그 다음 routes\channels.php의 broadcast channel 부분을 아래와 같이 변경한다.
// 채널 인증 규칙
Broadcast::channel('my-chanel', function () {
return true;
});
여기서부터 두가지 방법을 사용해서 구현해봤다.
1. vue.js 사용해서 하는 법
vue.js를 사용할 것이므로
composer laravel/ui
php artisan ui vue를 한다음
app.js의 app 부분도 아래와 같이 수정
const app = new Vue({
el: '#app',
created() {
Echo.channel('notification')
.listen('ServerCreated', (e) => {
alert('aaaa');
});
}
});
2. jquery(js) 사용하는 법
resource \ js \ bootstrap.js 에다 코드 추가
window.Echo.channel('my-channel')
.listen('.my-event', (data) => {
alert(JSON.stringify(data['message']));
});
실행결과
localhost:8000/event 에서 새로고침을 하면
localhost:8000/listen 에서 '안녕안녕' 이 나오는 것을 볼 수 있다.
Socket.IO
Socket.IO는 Node.js에서 WebSocket을 쉽고 간단하게 사용할 수 있게끔 만든 Cross-platform WebSocket API이다.
클라이언트와 서버 간의 짧은 대기 시간 , 양방향 및 이벤트 기반 통신 을 가능하게 하는 라이브러리이다.
WebSocket 프로토콜 을 기반으로 구축되었으며 HTTP 롱 폴링 또는 자동 재연결에 대한 폴백과 같은 추가 보장을 제공한다.
채팅방을 구현에 특화된 라이브러리이다.
'Framework > Laravel' 카테고리의 다른 글
| 라라벨 배포 - url에 public없애는 방법 (0) | 2022.07.10 |
|---|---|
| 아임포트 결제 API 사용해서 카카오페이 결제기능 구현하기 (0) | 2022.06.27 |
| 부모 클래스의 함수 사용하기(중복 코드 처리) (0) | 2022.02.18 |
| Pagination (0) | 2022.02.16 |
| Laravel Model 관계(Eloquent Relationship) (0) | 2022.01.19 |
