[수시 업데이트] 라벨6로 실시간 채팅.
↓ 그래서 브라우저를 업데이트하지 않고 실시간으로 알림을 하는 건가요? 믿을만한qita 보도입니다.
대단히 감사합니다😀
라벨 버전 6 과예요.
완성계
gif라서 동작이 느려 보이지만 동작이 더 빨라요.
다시 불러오지 않아도 상대방의 브라우저에서 정보를 업데이트할 수 있습니다.
동작의 인상은 이렇습니다.
0.push의 등록
composier에push를 사용하는 데 필요한 환경을 설치합니다
"~4.0"을 추가하지 않으면 laavel6가 순조롭게 돌아가지 못합니다
composer require pusher/pusher-php-server "~4.0"
1.config 디렉토리의 app 입니다.php BroadcastServiceProvider 의견 떼기
app.php
App\Providers\BroadcastServiceProvider::class,
2. .env 파일의 BROADCOTDRIVER 값은 push입니다.
.env
BROADCAST_DRIVER=pusher
push의 Getting Started 2단계에서 Laavel로 서버를 선택하면 다음 키를 얻을 수 있습니다.env 파일로 설정합니다.
PUSHER_APP_ID=英数字列が入ってます
PUSHER_APP_KEY=英数字列が入ってます
PUSHER_APP_SECRET=英数字列が入ってます
3. 이벤트 제작
SholdBroadcast 인터페이스를 계승하여broadcastOn에서return new Channel(채널 이름)로 사용합니다.
이벤트 이름은 MessageAdded, 채널 이름은 message-added-channel입니다.
이때 이벤트가 발생하면push에 데이터를 보낼 수 있습니다.
MessageAdded.php
<?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;
class MessageAdded implements ShouldBroadcast
{
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 Channel('message-added-channel',[$this->message]);
}
}
4.laavel-echo와pushher-js 라이브러리 설치
브라우저에서pusher로부터 정보를 받는 데 사용되는 총서를 설치합니다.
npm install --save laravel-echo pusher-js
bootstrap.js
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
encrypted: true
});
5. 이번에 사용한 blade 만들기
chatroom.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Todos</title>
</head>
<body>
<div id="message_area">
</div>
<div>
<textarea id = "message" rows="5" cols="100"></textarea>
<button id="submit">送信</button>
</div>
<script src="/js/app.js"></script>
<script src="{{asset('js/chat.js')}}"></script>
</body>
</html>
6. 컨트롤러
ChatroomController.php
<?php
namespace App\Http\Controllers;
use App\Events\MessageAdded;
use Illuminate\Http\Request;
use App\Message;
use PHPUnit\Util\Test;
use Illuminate\Support\Facades\Auth;
class ChatroomController extends Controller
{
//チャット画面を表示
public function index()
{
return view('chatroom');
}
//新しいメッセージが来たとき
public function newmessage(Request $request)
{
$message = new Message();
$message->message = $request->message;
$message->user_id = Auth::id();
$message->save();
//イベント発動
//新しいメッセージをpusherに
event(new MessageAdded([$message,Auth::user()]));
}
//最初にアクセスした時、全メッセージを返す
public function allmessage()
{
return Message::with('user')->get();
}
}
7. 비동기 통신용 JavaScript(Xml HttpRequest 사용) 쓰기
aax통신을 할 때 항상 jQuery에 의존하기 때문에 이번에는 다음과 같은 보도를 참고했습니다.
chat.js
window.Echo.channel('message-added-channel')
.listen('MessageAdded',function(data){
console.log('received a message');
console.log(data);
let newmessage = data.message[0].message;
let name = data.message[1].name;
let message = document.querySelector('#message_area');
message.insertAdjacentHTML('beforeend',name+" "+newmessage +" "+data.message[0].created_at+"<br>");
});
//一度だけ実行される処理
var xhr = new XMLHttpRequest();
xhr.open('GET', '/allmessage');
xhr.send();
//最初にアクセスした時全てのメッセージを取得
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
const json = xhr.responseText;
const obj = JSON.parse(json);
console.log(obj);
const message = document.querySelector('#message_area');
for(let i = 0; i < obj.length; i++){
message.insertAdjacentHTML('beforeend' , obj[i].user.name+" "+obj[i].message +" "+obj[i].created_at+"<br>");
}
}
}
const submitbutton = document.querySelector('#submit');
//送信ボタンをクリックした時
submitbutton.addEventListener('click',()=>{
const message = document.querySelector('#message');
console.log(message.value);
const xhr = new XMLHttpRequest();
let token = document.getElementsByName('csrf-token').item(0).content;
xhr.open('POST','/newmessage')
xhr.setRequestHeader('X-CSRF-Token', token);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
console.log(message.value);
xhr.send("message="+message.value);
message.value = '';
});
8. 라우팅
web.php
<?php
use App\Events\MessageAdded;
use Symfony\Component\EventDispatcher\Event;
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
Auth::routes();
Route::get('/home', 'HomeController@index')->name('home');
// Route::get('/test', function () {
// event(new MessageAdded('message!!!'));
// });
//ajax通信のルーティング
Route::post('/newmessage', 'ChatroomController@newmessage');
Route::get('/allmessage','ChatroomController@allmessage');
//チャットルームを表示
Route::get('/chatroom', 'ChatroomController@index')->middleware('auth');
Reference
이 문제에 관하여([수시 업데이트] 라벨6로 실시간 채팅.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/jordan23/articles/221574846e68e6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
