tlaverdure / laravel-echo-server

Socket.io server for Laravel Echo
MIT License
2.65k stars 510 forks source link

Events will not dispatch #383

Open drpshtiwan opened 5 years ago

drpshtiwan commented 5 years ago

I have done all the steps for installing the laravel-echo-server, but when I want to dispatch an event it will not log into the server.. the laravel-echo-server shows the connected users but can not dispatch..

Here my codes

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

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

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

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('chat');
    }
}
<?php

use App\Events\Message;

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

Route::post('/messages', function () {
    Message::dispatch(request('body'));
});

Here my vue component

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <div class="form-group">
                      <textarea class="form-control" name="" id="" readonly rows="10">{{messages.join('\n')}}</textarea>
                    </div>
                  <input type="text" name="" id="" class="form-control" v-model="txtMessage" @keyup.enter="sendMessage">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                messages: [],
                txtMessage:''
            }
        },
        mounted(){
            window.Echo.channel('chat').listen('Message',({message}) => {
                this.messages.push(message.body)
            })
        },
        methods: {
            sendMessage(){
                axios.post('/messages',{body:this.txtMessage})
                this.messages.push(this.txtMessage)
                this.txtMessage = ''
            }
        }
    }
</script>

import Echo from 'laravel-echo'

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

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

and that is the laravel-echo-server.json

{
    "authHost": "http://localhost",
    "authEndpoint": "/broadcasting/auth",
    "clients": [],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": false,
        "allowOrigin": "",
        "allowMethods": "",
        "allowHeaders": ""
    }
}
goodmartian commented 3 years ago

Have you solved the problem?