0
I’ve set up Laravel Echo, Laravel-echo-server, Radis, Socket.io I’m already three weeks into trying and reading every problem posted here on the stack overflow And the documentation I found on google, I can’t make it work on the browser, Chrome shows nothing, although in redis and Laravel-echo-server everything works fine. Some help?
See my latest setup:
/Routes/Web.php
Auth::routes();
Route::get('/', function() {
return view('welcome');
});
Route::get('/welcome', function() {
return view('welcome');
});
Route::post('/messages', function () {
$data = request()->all();
$message = \App\Message::create($data);
broadcast(new \App\Events\SendMessage($message));
return redirect('/messages');
});
Route::get('/messages', function () {
$data = request()->all();
\App\Message::create($data);
return view('message');
});
/Resources/views/Messages.blade.php
@extends('layouts.app')
@section('content')
<form action="" method="post" class="container">
@csrf
<input type='hidden' value={csrfToken} id='js-csrf' />
<input type="text" name="title" class="form-control" placeholder="Title">
<textarea type="text" name="body" class="form-control" placeholder="Message...">
</textarea>
<input type="submit" value="Send" class="btn btn-primary">
</form>
@endsection
/Resources/js/App.js
require('./bootstrap');
window.Vue = require('vue').default;
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
/Resources/js/bootstrap.js
window._ = require('lodash');
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
import Echo from 'laravel-echo';
window.io = require('socket.io-client');
if (typeof io !== 'undefined') {
window.Echo = new Echo({
broadcaster: 'socket.io',
host: window.location.hostname + ':6001',
})
console.log('Connected to socket.io');
} else {
console.log('Not connected to socket.io');
}
/Resources/js/Components/Examplecomponent.Vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Messagens</div>
<div class="card-body">
<div class="alert alert-info" v-if="messages.length <= 0"></div>
<p v-for="(message, index) in messages" :key="index">
<strong> {{message.title}}</strong> <br />
{{message.body}} <br />
<small> {{ message.created_at }} </small>
</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
messages: []
}
},
mounted() {
window.Echo.channel('message-received')
.listen('.message', (e) => {
this.messages.push(e);
});
}
}
</script>
/config/App.php
App\Providers\BroadcastServiceProvider::class,
.ENV
LARAVEL_ECHO_PORT=6001
QUEUE_CONNECTION=sync
QUEUE_DRIVER=redis
BROADCAST_DRIVER=redis
CACHE_DRIVER=file
SESSION_DRIVER=file
SESSION_LIFETIME=120
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379
ECHO_HOST=192.241.159.78
ECHO_PORT=6001
ECHO_SCHEME=http
/Routes/Channels.php
Broadcast::channel('message-received', function ($user) {
return $user;
});
/App/Events/Sendmessage.php
class SendMessage implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
private $message;
public function __construct(Message $message) {
$this->message = $message;
}
public function broadcastOn() {
return new Channel('message-received');
}
public function broadcastWith() {
var_dump($this->message->toArray());
return $this->message->toArray();
}
public function broadcastAs() {
return 'message';
}
}
php -v
PHP 7.3.26-1+ubuntu18.04.1+deb.sury.org+1 (cli) (built: Jan 13 2021 08:00:44) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.26, Copyright (c) 1998-2018 Zend Technologies
with Zend OPcache v7.3.26-1+ubuntu18.04.1+deb.sury.org+1, Copyright (c) 1999-2018, by Zend Technologies
Laravel Framework: 8.24.0
laravel-echo-server: 1.6.2
redis-cli: 4.0.9
laravel-echo: 1.10.0
socket.io: 3.1.0
socket.io-client: 3.1.0
vue-axios: 3.2.4"
vuex: 4.0.0-rc.2
Package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.0.5",
"axios": "^0.21.1",
"bootstrap": "^4.0.0",
"jquery": "^3.2",
"laravel-mix": "^6.0.11",
"lodash": "^4.17.19",
"popper.js": "^1.12",
"postcss": "^8.1.14",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.6.12",
"vue-loader": "^15.9.5",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"karma": "^0.13.19",
"laravel-echo": "^1.10.0",
"socket.io": "^3.1.0",
"socket.io-client": "^3.1.0",
"vue-axios": "^3.2.4",
"vuex": "^4.0.0-rc.2"
},
Laravel-echo-server.json
{
"authHost": "http://162.241.285.29",
"authEndpoint": "/broadcasting/auth",
"clients": [
{
"appId": "***",
"key": "***"
}
],
"database": "redis",
"databaseConfig": {
"redis": {
"port": "6379",
"host": "localhost"
},
"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": "*",
"allowMethods": "GET, POST",
"allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
}
}
Redis-cli monitor
1612460665.656384 [0 192.241.159.78:33820] "SELECT" "0"
1612460665.656635 [0 192.241.159.78:33820] "EVAL" "for i = 2, #ARGV do\n redis.call('publish', ARGV[i], ARGV[1])\nend" "0"
"{
\"event\":\"message\",
\"data\":
{
\"id\":560,
\"title\":\"Message title\",
\"body\":\"Message Content, here are all the details of the message that does not appear in the browser at all.\",
\"content\":null,
\"created_at\":\"2021-02-04T17:44:25.000000Z\",
\"updated_at\":\"2021-02-04T17:44:25.000000Z\",
\"socket\":null
},
\"socket\":null
}"
"message-received"
1612460665.656691 [0 lua] "publish" "message-received"
"{
\"event\":\"message\",
\"data\":
{
\"id\":560,
\"title\":\"Message title\",
\"body\":\"Message Content, here are all the details of the message that does not appear in the browser at all.\",
\"content\":null,
\"created_at\":\"2021-02-04T17:44:25.000000Z\",
\"updated_at\":\"2021-02-04T17:44:25.000000Z\",
\"socket\":null
},
\"socket\":null
}"
Releasing the door 6001
For the Laravel and the Redis to work perfectly I released the door 6001 but in production Ambient has to be careful.
sudo ufw allow 6001
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: message-received
Event: message
Channel: message-received
Event: message
Laravel
And I execute this Queue
php artisan queue:work
Nothing on the browser. When I change to verses 2 of Socket.Io and Socket.io-client, an even stranger error appears: Typeerror: cb is not a Function I have also put point on channel name and solved nothing.
Have you tried to see a log of the folder
storage/logs? Logging sometimes helps more than one response in the browser.– Wallace Maxters
very well remembered, I did not look at the logs...
– Emilio Dami Silva
Dude, just a pitaco who’s been through a lot: He screwed up, the first thing is to look at the log. Blank browser and unexplained errors can be a thousand things. Log is your best friend.
– Wallace Maxters
@Wallacemaxters thanks so much for the help, I’m looking in the Switch Path but the logs are empty! Do you have any other idea where logs can be stored? But there has been no error. Just do not show on the screen anything...
– Emilio Dami Silva