删除另一个用户vue.js的类 [英] Remove class for another user vue.js

问题描述

我有聊天留言系统。

我有代码：

I have chat message system.
I have code:

<template>
<li :class="className">
     {{ message }}
</li>
</template>

<script>
export default {
    props: [
        'message',
        'user',
        'time',
        'seen',
    ],
    computed: {
        className() {
            return this.seen;
        }
    },
    mounted() {
        console.log('Component mounted.')
    }
}
</script>

App.js：

data:{
        message: '',
        convId: 1,
        chat: {
            message: [],
            user: [],
            time: [],
            seen: [],
        },
        typing: '',
    },    
    
    ....
    
    watch: {
    message() {
        Echo.private('chat')
            .whisper('typing', {
                name: this.message
            });
    }
},
methods: {
    send(){
        if(this.message.length != 0 && this.message.length <= 4000) {
            this.chat.message.push(this.message);
            this.chat.user.push('you');
            this.chat.time.push(this.getTime());
            this.chat.seen.push('unread'). //set class unread message for user
            axios.post('/sendMessage', {
                message: this.message,
                //lastName: 'Flintstone'
              })
              .then(response => {
                console.log(response);
                this.message = '';
              })
              .catch(error => {
                console.log(error);
              });
        }
    },
    seenMessage() {
    axios.post('/setMessagesSeen/' + this.convId) //this request mark messages in chat all readed for auhenticated user
            .then( response => { this.chat.seen.push(''); //remove unread class }) 
            .catch( response => { console.log(response) } )
    },
    getTime() {
        let time = new Date();
        return time.getHours() + ':' + time.getMinutes();
    }
},

mounted() {
    Echo.private('chat')
        .listen('ChatEvent', (e) => {
            this.chat.message.push(e.message);
            this.chat.user.push(e.user);
            this.chat.time.push(this.getTime());
            this.chat.seen.push('unread'). //set class unread message for user
            console.log(e);
        })
        .listenForWhisper('typing', (e) => {
            if(e.name != '')
                this.typing = 'typing..';
            else
                this.typing = null;
        });
}

我的chat.blade.php：

My chat.blade.php:

            <message v-for="value,index in chat.message" 
                :key=value.index 
                :user=chat.user[index]
                :message="chat.message[index]"
                :time="chat.time[index]"
                :seen="chat.seen[index]"
            >
            </message>
    <div class="form-group">
                <textarea maxlength="4000" cols="80" rows="3" class="message-input form-control" v-model='message' v-on:click="seenMessage"></textarea>
              </div>
              <div class="form-group">
                  <button type="button" class="btn btn-lg btn-primary" v-on:click="send">Send message</button>
              </div>

我看到的功能：

public function setMessagesSeen(Conversation $conversation) {
    $user = User::find(Auth::id());

    $conversations = Chat::conversation($conversation->id);

    //$dd = Chat::conversations($conversation)->for($user)->readAll();

    dd(Chat::conversations($conversations)->for($user)->getMessages()->where('body', 'asdfsadfsd'));

    //$message = Chat::messages($message)->for($user)->markRead();

    broadcast(new HasSeenMessage($message));

    return response('ok');
}

如何将未读课程发送给元素div其他用户？我可以在当前用户上粘贴类，并且我只为我获取元素聊天的颜色，但是当我看到消息时，如何为我和其他用户隐藏元素？

How I can send class "unread" to element div other user? I can paste class on current user, and I get color on element chat only for me, but how I can hide element for me and other user, when message is seen?

我想为用户做读/未读功能。
示例：

I want do read/unread function for users. Example:

如果用户实时发送消息我发送类未读，当其他用户点击textarea时，我删除了类未读，并且表示用户，消息被看到。我怎么能实时添加/删除类未读？我的功能不起作用。

If user in real time send message I send class unread, when other user click on textarea, I remove class unread, and said user, that message is seen. How I can do it in real time add/remove class unread? My function is not working.

推荐答案

要做到这一点，你必须在Laravel应用程序中创建一个你将在精确的频道（例如，你可以给出名称'chat。{Conversation}。{User_id}'）和Laravel Echo，你会听到这个事件！

To do this you have to create an Event in your Laravel application that you will broadcast on a precise channel (you can for example give the name 'chat. {Conversation}. {User_id}') and with Laravel Echo you will listen this event!

我允许自己在代码中进行一些更改 - ：）

I allowed myself to make some changes in your code -:)

我认为你有这个类HasSeenEvent

I presume you have this class HasSeenEvent

  <?php 
     namespace App\Events;

     use App\Order;
     use Illuminate\Queue\SerializesModels;
     use Illuminate\Broadcasting\PrivateChannel;
     use Illuminate\Broadcasting\PresenceChannel; 
     use Illuminate\Broadcasting\InteractsWithSockets;
     use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

    class HasSeenEvent implements ShouldBroadcast
   {
     use SerializesModels;

    public $message;

    /**
     * Create a new event instance.
     *
     * @param  Message $message
     * @return void
     */
    public function __construct(Message $message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        // I presume we can get conversation id like this : $this->message->conversation->id
        return new PrivateChannel('chat.'.$this->message->conversation->id.'.'.$this->message->sender->id);   
 }
}

然后，在你的routes / broadcast.php中声明这个路由聊天。{对话}。{user_id}

Then, in your routes/broadcast.php declare this route chat.{conversation}.{user_id}

在您将'see'置于1的功能中，您同时广播该事件

In the function where you put the 'seen' to 1 you broadcast the event at the same time

broadcast(new HasSeenMessage($message))

然后你在你的vuejs代码中听这个事件

Then you listen to this event in your vuejs code

components / Message.js

<template>
<li :class="className">
     {{ message }}
</li>
</template>

<script>
export default {
    props: [
        'message',
        'user',
        'time',
        'readed',
    ],
    computed: {
        className() {
            return this.readed == 1 ? 'seen' : 'unread';
        }
    },
    mounted() {
        console.log('Component mounted.')
    }
}
</script>

chat.blade.php

    <message v-for="message,index in chat.messages" 
        :key="index" 
        :user="message.user"
        :message="message.content"
        :time="message.time"
        :readed="message.readed"
    >
    </message>

      <div class="form-group">
          <button type="button" class="btn btn-lg btn-primary" v-on:click="send">Send message</button>
      </div>

App.js

data: {
    message: '',
    convId: 1,
    chat: {
        messages: [],
     /*  message: [],
      user: [],
      time: [],
      seen: [], */
    },
    typing: '',
  },

  ....

watch: {
    message() {
      Echo.private('chat')
        .whisper('typing', {
          name: this.message
        });
    }
  },
  methods: {
    send() {
      if (this.message.length != 0 && this.message.length <= 4000) {
       let data = {
        content: this.message,
        user: 'you',
        time:this.getTime(),
        readed: 0
       }
       this.chat.messages.push(data)
       data = {}

        axios.post('/sendMessage', {
            message: this.message,
            //lastName: 'Flintstone'
          })
          .then(response => {
            console.log(response);
            this.message = '';
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    seenMessage() {
      axios.post('/setMessagesSeen/' + this.convId) //this request mark messages in chat all readed for auhenticated user
        .then(response => {
           //This is not the best way to do that
            this.chat.messages[this.messages.length -1 ].readed = 0
         }).catch(response => {
              console.log(response)
         })
    },
    getTime() {
            let time = new Date();
            return time.getHours() + ':' + time.getMinutes();
          }
     },
     mounted() {
          Echo.private('chat')
            .listen('ChatEvent', (e) => {
                this.chat.messages.push({
               content: e.message,
               user: e.user,
               time: this.getTime(),
               readed: 0
              })
              console.log(e);
            })
            .listenForWhisper('typing', (e) => {
              if (e.name != '')
                this.typing = 'typing..';
              else
                this.typing = null;
            });
            // I presume to can access to user info
            let that = this
            Echo.private('chat.'+convId+'.'+user.id)
                 .listen('HasSeenMessage', (e) => {
                   let message = e.message

                   let lookingForMessage = that.chat.messages.find((m) => {
              // I presume in your db messages table  has field content and time
                        return m.content == message.content && m.time => message.time
                   })
                   try {
                     lookingForMessage.readed = 1
                   }catch (err){
                     // message not found
                     console.log(err)
                   }
                 })
        }

希望它对你有帮助！

这篇关于删除另一个用户vue.js的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！