Embedded Files
- Download laravel 7
1.1 Go to folder: D:\Projects
1.2 Open terminal && Install via composer:
composer create-project --prefer-dist laravel/laravel:^7.0 laravel70
1.3 Your project is staying
D:\Projects\laravel70
2. Create Virtual Host
2. Create Virtual Host
2.1 Xampp Folder: D:\Xampp
2.2 Virtual host file: D:\Xampp\apache\conf\extra\httpd-vhosts.conf
2.3 Add local host domain into virtual host
<VirtualHost laravel70.local:80>
DocumentRoot "D:/Projects/laravel70/public"
ServerName laravel70.local
<Directory D:/Projects/laravel70/public>
DirectoryIndex index.php
AllowOverride All
Require all granted
Order allow,deny
Allow from all
</Directory>
</VirtualHost>
3. Add domain to hosts
3. Add domain to hosts
3.1 Host file: C:\Windows\System32\drivers\etc\hosts
3.2 Add laravel70.local
# 127.0.0.1 localhost
# ::1 localhost
127.0.0.1 laravel70.local
4 Push Notification for Server (laravel)
4 Push Notification for Server (laravel)
5. Add Pusher SDK for server
5. Add Pusher SDK for server
5.1 Go to: D:\Projects\laravel70\composer.json
5.2 Add Pusher package
{
.....
"require": {
....,
"pusher/pusher-php-server": "~3.0"
}
}
5.3 Open terminal D:\Projects\laravel70 and run: composer update
5.4 Enable broadcast provider: config/app.php uncomment
App\Providers\BroadcastServiceProvider::class,
6 Generate Auth for Laravel70
6 Generate Auth for Laravel70
6.1 Go to D:\Projects\laravel70 && run: composer require laravel/ui:^2.4
6.2 Generate Auth
php artisan ui vue --auth
6.3 Add routes: D:\Projects\laravel70\routes\web.php on the top
Route::get('login', 'Auth\LoginController@login');
Route::post('login', 'Auth\LoginController@login');
7. Config Database for Laravel70
7. Config Database for Laravel70
7.1 Goto: D:\Projects\laravel70\.env
7.2 Change config db
DB_DATABASE=laravel70
DB_USERNAME=root
DB_PASSWORD=root
7.3 Clear cache laravel
php artisan optimize:clear
8. Miration DB
8. Miration DB
8.1 Goto: D:\Projects\laravel70
8.2 Run migration
php artisan migrate
9. Add data for UserTableSeeder
9. Add data for UserTableSeeder
9.1 Go to D:\Projects\laravel70\
9.2 Run: php artisan make:seeder UsersTableSeeder
9.3 Add more database/seeds/UsersTableSeeder.php
<?php
namespace Database\Seeder;
use Illuminate\Database\Seeder;
use DB;
use App\User;
class UsersTableSeeder extends Seeder
{
public function run()
{
DB::table('users')->truncate();
User::create(['name' => 'trueme1',
'email' => 'trueme1@gmail.com',
'password' => bcrypt('12345')]
);
User::create(['name' => 'trueme2',
'email' => 'trueme2@gmail.com',
'password' => bcrypt('12345')]
);
}
}
9.4 Run: composer dumpautoload
9.5 Run db:seeder:
php artisan db:seed --class="Database\Seeder\UsersTableSeeder"
9.6 Check db
10. Login
10. Login
10.1 goto: http://laravel70.local/login
email: trueme1@gmail.com
pass: 12345
11. Change config broadcast to Pusher
11. Change config broadcast to Pusher
11.1 goto: D:\Projects\laravel70\.env
BROADCAST_DRIVER: pusher
Run command: php artisan optimize:clear
12.1 Login into Pusher.com to && create application
Choice: [Create App] button
With my Application: broadcasting
Select your app (in my case: broadcasting) and select
App Keys
app_id = "1736599"
key = "7c752f637e0a411b191d"
secret = "34f6fa9b2aa3bb0339b4"
cluster = "ap1"
13. Setting App Keys Pusher for laravel70
13. Setting App Keys Pusher for laravel70
13.1 goto: D:\Projects\laravel70\.env
Change config
PUSHER_APP_ID=1736599
PUSHER_APP_KEY=7c752f637e0a411b191d
PUSHER_APP_SECRET=34f6fa9b2aa3bb0339b4
PUSHER_APP_CLUSTER=ap1
Run command: php artisan optimize:clear
14. Create Message Model && messages table
14. Create Message Model && messages table
14.1 Run command:
$ php artisan make:model Message --migration
Model created successfully.
Created Migration: 2024_01_12_035728_create_messages_table
$....
14.2 Laravel will generate:
app/Message.php
database/migrations/2024_01_12_035728_create_messages_table.php
14.3 Update database/migrations/2024_01_12_035728_create_messages_table.php
<?php use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateMessagesTable extends Migration
{
public function up()
{
Schema::create('messages', function (Blueprint $table) {
$table->id();
$table->integer('from', FALSE, TRUE);
$table->integer('to', FALSE, TRUE);
$table->text('message');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('messages');
}
}
14.3 Run Migrate
$ php artisan migrate
Migrating: 2024_01_12_035728_create_messages_table
Migrated: 2024_01_12_035728_create_messages_table (0.03 seconds)
14.3 Check db
15 Create event NewMessageNotification
15 Create event NewMessageNotification
15.1 NewMessageNotification is event will broadcast message
15.2 Run
$ php artisan make:event NewMessageNotification
Event created successfully.
15.3 Update: app/Events/NewMessageNotification.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;
use App\Message;
class NewMessageNotification implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
public function __construct(Message $message)
{
$this->message = $message;
}
public function broadcastOn()
{
return new PrivateChannel('user.'.$this->message->to);
}
}
15.3.1 NewMessageNotification implements ShouldBroadcast to notify to Laravel this event will be broadcasted
15.3.2 $this->message->to will broadcast message to this user
15.4 Add private channel into routes/channels.php
<?php use Illuminate\Support\Facades\Broadcast;
Broadcast::channel('App.User.{id}', function ($user, $id) {
return (int) $user->id === (int) $id;
});
Broadcast::channel('user.{toUserId}', function ($user, $toUserId) {
return $user->id == $toUserId;
});
15.5 When user use private channel user.{USER_ID} [Laravel Echo] wil auth by XMLHttpRequest
16 Create MessageController
16 Create MessageController
16.1 Generate controller
$ php artisan make:controller MessageController
Controller created successfully.
16.2 D:\Projects\laravel70\app\Http\Controllers\MessageController.php
<?php namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Message;
use App\Events\NewMessageNotification;
use Illuminate\Support\Facades\Auth;
class MessageController extends Controller
{
public function __construct() {
$this->middleware('auth');
}
public function index()
{
$user_id = Auth::user()->id;
$data = array('user_id' => $user_id);
return view('broadcast', $data);
}
public function send()
{
// message is being sent
$message = new Message;
$message->setAttribute('from', 1);
$message->setAttribute('to', 2);
$message->setAttribute('message',
'Demo message from user 1 to user 2');
$message->save();
// want to broadcast NewMessageNotification event
event(new NewMessageNotification($message));
}
}
16.3 add route: routes/web.php
//BroadCast
Route::get('message/index', 'MessageController@index');
Route::get('message/send', 'MessageController@send');
17 Create broadcast view
17 Create broadcast view
17.1 Create broadcast view
resources/views/broadcast.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Test</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://js.pusher.com/4.1/pusher.min.js"></script>
</head>
<body>
<script type="module">
Pusher.logToConsole = true;
Echo.private('user.{{ $user_id }}')
.listen('App\Events\NewMessageNotification', (e) => {
alert(e.message.message);
});
</script>
<h1>Pusher Test, user.{{$user_id}}</h1>
<p>
Try publishing an event to channel <code>user{{ $user_id }}</code>
with event name <code>my-event</code>.
</p>
</body>
</html>
18 Import pusher-js && laravel-echo
18 Import pusher-js && laravel-echo
18.1 Goto: resources/js/bootstrap.js
18.2 Uncomment and you have, change pusher keys
import Pusher from 'pusher-js';
window.Pusher = Pusher;
import Echo from 'laravel-echo';
window.Echo = new Echo({
broadcaster: 'pusher',
key:'7c752f637e0a411b191d',
cluster:'ap1',
encrypted: true,
logToConsole: true,
forceTLS: true
});
18.3 Install laravel-echo package
npm install laravel-echo
18.4 Install pusher-js package
npm install pusher-js
18.5 Force fix packet npm
$ npm audit fix --force
added 144 packages, removed 549 packages, changed 165 packages, and audited 795 packages in 51s
88 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
18.5 Build dev
npm run dev
19 Test 1
19 Test 1
19.1 Goto http://laravel70.local/login
login with user: trueme2@gmail.com/12345
19.2 Go to http://laravel70.local/message/index
19.3 Right click on browser anh choice Inspect
19.4 Choice Network tab and click F5 button to refresh page
20 Test 2
20 Test 2
20.1 Goto laravel70 db and check messages table
21 Test 3
21 Test 3
21. 1 Login pusher.com with your account
21.2 Choice your app exp: broadcasting > choice Debug Console
23 Check db step:20 test 2
23 Check db step:20 test 2
You will see new message add on row 16
24 Check event on pusher.com
24 Check event on pusher.com
you will see new message on puhser
25 Download source code
25 Download source code
Page updated
Google Sites
Report abuse