laravel pusher notifications

Solutions on MaxInterview for laravel pusher notifications by the best coders in the world

showing results for - "laravel pusher notifications"
29 Oct 2016
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <title>Demo Application</title>
8    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
9    <link rel="stylesheet" type="text/css" href="/css/bootstrap-notifications.min.css">
10    <!--[if lt IE 9]>
11      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
12      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
13    <![endif]-->
14  </head>
15  <body>
16    <nav class="navbar navbar-inverse">
17      <div class="container-fluid">
18        <div class="navbar-header">
19          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
20            <span class="sr-only">Toggle navigation</span>
21            <span class="icon-bar"></span>
22            <span class="icon-bar"></span>
23            <span class="icon-bar"></span>
24          </button>
25          <a class="navbar-brand" href="#">Demo App</a>
26        </div>
27
28        <div class="collapse navbar-collapse">
29          <ul class="nav navbar-nav">
30            <li class="dropdown dropdown-notifications">
31              <a href="#notifications-panel" class="dropdown-toggle" data-toggle="dropdown">
32                <i data-count="0" class="glyphicon glyphicon-bell notification-icon"></i>
33              </a>
34
35              <div class="dropdown-container">
36                <div class="dropdown-toolbar">
37                  <div class="dropdown-toolbar-actions">
38                    <a href="#">Mark all as read</a>
39                  </div>
40                  <h3 class="dropdown-toolbar-title">Notifications (<span class="notif-count">0</span>)</h3>
41                </div>
42                <ul class="dropdown-menu">
43                </ul>
44                <div class="dropdown-footer text-center">
45                  <a href="#">View All</a>
46                </div>
47              </div>
48            </li>
49            <li><a href="#">Timeline</a></li>
50            <li><a href="#">Friends</a></li>
51          </ul>
52        </div>
53      </div>
54    </nav>
55
56    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
57    <script src="//js.pusher.com/3.1/pusher.min.js"></script>
58    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
59
60    <script type="text/javascript">
61      var notificationsWrapper   = $('.dropdown-notifications');
62      var notificationsToggle    = notificationsWrapper.find('a[data-toggle]');
63      var notificationsCountElem = notificationsToggle.find('i[data-count]');
64      var notificationsCount     = parseInt(notificationsCountElem.data('count'));
65      var notifications          = notificationsWrapper.find('ul.dropdown-menu');
66
67      if (notificationsCount <= 0) {
68        notificationsWrapper.hide();
69      }
70
71      // Enable pusher logging - don't include this in production
72      // Pusher.logToConsole = true;
73
74      var pusher = new Pusher('API_KEY_HERE', {
75        encrypted: true
76      });
77
78      // Subscribe to the channel we specified in our Laravel Event
79      var channel = pusher.subscribe('status-liked');
80
81      // Bind a function to a Event (the full Laravel class)
82      channel.bind('App\\Events\\StatusLiked', function(data) {
83        var existingNotifications = notifications.html();
84        var avatar = Math.floor(Math.random() * (71 - 20 + 1)) + 20;
85        var newNotificationHtml = `
86          <li class="notification active">
87              <div class="media">
88                <div class="media-left">
89                  <div class="media-object">
90                    <img src="https://api.adorable.io/avatars/71/`+avatar+`.png" class="img-circle" alt="50x50" style="width: 50px; height: 50px;">
91                  </div>
92                </div>
93                <div class="media-body">
94                  <strong class="notification-title">`+data.message+`</strong>
95                  <!--p class="notification-desc">Extra description can go here</p-->
96                  <div class="notification-meta">
97                    <small class="timestamp">about a minute ago</small>
98                  </div>
99                </div>
100              </div>
101          </li>
102        `;
103        notifications.html(newNotificationHtml + existingNotifications);
104
105        notificationsCount += 1;
106        notificationsCountElem.attr('data-count', notificationsCount);
107        notificationsWrapper.find('.notif-count').text(notificationsCount);
108        notificationsWrapper.show();
109      });
110    </script>
111  </body>
112</html>
113
114
source
queries leading to this page