I am trying to build an app and api(iOS and Android) with Laravel 5.4. I need to implement some real time notifications because of that like ETA.
I downloaded Laravel-Echo-Server and installed socket.io, created an event which does fire correctly- but my client side never listens to the channel. What am I doing wrong and can I use this technology to have a bidirectional real time communication to an iOS device using socket.io and redis
Also I am confused why I need both larvel-echo-server and socket.js servers. Since they cant be at the same port
I thank you in advance for helping me out
Here is my code
My web.php
Route::get('/testredis',function(){
event(new UserLookingFor('JohnDoe'));
return view('welcome');
});
My event
<?php
namespace App\Events;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class UserLookingFor implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $username;
/**
* Create a new event instance.
*
* @return void
*/
public function __construct($username)
{
//
$this->username=$username;
}
/**
* Get the channels the event should broadcast on.
*
* @return Channel|array
*/
public function broadcastOn()
{
return new Channel('test-channel');
//return new PrivateChannel('test-channel');
}
public function broadcastAs()
{
return 'UserLookingFor';
//return new PrivateChannel('test-channel');
}
}
My welcome blade
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
// rename myToken as you like
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
</head>
<body>
<div id="test">
<ul id="user">
<li v-for="user in users">@{{ user }}</li>
</ul>
</div>
<script src="//{{ Request::getHost() }}:6002/socket.io/socket.io.js"></script>
<script type="text/javascript" src="{{ URL::asset('/js/app.js') }}"></script>
<script type="text/javascript">
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
console.log("doc is ready");
Echo.channel('test-channel').listen('UserLookingFor', function(e) {
console.log(e);
});
}
};
</script>
<script>
new Vue({
el:'#test',
data:{
users: ['aj']
},
mounted: function(){
console.log('xs');
this.users.push('ajx');
window.Echo.channel('test-channel')
.listen('App\Events\UserLookingFor',function(e) {
alert('x');
this.users.push('ajx');
console.log(e.username);
}).bind(this);
}
});
</script>
</body>
</html>
My app.js
import Echo from "laravel-echo"
window.Echo = new Echo({
broadcaster: 'socket.io',
//host: 'localhost:6002'
host: window.location.hostname + ':6002'
});
my socket.js
const server = require('http').Server();
const io=require('socket.io')(server);
const Redis = require('ioredis');
const redis = new Redis();
redis.subscribe('test-channel');
redis.on('message',function(channel,message){
console.log(channel, message);
message=JSON.parse(message);
io.emit(message.event,channel, message.data);
console.log(channel+':'+message.event, message);
//console.log(message);
});
server.listen(6001);
my laravel echo server json file
{
"authHost": "http://localhost",
"authEndpoint": "/broadcasting/auth",
"clients": [
{
"appId": "xxxxxxxxxxxx",
"key": "xxxxxxxxxx"
}
],
"database": "redis",
"databaseConfig": {
"redis": { "port": "6379",
"host": "localhost"}
},
"devMode": true,
"host": null,
"port": "6002",
"protocol": "http",
"socketio": {},
"sslCertPath": "",
"sslKeyPath": ""
}
My package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"jquery": "^3.1.1",
"laravel-mix": "0.*",
"lodash": "^4.17.4",
"vue": "^2.1.10"
},
"dependencies": {
"laravel-echo": "^1.3.0",
"laravel-echo-server": "^1.2.8"
}
}
