【问题标题】:Laravel Echo and whisperLaravel Echo 和耳语
【发布时间】:2019-01-02 14:33:38
【问题描述】:

我正在运行 echo 服务器和 redis。私人频道完美运行,我为其构建的消息传递也很有效。现在我正试图让耳语也适用于打字状态,但没有运气。耳语需要推动者才能工作吗?

我在 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

那么我当然是在收听我正在耳语的频道:

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

但我在任何地方都一无所获。 (在回显服务器上调试,控制台上没有任何东西等)任何帮助如何使它工作将不胜感激。

【问题讨论】:

    标签: laravel echo whisper


    【解决方案1】:

    您的输入事件:

    $('input').on('keydown', function(){
      let channel = Echo.private('chat')
    
      setTimeout( () => {
        channel.whisper('typing', {
          user: userid,
          typing: true
        })
      }, 300)
    })
    

    您的收听活动:

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

    当然,您必须提前为此通道设置身份验证,以确保受信任方可以访问:

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

    $user 将是我们在前端对象中传递给 user 参数的 userid

    【讨论】:

    • 非常感谢!这正是我所需要的。现在可以使用了。
    • @Ohgodwhy 只是为了确定,在这个例子中,$('.typing') 是最有可能具有像 ${user} is typing... 这样的文本内容的元素,对吧?
    • @Tanmay 正确!
    【解决方案2】:

    这就是我的 ReactJS componentDidMount 的样子。 您的聆听活动。

    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);
    
    });
    }

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-12-21
      • 2017-01-10
      • 2021-03-21
      • 2020-06-14
      • 2019-02-08
      • 1970-01-01
      • 1970-01-01
      • 2017-02-24
      相关资源
      最近更新 更多