Cześć wszystkim, to mój pierwszy post na forum więc na wstępie chciałem się przywitać :)
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