beyondcode
Laravel Websockets is not working sometimes, not delivering updates
I'm using the latest version of everything, Laravel, Laravel Echo, Axios and so on and so forth.
My server is a Digital Ocean 2nd (or 3rd?) tier server (4GB RAM 80GB disk, 2 vCPU) managed via Laravel Forge.
I 100% based my Forge configuration on this guide https://alex.bouma.dev/installing-laravel-websockets-on-forge/
One of my clients reported thay they weren't getting any updates at some point for changes on an appointments module, he had to refresh the page to get it working again.
The weird part is that he was still receiving messages from a small chat module my app has that is based on the same principle.
This is a little bit of code: My Vue file:
/**
* Starts listening to update appointments events.
*
*/
updateAppointments() {
Echo.channel(`update-appointments.${this.office_id}`)
.listen('.list.new.appointments', (event) => {
if (!this.isEditingAppointment) {
this.checkAppointments();
} else {
this.pendingUpdateFlag = true;
}
})
.listen('.list.updated.dates', (event) => {
this.listDates(false);
})
.listen('.list.updated.entities', (event) => {
this.listEntities();
})
.listen('.list.updated.locations', (event) => {
this.listLocations();
this.listAppointments();
});
}
Channels.php:
// Appointments events
Broadcast::channel('update-appointments.{officeId}', function ($user, $officeId) {
return ($user->hasPermission('appointments') && $user->office_id === $officeId);
});
And one of the events, AppointmentEvent.php:
namespace App\Events;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
class AppointmentEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $officeId;
/**
* Create a new event instance.
*
* @param int $officeId
* @return void
*/
public function __construct($officeId)
{
$this->officeId = $officeId;
}
/**
* The event's broadcast name.
*
* @return string
*/
public function broadcastAs()
{
return 'list.new.appointments';
}
/**
* Get the channels the event should broadcast on.
*
* @return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new Channel('update-appointments.' . $this->officeId);
}
}
As a side note, I'm forced to subscribe the users to regular channels since private ones won't work when a parameter is included on the channel's name (like this.office_id) it happens with either Laravel Websockets or an old Echo + Socket.io + redis method I was using in the past.
SMALL UPDATE: As I was writing this post, the same client reported that he didn't receive some chat messages, I asked him if maybe the sender typed both messages very quickly or something, maybe the fake pusher server is not fast enough to give updates in really short periods of time? but yeah, Websockets is not being reliable right now.
Maybe it has something to do with the way I configured Websockets in my forge server? not enough resources allocated? but to be perfectly honest, it's weird because at this moment there's probably less than 10 people using the application as it is in a testing phase.
I hope you can give me a solution to this.
Thanks in advance.
I may have a similar issue: when I look at the javascript console in my browser, this library seems to fallback to pusher servers instead of the local websockets server, even if the local websocket server works properly.
It looks like the client part (Laravel Echo) randomly tries to use external pusher servers.
Unfortunately I haven't yet found a solution for this. This happens specially in the chat module, person X sends a message to person Y and person Y never recieves said message. In other situations person Y can receive a duplicate of the same message.
I don't know what to do honestly, I have never been able to reproduce it locally and it happens too sporadically on live. I tasked my clients to take screenshots of their consoles to see if something was popping up that could be useful but nothing
I'm gonna be honest, the times of people collaborating and lending a hand to fix issues seems to be dying little by little. I found the solution by accident 2 weeks ago, forgot to post it here:
So laravel websockets is basically faking a pusher server as we know. Turns out, the way websockets is doing it's stuff makes it so pusher fails to reconnect to the socket after 2 attempts when the internet connection is down and comes back up. This is where I got the info from. https://github.com/beyondcode/laravel-websockets/issues/163
I pinpointed that the people having this issue were reportedly having connection drops on their places of work, of course that's not an issue I can address myself but I tried a workaround. I think the link points to an answer from someone forking pusher so it lifts that limitation, but to be honest I didn't really want to tinker with people's modifications to something as sensitive as websockets, so what I did was to use laravel echo's events for the state change to check if a reconnection failed, to force a page reload, like this
Echo.connector.pusher.connection.bind('state_change', (state) => {
console.log('Debug - Current connection state: ' + state.current);
if (this.websocketsState !== '' && state.current === 'connected') {
Event.$emit('refresh-websocket-events', state.current);
} else if (this.websocketsState !== '' && state.current === 'failed') {
this.reconnectInterval = window.setInterval(() => {
var ifConnected = window.navigator.onLine;
if (ifConnected) {
// Event.$emit('refresh-websocket-events', state.current);
clearInterval(this.reconnectInterval);
Event.$emit('reload-modal', 'A page reload is necessary, performing one in a couple seconds.');
}
}, 3000);
}
this.websocketsState = state.current;
});
Hopefully this can serve to give some insight to this issue