Laravel Echo and whisper

Question

I'm running echo server and redis. Private channels work perfectly, and messaging I have built for it works. Now I'm trying to get the whisper to work for the typing status as well but no luck. Does whisper require a pusher to work?

What I have tried on keyup (jquery)

Echo.private(chat- + userid)
.whisper('typing',{e: 'i am is typing...'});
console.log('key up'); // this one works so the keyup is triggered

then I'm of course listening the channel what I am whispering into:

Echo.private(chat- + userid).listenForWhisper('typing', (e) => {
console.log(e + ' this is typing');
});

But I get absolutely nothing anywhere. (debugging on at the echo server, nothing on console etc) Any help how to get this to work would be much appreciated.

Answer 1

This is what my ReactJS componentDidMount looks like. Your listening event.

componentDidMount() {
let timer; // timer variable to be cleared every time the user whispers

Echo.join('chatroom')
  .here(...)
  .joining(...)
  .leaving(...)
  .listen(...)
}).listenForWhisper('typing', (e) => {

  this.setState({
    typing: e.name
  });

  clearTimeout(timer); // <-- clear
  // Take note of the 'clearTimeout' before setting another 'setTimeout' timer.
  // This will clear previous timer that will make your typing status
  // 'blink' if not cleared.
  timer = setTimeout(() => {
    this.setState({
      typing: null
    });
  }, 500);

});
}

Answer 2

Your input event:

$('input').on('keydown', function(){
  let channel = Echo.private('chat')

  setTimeout( () => {
    channel.whisper('typing', {
      user: userid,
      typing: true
    })
  }, 300)
})

Your listening event:

Echo.private('chat')
  .listenForWhisper('typing', (e) => {
    e.typing ? $('.typing').show() : $('.typing').hide()
  })

setTimeout( () => {
  $('.typing').hide()
}, 1000)

Of course you have to have setup the authentication for this channel ahead of time to ensure that the trusted parties have access:

Broadcast::channel('chat', function ($user) {
    return Auth::check();
});

Where $user will be the userid we passed to the user param in our object on the front end.