Route::get('/', function () {
return view('welcome');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');
Route::get('/contacts', 'ContactsController@get');
Route::get('/conversation/{id}', 'ContactsController@getMessagesFor');
Route::post('/conversation/send', 'ContactsController@send');

Route::get('/user', function() { // for testing purposes
echo Auth::id();
});

namespace AppHttpControllers;

use IlluminateSupportFacadesAuth;
use IlluminateHttpRequest;
use AppUser;
use AppMessage;
use AppEventsNewMessage;

class ContactsController extends Controller {

public function __construct() {
    $this->middleware('auth');
}

public function get() {
    $contacts = User::where('id', '!=', auth()->id())->get();
    return response()->json($contacts);
}

public function getMessagesFor($id) {
    $messages = Message::where('from', $id)->orWhere('to', $id)->get();

    return response()->json($messages);
}

public function send(Request $request) {
    $user = Auth::user();
    $message = Message::create([
        'from' => auth()->id(),
        'to' => $request->contact_id,
        'text' => $request->text
    ]);

    broadcast(new NewMessage($user, $message))->toOthers();

    return response()->json($user, $message);
}
}

<?php

namespace AppEvents;
use AppMessage;
use AppUser;
use IlluminateBroadcastingChannel;
use IlluminateQueueSerializesModels;
use IlluminateBroadcastingPrivateChannel;
use IlluminateBroadcastingPresenceChannel;
use IlluminateFoundationEventsDispatchable;
use IlluminateBroadcastingInteractsWithSockets;
use IlluminateContractsBroadcastingShouldBroadcast;

class NewMessage implements ShouldBroadcast {
use Dispatchable, InteractsWithSockets, SerializesModels;

/**
 * User that sent the message
 *
 * @var User
 */

public $user;

/**
 * Message details
 *
 * @var Message
 */

public $message;

/**
 * Create a new event instance.
 *
 * @return void
 */

public function __construct(User $user, Message $message)
{
    $this->user = $user;
    $this->message = $message;
}

/**
 * Get the channels the event should broadcast on.
 *
 * @return IlluminateBroadcastingChannel|array
 */
public function broadcastOn()
{
    return new PrivateChannel('messages.' . $this->message->to);
}

public function broadcastWith() {
    return ["message" => $this->message];
}
}

import Conversation from './Conversation';
import ContactsList  from './ContactsList';

export default {

    props: {
        user: {
            type: Object,
            required: true
        }
    },

    data() {
        return {
            selectedContact: null,
            messages: [],
            contacts:[]
        };
    },

    mounted() {
        Echo.private(`messages${this.user.id}`)
            .listen('NewMessage', (e) => {
                this.handleIncoming(e.message);
            });

        axios.get('/contacts')
            .then((response) => {
                this.contacts = response.data;
            });
    },
    methods: {
        startConversationWith(contact) {
            axios.get(`conversation/${contact.id}`)
                .then((response) => {
                    this.messages = response.data;
                    this.selectedContact = contact;
                })
        },

        saveNewMessage(message) {
            this.messages.push(message);
        },

        handleIncoming(message) {
            if (this.selectedContact && message.from ==
 this.selectedContact.id) {
                this.saveNewMessage(message);
                return;
            }

            //alert(message.text);
        }
    },
    components: {
        Conversation,
        ContactsList
    }
}

methods: {
        sendMessage(text) {
            if (!this.contact) {
                return;
            }

            axios.post('/conversation/send', {
                contact_id: this.contact.id,
                text: text
            }).then((response) => {
                this.$emit('new', response.data);
            })
        }
    },

export default {
    data() {
        return {
            message: ''
        };
    },
    methods: {
        send(e) {
            e.preventDefault();
            if (this.message == '') {
                return;
            }
            this.$emit('send', this.message);
            this.message = '';
        }
    }
}