title: Try to add pusher to existing timetrack-function with livewire / alpine
body: <p>Hey Guys,</p>
  <p>I try to add some ws-connection for an existing timetrack function, that a user with more than one device is logged in / logged out on all devices simultaneously.</p>
  <p>the original function looks like this:</p>
  <p>timetrack.blade.php</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;div&gt;
          &lt;div x-data=&quot;appTimer()&quot;&gt;
              &lt;template x-if=&quot;logged_in&quot;&gt;
                  &lt;span class=&quot;ml-2 text-green-500 text-2xl&quot; x-text=&quot;timer_text&quot;&gt;&lt;/span&gt;
              &lt;/template&gt;
              &lt;template x-if=&quot;!logged_in&quot;&gt;
                  &lt;span class=&quot;ml-2 text-red-500 text-2xl&quot; x-text=&quot;timer_text&quot;&gt;&lt;/span&gt;
              &lt;/template&gt;
              &lt;a x-on:click=&quot;toggle();&quot; class=&quot;cursor-pointer text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md&quot;&gt;
                  @if($logged_in)
                      &lt;svg class=&quot;text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;
                          &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; d=&quot;M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1&quot; /&gt;
                      &lt;/svg&gt;
                      Logout
                  @else
                      &lt;svg class=&quot;text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;  fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;
                          &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; d=&quot;M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1&quot; /&gt;
                      &lt;/svg&gt;
                      Login
                  @endif
              &lt;/a&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
      @push('scripts')
      &lt;script&gt;
          function appTimer()
          {
              return {
                  timer: @this.timer,
                  interval: null,
                  timer_text: '',
                  logged_in: @this.logged_in,
                  init() {
                      window.addEventListener('updatedLoggedIn',
                          function(event) {
                              this.logged_in = event.detail.logged_in;
                          }.bind(this)
                      );
                      this.timer = moment(&quot;00:00:00&quot;, &quot;HH:mm:ss&quot;).add(this.timer, 'seconds');
                      this.timer_text = this.timer.format(&quot;HH:mm:ss&quot;);
                      if(this.logged_in) {
                          this.startTimer();
                      }
                  },
  
                  toggle() {
                      if(this.logged_in) {
                          this.endTimer();
                          Livewire.emit('logout');
  
                      } else {
                          this.startTimer();
                          Livewire.emit('login')
                      }
                  },
                  startTimer() {
                      @this.logged_in = true;
                      this.interval = window.setInterval(() =&gt; {
                          this.timer.add(1, &quot;second&quot;);
                          this.timer_text = this.timer.format(&quot;HH:mm:ss&quot;);
                      }, 1000)
                  },
                  endTimer() {
                      @this.logged_in = false;
                      clearInterval(this.interval);
                  }
              }
          }
      &lt;/script&gt;
      &lt;script src=&quot;https://unpkg.com/moment&quot; /&gt;
      @endpush
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Timetrack.php</p>
  <pre class="lang-php prettyprint-override"><code>&lt;?php
  
  namespace App\Http\Livewire;
  
  use Carbon\Carbon;
  use Carbon\CarbonInterval;
  use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
  use Livewire\Component;
  
  class Timetrack extends Component
  {
      use AuthorizesRequests;
  
      public $logged_in = false;
      public $timer = 0;
      public \App\Models\Timetrack $timetrack;
  
      protected $listeners = ['login', 'logout'];
  
  
      public function mount() {
          $this-&gt;timetrack = \App\Models\Timetrack::where('user_id', auth()-&gt;id())-&gt;where('end_time', null)-&gt;first() ?? new \App\Models\Timetrack;
          $this-&gt;logged_in = (bool)$this-&gt;timetrack-&gt;id;
          $this-&gt;timer = \App\Models\Timetrack::where('user_id', auth()-&gt;id())-&gt;whereBetween('start_time', [Carbon::today(), Carbon::tomorrow()])-&gt;sum('duration') ?? 0;
  
          if ($this-&gt;logged_in) {
              // Add to timer the actual logged in time
              $this-&gt;timer += Carbon::now()-&gt;diffInSeconds($this-&gt;timetrack-&gt;start_time);
          }
      }
  
      public function render()
      {
          return view('livewire.timetrack');
      }
  
      public function updatedLoggedIn()
      {
          $this-&gt;dispatchBrowserEvent('updatedLoggedIn', ['logged_in' =&gt; $this-&gt;logged_in]);
      }
  
      public function login()
      {
          $this-&gt;timetrack = \App\Models\Timetrack::where('user_id', auth()-&gt;id())-&gt;where('end_time', null)-&gt;first() ?? new \App\Models\Timetrack;
  
          if(!$this-&gt;timetrack-&gt;id) {
              $this-&gt;timetrack-&gt;user_id = auth()-&gt;id();
              $this-&gt;timetrack-&gt;start_time = Carbon::now();
              $this-&gt;timetrack-&gt;save();
          }
  
          $this-&gt;logged_in = true;
          $this-&gt;timer = Carbon::now();
      }
  
  
      public function logout()
      {
          if(!$this-&gt;timetrack-&gt;end_time) {
              $this-&gt;timetrack-&gt;update([
                  'end_time' =&gt; Carbon::now(),
                  'duration' =&gt; Carbon::now()-&gt;diffInSeconds($this-&gt;timetrack-&gt;start_time),
              ]);
          } else {
              $this-&gt;dispatchBrowserEvent('notify', ['error' =&gt; true, 'message' =&gt; __('You are already logged out from a different device')]);
          }
  
          $this-&gt;logged_in = false;
  
      }
  
  }
  </code></pre>
  <p><strong>tried to add pusher</strong> in timetrack.blade.php</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script type=&quot;module&quot;&gt;
  var channel = window.Echo.channel(&quot;UpdatedLoggedIn-&quot; + {{ auth()-&gt;user()-&gt;id }});
  channel.listen('Timetrack', function(data) {
   // Get data.details.logged_in = true / false
      console.log(data)
   // Here I'm stuck - Description below
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Timetrack.php added event calls on logout and login which just do a pusher-call.</p>
  <pre class="lang-php prettyprint-override"><code>event(new \App\Events\Timetrack($this-&gt;logged_in));
  </code></pre>
  <p>Problem:
  I'm stuck on how to call appTimer().startTimer() / appTimer().endTimer() because of &quot;this&quot; is not set if I'm calling it statically.</p>
  <p>Maybe I just need a small hint :) thank you very much!</p>