Remove class for another user vue.js

Question

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

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>

My function seen:

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

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:

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.

Answer 1

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 -:)

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

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

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

broadcast(new HasSeenMessage($message))

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

Hope it helped you!