I am tryint to create a chat app using vue cli project with laravel-echo. But getting error as 419 unknown status /broadcasting/auth.
This is my main.js filr
import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import i18n from "./i18n";
import VueConfirmDialog from "vue-confirm-dialog";
import VueChatScroll from "vue-chat-scroll";
import Echo from "laravel-echo";
Vue.use(VueConfirmDialog);
Vue.config.productionTip = false;
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount("#app");
window.Pusher = require("pusher-js");
window.Echo = new Echo({
broadcaster: "pusher",
// key: process.env.MIX_PUSHER_APP_KEY,
host: "http://localhost:8000",
authEndpoint: "http://localhost:8000/broadcasting/auth",
key: "key",
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
cluster: "ap2",
forceTLS: true
});
and this is how i am trying to listen to events
window.Echo.channel("Chat").listen("SessionEvent", e => {
let friend = this.friends.find(friend => friend.id === e.session_by);
friend.session = e.session;
this.listenForEverySession(friend);
});
Can anyone tell me whats the problem? This is front end and laravel project is backend
This is error I am getting
in your channels.php add guards
Broadcast::channel('Chat', function ($user) {
return true;
}, ['guards' => 'web']); // add this guards
and remove authEndpoint it should auto detect
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
})
Im trying to create routing using vue-router , but I'm getting this error in vscode console:
HarmonyLinkingError: export 'onUnmounted' (imported as 'onUnmounted')
was not found in 'vue' (possible exports: default)" -t "Laravel Mix"
This is my app.js file:
import Vue from "vue";
import router from "./Router";
require("./bootstrap");
Vue.use(router);
Vue.component("home-component", require("./components/HomeComponent.vue"));
Vue.component("admin-component", require("./components/AdminComponent.vue"));
const home = new Vue({
el: "#home"
});
const admin = new Vue({
el: "#admin"
});
Whenever I open it in the browser the page is blank, and the browser console gives me this error:
Uncaught TypeError: (0 ,
vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a function
at Module../node_modules/vue-router/dist/vue-router.esm-bundler.js
And this is my router file, located in Router/indexjs :
import { createWebHistory, createRouter } from "vue-router";
import Dashboard from "../components/Admin/DashboardComponent.vue";
import Professeur from "../components/Admin/ProfesseurCompenet..vue";
const routes = [
{
path: "/admin",
name: "Dashboard",
component: Dashboard
},
{
path: "/admin/prof",
name: "Professeur",
component: Professeur
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
Just change few things on the router file as below
instead of importing: import { createWebHistory, createRouter } from "vue-router";
// just do this:
import Vue from 'vue'; //import again even though you already imported it
import Router from 'vue-router'; // and this is where difference comes in
import Dashboard from "../components/Admin/DashboardComponent.vue";
import Professeur from "../components/Admin/ProfesseurCompenet..vue";
Vue.use(Router);
const routes = [
{
path: "/admin",
name: "Dashboard",
component: Dashboard
},
{
path: "/admin/prof",
name: "Professeur",
component: Professeur
}
];
//then you're router to export as follows
const router = new Router({routes : routes});
export default router
I am using Channel broadcasting with laravel and vue.js in order to have all user online and offline.
I have installed the package correctly and configured pusher params according to laravel documentation.
In my vue component I wrote following to see who is online on the related channel:
created() {
this.getFriends();
window.Echo.join('Room')
.here(users => {
});
}
But I get following error:
Error in created hook: "TypeError: window.Echo is undefined"
"
Boostrap.js
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
//key: process.env.MIX_PUSHER_APP_KEY,
key:'****************',
//cluster: process.env.MIX_PUSHER_APP_CLUSTER,
cluster: 'eu',
encrypted: true
});
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);
});