Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
February 6, 2021 05:29 am GMT

How I built Realtime in Laravel VueJS

In this article, I will introduce the simplest integration of Realtime, after many learning and optimization in the most effective way.

Technologies used in the article:

I will skip the steps to install Laravel + VueJS and to register Pusher, you can learn how to set up at the paths I quoted above.

#Fontend VueJS

I will guide the setup on the fontend VueJS side.
Install the support package from the pusher + laravel echo side provided.

npm install --save laravel-echo pusher-js
Enter fullscreen mode Exit fullscreen mode

Here I install a package named vue-echo
.

npm install vue-echo-laravel --save
Enter fullscreen mode Exit fullscreen mode

Next add the below configs to the main.js, app.js or bootstrap.js file (depending on your file).

import Pusher from "pusher-js";import VueEcho from "vue-echo-laravel";// Enable pusher logging - don't include this in productionPusher.logToConsole = true;Vue.use(VueEcho, {  broadcaster: "pusher",  key: "xxxxxxxxxxxxx",  cluster: "ap3",  forceTLS: true,  authEndpoint: "/broadcasting/auth",  auth: {    headers: {      // authorization: token ? `Bearer ${token}` : null // Enabled - If you are using Bearer for authentication    }  }});
Enter fullscreen mode Exit fullscreen mode

This is the content I added to my project

image.png

Once vue-echo is registered, every vue instance is able to subscribe to channels and listen to events through the this.$echo property on the connection you specified earlier.

var vm = new Vue({    mounted() {        // Listen for the 'NewMessageNotification' event in the 'synchronized' private channel        this.$echo.private('synchronized').listen('NewMessageNotification', (payload) => {            console.log(payload);        });    }});
Enter fullscreen mode Exit fullscreen mode

This is the content I added to my project
image.png

#Backend Laravel

Terminal

composer require pusher/pusher-php-server
Enter fullscreen mode Exit fullscreen mode

At config/app.php you need to unhide or add this line

App\Providers\BroadcastServiceProvider::class
Enter fullscreen mode Exit fullscreen mode

image.png

Finally, you will need to change your broadcast driver to pusher in your .env file:

PUSHER_APP_ID=xxxxxxxxPUSHER_APP_KEY=xxxxxxxxxxPUSHER_APP_SECRET=xxxxxxxxxxxPUSHER_APP_CLUSTER=xxxxxxBROADCAST_DRIVER=pusherCACHE_DRIVER=fileQUEUE_CONNECTION=syncSESSION_DRIVER=fileSESSION_LIFETIME=120
Enter fullscreen mode Exit fullscreen mode

#Create Event - From Backend

I will quickly create an Events named NewMessageNotification at app\Events

image.png

<?phpnamespace 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 Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;class NewMessageNotification implements ShouldBroadcastNow{    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 PrivateChannel('synchronized');    }}
Enter fullscreen mode Exit fullscreen mode

Register channels at routes/channels.php withreturn Auth::check(); . I force the Client-side to log in to listen to the event.

Broadcast::channel('synchronized', function ($user) {    return Auth::check();});
Enter fullscreen mode Exit fullscreen mode

image.png

Check the dashboard in Pusher, if successful connection will be displayed.

image (1).png

I'm going to use the Debug console function in Pusher to do the event quick send.

image (2).png

Or you can also use the Laravel Backend to post events, I will guide you in the following post, or refer here.

And this is the result
image (3).png

Have any questions, please comment below. Good luck.


Original Link: https://dev.to/hoangit/how-i-built-realtime-in-laravel-vuejs-1hgk

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To