I try to use toOhers() method in broadcasting. In documentation write for this need socketId and I use this in bootstrap.js
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
let socketId = Echo.socketId();
window.Echo = new Echo({
headers: {
'X-Socket-ID' : socketId,
},
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
forceTLS: false,
});
and blade file
<script src="{{ asset('js/app.js') }}"></script>
<script>
Echo.channel('private-orders-auth')
.listen('OrderStatusUpdateAuth', (e) => {
console.log(e);
});
</script>
But this error come
[1]: https://i.stack.imgur.com/grJ5V.png
TypeError: laravel_echo__WEBPACK_IMPORTED_MODULE_0__.default.socketId is not a function
How I can fix it? Thank for the answers!
In general, where I can find an example code for toOrhers method for broadcasting?
Related
How do you set-up Laravel Echo in Svelte (SSR)?
I tried the following code from the documentation but it doesn't seem to work.
import Echo from "laravel-echo"
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'your-pusher-key',
wsHost: window.location.hostname,
wsPort: 6001,
forceTLS: false,
disableStats: true,
});
The code shows an error that window is undefined.
I also tried searching for instructions or references online but can't seem to find one for setting up Laravel Echo.
Thanks a lot!
You've got to wait for window context.
If you're using sveltekit:
import { browser } from '$app/environment';
if (browser) {
//your window.Pusher code
}
Else if you're using vanilla svelte
import { onMount } from 'svelte'
onMount(async()=>{
//Your window.pusher code
})
I used Laravel Echo and Pusher for increment counter of notification in real time, it was working for a time but no it doesn't work anymore and i don't know the reason why ( the counter doesn't increment in real time, i need to refresh the page)
i changed my .env with id of pusher:
PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=eu
i used in layout this trick in order to get the id of admin :
<script>
window.User = {
id: {{ optional(auth()->user())->id}}
}
</script>
and in bootstrap.js :
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
forceTLS: true
});
window.Echo.private('App.Models.User.' +User.id)
.notification((notification) => {
document.getElementById('js-count').innerHTML = parseInt(document.getElementById('js-count').innerHTML) + 1;
});
If I init echo and pusher in the bootstrap.js file I can see in pushers dashboard that a new connection is taken every time I visit/open my app in another tab even though I dont subscribe to any channels:
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
encrypted: true
});
This is very bad since I only need pusher/echo on a singel page in my app and not all.
So instead I have setup a page.vue file in my app where I load echo/pusher:
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
mounted() {
this.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: 'us',
encrypted: true
});
this.Echo.channel('post')
.listen('NewPost', (item) => {
console.log(item);
});
But is there any way I can add Echo/pusher window.Echo window.Pusher to my window DOM without making ut connect to pushers websocket? Eg only connect once I call .listen()
How about this?
import Echo from 'laravel-echo';
window.EchoService = {
init: () =>
new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
encrypted: true
}),
otherFunctions: ....,
}
Then in your vue page:
mounted() {
this.newEcho = window.EchoService.init();
this.newEcho.channel('post')
.listen('NewPost', (item) => {
console.log(item);
});
}
You may also need to disconnect from the pusher on component destroyed
destroyed() {
this.newEcho.leave('post');
// or this.newEcho.leave();
}
I recently worked on a notification system using Pusher and Laravel. unfortunately can't make it work this way:
import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');
Pusher.logToConsole = true;
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'WORKING KEY ..',
cluster : "mt1",
encrypted: true
});
and
window.Echo.channel('post')
.listen('ArticleEvent', function (e) {
console.log(e);
});
While messages was sent to client console, but Listen didn't worked at all... and nothing logged.
anyway I used this way and it worked:
window.Pusher = require('pusher-js');
var pusher = new Pusher('WORKING KEY ..', {
encrypted: true,
cluster: 'mt1',
});
var channel = pusher.subscribe('post');
channel.bind('ArticleEvent', function(e) {
alert(JSON.stringify(e['message']));
});
What is deference between 2 ways and which must be preferred?
You need to include namespace information in the Listen method.
Please try using (note the . character):
window.Echo.channel('post')
.listen('.ArticleEvent', function (e) {
console.log(e);
});
There is a limitation of bandwidth usage of my website.So I want get the Laravel Echo from a cdn server instead of my own server.
I tried in my test.blade.php
<script src="https://cdn.jsdelivr.net/npm/socket.io-client#2.1.0/dist/socket.io.js"></script>
<script src="https://cdn.jsdelivr.net/npm/laravel-echo#1.3.5/dist/echo.min.js"></script>
<script>
import Echo from 'laravel-echo'
window.io = require('socket.io-client');
if (typeof io !== 'undefined') {
window.Echo = new Echo({
broadcaster: 'socket.io',
host: 'http://www.test2.com:6001',
});
}
window.Echo.private(`orderStatus-1`) // 私有频道
.listen('.App\\Events\\OrderShipped', (e) => {
console.log(e);
});
But it's not working.
just include these codes in your app.blade.php
<script src="https://cdn.jsdelivr.net/npm/socket.io-client#2.1.1/dist/socket.io.js"></script>
<script src="https://github.com/glitterlip/echoexample/blob/master/public/js/echocompiled.js"></script>