Laravel, Vue.js chat realtime

Question

Cześć, od kilku dni próbuję poradzić sobie z czatem realtime w Laravel i Vue. Widziałem już podobne wątki na forum jednak nie rozwiązują one mojego problemu w żaden sposób. Używam Redis, socket.io i laravel-echo-server. Całe zaplecze zarówno po stronie serwera jak i klienta mam gotowe jednak nie mogę w żaden sposób uruchomić odbierania wiadomości w czasie rzeczywistym.

To może od początku. Mam utworzony Event który wygląda tak:

/**
     * @var ChatConversationMessage $message
     */
    public $message;

    /**
     * @param ChatConversationMessage $message
     */
    public function __construct(ChatConversationMessage $message)
    {
        $this->message = $message;
    }

    /**
     * @return string
     */
    public function broadcastAs(): string
    {
        return 'message.sent';
    }

    /**
     * @return PrivateChannel
     */
    public function broadcastOn(): PrivateChannel
    {
        return new PrivateChannel('private-chat-room-' . $this->message->conversation_id);
    }

    /**
     * @return array
     */
    public function broadcastWith(): array
    {
        return [
            'message_id' => $this->message->id,
            'message' => $this->message->message
        ];
    }

następnie, w serwisie, po zapisie wiadomości do bazy wywołuję Event

broadcast(new MessageEvent($item))->toOthers();
// gdzie $item to wysłana wiadomość

i to by było tyle po stronie serwera, teraz po stronie klienta mam plik laravel-echo-server.json wygenerowany, wygląda tak:

{
	"authHost": "http://localhost",
	"authEndpoint": "/api/broadcasting/auth",
	"clients": [
		{
			"appId": "66c7f1cb42ed2a12",
			"key": "9c4ea5dc3ce0b7ffba029b01cefcd5c7"
		}
	],
	"database": "redis",
	"databaseConfig": {
		"redis": {
			"port": "6379",
			"host": "127.0.0.1",
			"db": "0",
			"password": ""
		}
	},
	"devMode": true,
	"host": "127.0.0.1",
	"port": "6001",
	"protocol": "http",
	"socketio": {},
	"secureOptions": 67108864,
	"sslCertPath": "",
	"sslKeyPath": "",
	"sslCertChainPath": "",
	"sslPassphrase": "",
	"subscribers": {
		"http": true,
		"redis": true
	},
  "apiOriginAllow":{
    "allowCors" : true,
    "allowOrigin" : "http://127.0.0.1:8000/api/",
    "allowMethods" : "GET, POST",
    "allowHeaders" : "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
  }
}

konfiguracja 

import Echo from 'laravel-echo'

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

const echo = new Echo ({
  broadcaster: 'socket.io',
  host: window.location.hostname + ':6001',
  auth: {
    headers: {
      Authorization: "Bearer " + localStorage.getItem('token')
    }
  }
})

export default ({Vue}) => {
  Vue.prototype.$echo = echo
}

i teraz już w sumie ostatnia część, podczas wysyłania wiadomości

 submit() {
      this.$axios.post('chat/conversations/messages/create', this.data)
      .then((data) => {
        if (data.data.success === 1) {
          this.data.message = '';
          this.$emit('success')
          
          this.$echo.private('private-chat-room-'+this.$route.params.id)
            .listen('.message.sent', (e) => {
              console.log(e);
            })

        }
      })

    }

czy ktoś mógłby mi wskazać drogę? :D może czegoś brakuje lub coś do poprawy?

dodam jeszcze że pomiędzy serwerem a klientem komunikuję się przez api, nie jest to jedna aplikacja. Lara działa na porcie localhost:8000 a vue localhost:8080

redis po stronie serwera mam skonfigurowane. Redis i laravel-echo-server uruchomione

 

Będę wdzięczny za każdą wskazówkę :)

Comments

vue localhost:8080

na pewno Vue? czy socket.io?

Masz jakiś feedback na Rdisie?

Eventy na pewno działają?