實時通知不起作用laravel 5.4和vue2
[英]real-time notification not work laravel 5.4 and vue2
問題描述
我試圖在Laravel 5.4中發出廣播通知，而VueJS 2進行了大量搜索，但沒有解決方案。
僅在刷新頁面時收到通知
我需要實時。
navbar.blade.php
<notification :userid="{{auth()->id()}}" :unreads="{{auth()->user()->unreadNotifications}}"></notification>
Notification.vue
<template> <li class="dropdown" @click="markasread"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> <span class="glyphicon glyphicon-globe"></span> Notifications <span class="badge alert-danger">{{unreadNotifications.length}}</span> </a> <ul class="dropdown-menu" role="menu"> <li> <notification-item :key="unread.id" v-for="unread in unreadNotifications" :unread="unread"></notification-item> </li> </ul> </li> </template> <script> import NotificationItem from './NotificationItem.vue'; export default { props: ['unreads', 'userid'], components: {NotificationItem}, data(){ return { unreadNotifications: this.unreads } }, methods: { markNotificationAsRead() { if (this.unreadNotifications.length) { axios.get('/markAsRead'); } } }, mounted() { console.log('Component mounted.'); Echo.private('App.User.' + this.userid) .notification((notification) => { console.log(notification); let newUnreadNotifications = {data: {thread: notification.thread, user: notification.user}}; this.unreadNotifications.push(newUnreadNotifications); }); } } </script>
NotificationItem.vue
<template> <div class="wrap"> <a :href="threadUrl"> {{ unread.data.user.name }} commented on {{ unread.data.thread.subject }} </a> </div> </template> <script> export default { props:['unread'], data(){ return { threadUrl:"" } }, mounted(){ this.threadUrl="thread/"+ this.unread.data.thread.id } } </script>
頭
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Webdev forum</title> <link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.min.css"> <link rel="stylesheet" href="{{asset('css/main.css')}}"> <!-- Scripts --> <script> window.Laravel = {!! json_encode([ 'csrfToken' => csrf_token(), ]) !!}; </script> </head>
鍍鉻控制台
broadcasting.php
<?php return [ /* |-------------------------------------------------------------------------- | Default Broadcaster |-------------------------------------------------------------------------- | | This option controls the default broadcaster that will be used by the | framework when an event needs to be broadcast. You may set this to | any of the connections defined in the "connections" array below. | | Supported: "pusher", "redis", "log", "null" | */ 'default' => "pusher", /* |-------------------------------------------------------------------------- | Broadcast Connections |-------------------------------------------------------------------------- | | Here you may define all of the broadcast connections that will be used | to broadcast events to other systems or over websockets. Samples of | each available type of connection are provided inside this array. | */ 'connections' => [ 'pusher' => [ 'driver' => 'pusher', 'key' => env('PUSHER_APP_KEY'), 'secret' => env('PUSHER_APP_SECRET'), 'app_id' => env('PUSHER_APP_ID'), 'options' => [ 'cluster' => 'eu', 'encrypted' => true ], ], 'redis' => [ 'driver' => 'redis', 'connection' => 'default', ], 'log' => [ 'driver' => 'log', ], 'null' => [ 'driver' => 'null', ], ], ];
app.js
/** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */ require('./bootstrap'); /** * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */ Vue.component('example', require('./components/Example.vue')); Vue.component('notification', require('./components/Notification.vue')); const app = new Vue({ el: '#app' });
bootstrap.js
window._ = require('lodash'); /** * We'll load jQuery and the Bootstrap jQuery plugin which provides support * for JavaScript based Bootstrap features such as modals and tabs. This * code may be modified to fit the specific needs of your application. */ try { window.$ = window.jQuery = require('jquery'); require('bootstrap-sass'); } catch (e) {} /** * We'll load the axios HTTP library which allows us to easily issue requests * to our Laravel back-end. This library automatically handles sending the * CSRF token as a header based on the value of the "XSRF" token cookie. */ window.axios = require('axios'); window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; /** * Next we will register the CSRF Token as a common header with Axios so that * all outgoing HTTP requests automatically have it attached. This is just * a simple convenience so we don't have to attach every token manually. */ let token = document.head.querySelector('meta[name="csrf-token"]'); if (token) { window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content; } else { console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); } /** * Echo exposes an expressive API for subscribing to channels and listening * for events that are broadcast by Laravel. Echo and event broadcasting * allows your team to easily build robust real-time web applications. */ import Echo from 'laravel-echo' window.Pusher = require('pusher-js'); window.Echo = new Echo({ authEndpoint : 'http://localhost/forum_web/public/broadcasting/auth', broadcaster: 'pusher', key: '9964dcd35bae49f32d6c', cluster: 'eu', encrypted: true, });
.ENV
APP_NAME=Laravel APP_NAME=Laravel APP_ENV=local APP_KEY=base64:1R+1MnCFSum8eSSG8NSYeGkEUzABY7W5+wfEqHYMyB0= APP_DEBUG=true APP_LOG_LEVEL=debug APP_URL=http://localhost DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=webforum DB_USERNAME=root DB_PASSWORD=root BROADCAST_DRIVER=pusher CACHE_DRIVER=file SESSION_DRIVER=file QUEUE_DRIVER=sync REDIS_HOST=127.0.0.1 REDIS_PASSWORD=null REDIS_PORT=6379 MAIL_DRIVER=smtp MAIL_HOST=smtp.mailtrap.io MAIL_PORT=2525 MAIL_USERNAME=null MAIL_PASSWORD=null MAIL_ENCRYPTION=null PUSHER_APP_ID="374057" PUSHER_APP_KEY="9964dcd35bae49f32d6c" PUSHER_APP_SECRET="907a71719f0fa029ddf9" NOCAPTCHA_SECRET=6LfJ3ykUAAAAAAemcVNjirpj1EgEJmRwa6hq321I NOCAPTCHA_SITEKEY=6LfJ3ykUAAAAAKAh8qP5WJ4L6c3uhubSs26b7s-G
1 個解決方案
解決方案1
2 已采納 2017-07-27 02:29:54
您應該在Notification.vue和第10行中為每個項目提供唯一的key屬性，並假設id是唯一的：
<notification-item v-for="unread in unreadNotifications" :key="unread.id" :unread="unread"></notification-item>
使用laravel作為后端API和AngularJS作為前端的實時通知
[英]Real-Time notification using laravel as back-end API and AngularJS as front-end
Vue JS 對分頁 Laravel 結果的實時客戶端搜索過濾器
[英]Vue JS real-time client search filter on paginated Laravel results
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.