Untitled

import Echo from "laravel-echo"

window.io = require('socket.io-client');

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001'
});

<meta name="csrf-token" content="{{ csrf_token() }}">

BROADCAST_DRIVER=redis

Route::post('/push-message/', 'MessageController@push');
Route::get('/messages', 'HomeController@index');

public function index() {
    return view('messages');
}

public function push() {
    $event = new AppEventsMessages(auth()->user()->name, request('message'), request('userid'));
    broadcast($event);
}

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="messages">
    <!-- Messages from database -->
</div>
<form id="chat">
    <textarea id="message"></textarea>
    <button type="submit">Send</button>
</form>
<script>
<!-- Here we are setting socket io client -->
Echo.private('user.{{auth()->user()->id}}')
    .listen('Messages', (e) => {
        $('#messages').append('<div class="message">'+e.data.name+': '+e.data.message+'</div>');
    });
$('#chat').on('submit', function(e) {
    e.preventDefault();
    if($('#message').val() == "") {return false;}
    $.ajax({
        type: 'post',
        url: '/push-message'
        data: {
            userid: 1, //here logged as user with id 2
            message: $('#message').val(),
            '_token': {{ csrf_token() }}
        },
        success: function(success) {
            $('#messages').append('<div class="message">{{auth()->user()->name}}: '+$('#message').val()+'</div>');
            $('#message').val('');
        }
    });
});
</script>
</body>
</html>