I'm developing real-time app with Laravel. Since I don't want to use Pusher, I'm trying to make websockets work using Laravel Echo Server, Redis, and Socket.IO. However, I'm having a problem with this stack. The client (browser) can't seem to receive data from events. I also use Intertia and Vue for the frontend. It's also worth noting that I use Laragon as my local dev environment.
My .env, some are omitted:
APP_URL=http://malbe.test
BROADCAST_DRIVER=redis
CACHE_DRIVER=file
QUEUE_CONNECTION=redis
SESSION_DRIVER=file
SESSION_LIFETIME=120
MIX_APP_URL="${APP_URL}"
My laravel-echo-server.json:
{
"authHost": "http://malbe.test",
"authEndpoint": "/broadcasting/auth",
"clients": [
{
"appId": "omitted",
"key": "omitted"
}
],
"database": "redis",
"databaseConfig": {
"redis": {},
"sqlite": {
"databasePath": "/database/laravel-echo-server.sqlite"
}
},
"devMode": true,
"host": null,
"port": "6001",
"protocol": "http",
"socketio": {},
"secureOptions": 67108864,
"sslCertPath": "",
"sslKeyPath": "",
"sslCertChainPath": "",
"sslPassphrase": "",
"subscribers": {
"http": true,
"redis": true
},
"apiOriginAllow": {
"allowCors": true,
"allowOrigin": "http://malbe.test:80",
"allowMethods": "GET, POST",
"allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
}
}
My redis config on database.php:
Note: I use predis because I can't seem to make phpredis work even if I installed the dll on PHP extensions.
'redis' => [
// 'client' => env('REDIS_CLIENT', 'phpredis'),
'client' => env('REDIS_CLIENT', 'predis'),
'options' => [
'cluster' => env('REDIS_CLUSTER', 'redis'),
// 'prefix' => env('REDIS_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_database_'),
'prefix' => "",
],
'default' => [
'url' => env('REDIS_URL'),
'host' => env('REDIS_HOST', '127.0.0.1'),
'password' => env('REDIS_PASSWORD', null),
'port' => env('REDIS_PORT', '6379'),
'database' => env('REDIS_DB', '0'),
],
'cache' => [
'url' => env('REDIS_URL'),
'host' => env('REDIS_HOST', '127.0.0.1'),
'password' => env('REDIS_PASSWORD', null),
'port' => env('REDIS_PORT', '6379'),
'database' => env('REDIS_CACHE_DB', '1'),
],
],
My Laravel event:
class SampleEvent implements ShouldBroadcast {
use Dispatchable, InteractsWithSockets, SerializesModels;
public function __construct()
{
//
}
public function broadcastOn() {
return new Channel("my-channel");
}
public function broadcastWith() {
return ["data"=>"Hello"];
}
}
My Echo initialization at bootstrap.js:
import Echo from "laravel-echo";
window.io = require("socket.io-client");
if (typeof window.io !== "undefined") {
window.Echo = new Echo({
broadcaster: "socket.io",
host: process.env.MIX_APP_URL + ":6001"
});
}
On the Vue page that subscribes to the Echo server
export default {
props: ["foo"],
mounted: function () {
window.Echo.channel("my-channel").listen("SampleEvent", (d) => console.log(d));
}
};
With these 3 commands running:
laravel-echo-server startnpm run watchphp artisan queue:work
I tried broadcasting an event using Tinker and GET request.
Route::get("/broadcast", function () {
event(new \App\Events\SampleEvent);
// also tried
// broadcast(new \App\Events\SampleEvent);
});
Queue worker processes the events;
[2020-12-24 11:07:35][n9FKq0n6C6QOKa2f1JBzWcCqgYqLiDvU] Processing: App\Events\SampleEvent
[2020-12-24 11:07:35][n9FKq0n6C6QOKa2f1JBzWcCqgYqLiDvU] Processed: App\Events\SampleEvent
And laravel-echo-server outputs this whenever an event was broadcast;
L A R A V E L E C H O S E R V E R
version 1.6.2
⚠ Starting server in DEV mode...
✔ Running at localhost on port 6001
✔ Channels are ready.
✔ Listening for http events...
✔ Listening for redis events...
Server ready!
Channel: my-channel
Event: App\Events\SampleEvent
Client does not show any error. Here is a look to its Network Tab on Developer Console:
And when I closed the laravel-echo-server while the client is still open this error occurs every other second:
Sorry for the lengthy question, I just had to show all my configuration so that I can help you help me with this issue. Can anyone point me to the right solution? Thanks!