Channel is not defined. Laravel, Push notifications pusher - laravel

Question

I'm using pusher for push notifications in my laravel production web with cloud server. It's was working on localhost, then stopped working on localhost too and giving the error in console that channel is not defined.
Header:
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" type="text/css"
href="//cdn.jsdelivr.net/npm/bootstrap-notifications#1.0.3/dist/stylesheets/bootstrap-notifications.min.css">
Body:
<script>
var notificationsWrapper = $('.dropdown');
var notificationsToggle = notificationsWrapper.find('a[data-toggle]');
var notificationsCountElem = notificationsToggle.find('i[data-count]');
var notificationsCount = parseInt(notificationsCountElem.data('count'));
var notifications = notificationsWrapper.find('ul.dropdown-menu');
if (notificationsCount <= 0) {
notificationsWrapper.hide();
}
// Enable pusher logging - don't include this in production
// Pusher.logToConsole = true;
const pusher = new Pusher('PUSHER_APP_KEY', {
cluster: 'ap2',
encrypted: true
});
// Bind a function to a Event (the full Laravel class)
channel.bind('App\\Events\\StatusLiked', function (data) {
var existingNotifications = notifications.html();
var avatar = Math.floor(Math.random() * (71 - 20 + 1)) + 20;
var newNotificationHtml = "" +
"<li class='notification active'><div class='media'>" +
"<div class='media-left'>" +
"<div class='media-object'>" +
"<img src='https://api.adorable.io/avatars/71/" + avatar + ".png' class='img-circle' alt='50x50' style='width: 50px; height: 50px;'>" +
"</div>" +
"</div>" +
"<div class='media-body'>" +
"<strong class='notification-title'>" + data.message + "</strong><!--p class='notification-desc'>Extra description can go here</p-->" +
"<div class='notification-meta'>" +
"<small class='timestamp'>about a minute ago</small>" +
"</div>" +
"</div>" +
"</div>" +
"</li>";
notifications.html(newNotificationHtml + existingNotifications).trigger('create');
notificationsCount += 1;
notificationsCountElem.attr('data-count', notificationsCount);
notificationsWrapper.find('.notif-count').text(notificationsCount);
notificationsWrapper.show();
});
</script>
The console prints Channel is is not defined.

Answer 1

You need to subscribe to a channel before binding to events on the channel. The Channels flow is:
1. Connect to the Channels service
2. Subscribe to channel(s)
3. Bind to events on the subscribed chanels.
As you have not included an Auth URL parameter to your Pusher object I can assume you are using public channels. You can subscribe to public channels using:
var channel = pusher.subscribe('CHANNEL-NAME');
NOTE: any published events are published to a channel, so you will need to ensure the channel you are subscribing to on the client matches the channel that you are publishing events to from the server.