Xin chào bạn
Bạn là một lập trình viên PHP, muốn làm ứng dụng realtime, thì post này nó sẽ dành cho bạn nhé.
Không nói lòng vòng nữa, vào vấn đề chính luôn nhé.
Bạn đã sẵn sàng rồi chứ! Bây giờ mình sẽ hướng dẫn từng bước để config, và test nó nha.
Đầu tiên, bạn hãy tạo một source laravel nhé.
Mình sẽ đặt tên của nó là back-end :
composer create-project laravel/laravel back-end
Bật VS Code mở file .env config một số cái ở đây
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3006
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=123456
BROADCAST_DRIVER=pusherQUEUE_CONNECTION=databasePUSHER_APP_ID=khaitk
PUSHER_APP_KEY=khaitk
PUSHER_APP_SECRET=khaitk
PUSHER_HOST=khaitk
PUSHER_PORT=443
PUSHER_SCHEME=http
PUSHER_APP_CLUSTER=mt1
và đi vào folder back-end, ở đây mình sẽ cài đặt một số thư viện cho project :
cd back-end
composer require beyondcode/laravel-websockets
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider"
--tag="migrations"
php artisan migrate
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider"
--tag="config"
composer require pusher/pusher-php-server
php artisan queue:table
php artisan migrate
php artisan make:event ChatEvents
- Tiếp theo, bạn vào đường dẫn này ' back-end/config/app.php ' bỏ comment ở dòng này
App\Providers\BroadcastServiceProvider::class,Tại file này ' back-end/config/broadcasting.php '
'pusher' => [
'driver' => 'pusher',
'key' => env( 'PUSHER_APP_KEY' ),
'secret' => env( 'PUSHER_APP_SECRET' ),
'app_id' => env( 'PUSHER_APP_ID' ),
'options' => [
'cluster' => env( 'PUSHER_APP_CLUSTER' ),
'useTLS' => env( 'PUSHER_APP_USETLS' ),
'encryted' => true,
'host' => '127.0.0.1',
'port' => 6001,
'scheme' => 'http',
],
'client_options' => [],
],
Tại file này 'back-end/config/websockets.php'
'apps' => [
[
'id' => env( 'PUSHER_APP_ID' ),
'name' => env( 'APP_NAME' ),
'key' => env( 'PUSHER_APP_KEY' ),
'secret' => env( 'PUSHER_APP_SECRET' ),
'capacity' => null,
'enable_client_messages' => true,
'enable_statistics' => true,
],
],
Tại file này 'back-end/app/Events/ChatEvents.php'
<?php
namespace App\Events;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
class ChatEvents implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $data;
public function __construct($data)
{
$this->data = $data;
}
public function broadcastWith(): array
{
return [
'data' => $this->data
];
}
public function broadcastOn(): Channel
{
return new Channel('chat-listen');
}
}
- Ở đây bạn tạo một file trong folder cùng cấp với app/ => app/Websocket
- Và tạo một file trong app/Websocket/ChatWebSocketHandler.php
<?php
namespace App\Websocket;
use App\Events\ChatEvents;
use BeyondCode\LaravelWebSockets\Apps\App;
use BeyondCode\LaravelWebSockets\Dashboard\DashboardLogger;
use BeyondCode\LaravelWebSockets\Facades\StatisticsLogger;
use BeyondCode\LaravelWebSockets\QueryParameters;
use BeyondCode\LaravelWebSockets\WebSockets\Exceptions\UnknownAppKey;
use BeyondCode\LaravelWebSockets\WebSockets\WebSocketHandler;
use Illuminate\Http\Request;
use Ratchet\ConnectionInterface;
use Ratchet\RFC6455\Messaging\MessageInterface;
class ChatWebSocketHandler extends WebSocketHandler{
public function onOpen( ConnectionInterface $connection ) {
$connection->socketId = $socketId = sprintf( '%d.%d',
random_int( 1, 1000000000 ), random_int( 1, 1000000000 ) );
$connection->app = new \stdClass();
$connection->app->id = env( 'APP_NAME' );
$connection->send( json_encode( [
'status' => 200,
'message' => 'Opened',
] ) );
}
public function onClose( ConnectionInterface $connection ) {
// TODO: Implement onClose() method.
}
public function onError( ConnectionInterface $connection,
\Exception $e ) {
// TODO: Implement onError() method.
}
public function onMessage( ConnectionInterface $connection,
MessageInterface $msg ) {
$request = new Request();
$body = json_decode( $msg->getPayload(), true );
$request->replace( $body );
if ( $this->chatSocket( $request ) ) {
$connection->send( json_encode( [
'status' => 200,
'message' => 'Successful',
] ) );
} else {
$connection->send( json_encode( [
'status' => 500,
'message' => 'Fail',
] ) );
}
}
protected function verifyAppKey( ConnectionInterface $connection ) {
$appKey = QueryParameters::create( $connection->httpRequest )
->get( 'appKey' );
dump( $appKey );
if ( ! $app = App::findByKey( $appKey ) ) {
throw new UnknownAppKey( $appKey );
}
$connection->app = $app;
return $this;
}
protected function generateSocketId( ConnectionInterface $connection ) {
$socketId = sprintf( '%d.%d', random_int( 1, 1000000000 ),
random_int( 1, 1000000000 ) );
$connection->socketId = $socketId;
return $connection;
}
protected function establishConnection( ConnectionInterface $connection ) {
$connection->send( json_encode( [
'event' => 'pusher:connection_established',
'data' => json_encode( [
'socket_id' => $connection->socketId,
'activity_timeout' => 30,
] ),
] ) );
DashboardLogger::connection( $connection );
StatisticsLogger::connection( $connection );
return $this;
}
private function chatSocket( $request ) {
try {
event( new ChatEvents( $request->all() ) );
return true;
} catch ( \Exception $e ) {
return false;
}
}
}
- Trong file routes/web.php
<?php
use App\Websocket\ChatWebSocketHandler;
use BeyondCode\LaravelWebSockets\Facades\WebSocketsRouter;
WebSocketsRouter::webSocket( 'app/khaitk/chat', ChatWebSocketHandler::class );
- Thế là phía server đã hoàn tất các bước, bạn đã sẵn sàng run source code của mình chưa nào.....!
- Run song song 3 lệnh này :
php artisan serve
php artían websockets:serve
php artisan queue:work
-- Bùm, có lỗi không nào, hãy cmt cho mình biết nhé.....! Good luck.....!
-- Server đã xong rồi, thì qua config Client nha, post tiếp theo
