Как опознать чье сообщение в реалтайм чате
Подскажите как опознать чье сообщение в реалтайм чате. Бек на laravel бродкастер laravel-echo-server, фронт на vue. Например в комнате три юзера Коля, Вася, Петя. Петя пишет "всем привет" и для него этот пост в чате отображается синим, отвечаем ему Коля "привет" и для Пети этот текст красным, а для Коли текст Пети соответственно красным, а свой синим :) Ну надеюсь понятно :)
Вот мой код во вьюшке
<div class="chat-room__body">
<div class="chat-room__content">
<div class="chat-room__messages">
<div v-for="message in messages" class="chat-room__message " >
<div class="chat-room__message-author"></div>
<div class="chat-room__message-text">{{ message }}</div>
</div>
</div>
</div>
<div class="chat-room__controls">
<div class="chat-room__message-content">
<input id="message-content" @keyup.enter="sendMessage" v-model="textMessage">
<img width="30" src="/images/chat/send.svg" alt="send icon" class="chat-room__send">
</div>
</div>
</div>
<script>
export default {
data() {
return{
messages: [],
textMessage: '',
isSender: false
}
},
mounted() {
window.Echo.private('room.2').listen('PrivateChatEvent', ({data, currentUser}) => {
this.messages.push(data.body);
});
let chatContent = document.querySelector('.chat-room__messages');
chatContent.scrollTop = chatContent.scrollHeight;
},
methods: {
sendMessage(){
axios.post('/panel/messages/send', {body: this.textMessage, room_id: 2 });
this.messages.push(this.textMessage);
this.textMessage = '';
}
}
}
</script>
Ивент на беке
class PrivateChatEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $data;
/**
* Create a new event instance.
*
* @return void
*/
public function __construct($data)
{
$this->data['user'] = \Auth::user();
$this->dontBroadcastToCurrentUser();
}
/**
* Get the channels the event should broadcast on.
*
* @return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new PrivateChannel('room.' . $this->data['room_id']);
}
}