2
我不知道什麼是錯我的代碼推杆未定義！ Laravel 5.4 Laravel回聲
這裏是我的app.js
/**
* First we will load all of this project's JavaScript dependencies which
* include Vue and Vue Resource. This gives a great starting point for
* 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('chat-message', require('./components/ChatMessage.vue'));
Vue.component('chat-log', require('./components/ChatLog.vue'));
Vue.component('chat-composer', require('./components/ChatComposer.vue'));
let idIsExist = document.getElementById('chat-init');
if(idIsExist !== null) {
const app = new Vue({
el: '#chat-init',
http: {
emulateJSON: true,
emulateHTTP: true
},
data: {
messages: []
},
methods: {
addMessage(message) {
axios.post('page-send-message', message).then(response => {
if(response.status !== 200) {
message = {
messages: response.statusText,
user: {
name: response.status
}
}
}
return this.messages.push(message);
});
}
},
created() {
axios.get('page-messages').then(response => {
this.messages = response.data;
});
Echo.join('page-chat').here().joining().leaving().listen('MessagePosted', e => {
console.log(e);
});
}
});
}
Here's my `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.
*/
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
/**
* Vue is a modern JavaScript library for building interactive web interfaces
* using reactive data binding and reusable components. Vue's API is clean
* and simple, leaving you to focus on building your next great project.
*/
window.Vue = require('vue');
require('vue-resource');
/**
* We'll register a HTTP interceptor to attach the "CSRF" header to each of
* the outgoing requests issued by this application. The CSRF middleware
* included with Laravel will automatically verify the header's value.
*/
// Laravel Global Variable to use Laravel.csrfToken
let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
Vue.http.interceptors.push((request, next) => {
request.headers.set('X-CSRF-TOKEN', csrfToken);
next();
});
/**
* 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-CSRF-TOKEN': csrfToken,
'X-Requested-With': 'XMLHttpRequest'
};
這裏是我的bootstrap.js
/**
* 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.Echo = new Echo({
broadcaster: 'pusher',
key: '3c45e6945c69f616f4a3'
});
這裏是我的事件MessagePosted.php
<?php
namespace App\Events;
use App\User;
use App\Message;
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 MessagePosted implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
/**
*
* @var Message
*
*/
public $message;
/**
*
* @var User
*
*/
public $user;
/**
* Create a new event instance.
*
* @return void
*/
public function __construct(Message $message, User $user)
{
$this->message = $message;
$this->user = $user;
}
/**
* Get the channels the event should broadcast on.
*
* @return Channel|array
*/
public function broadcastOn()
{
return new PresenceChannel('page-chat');
}
}
之後建立我在控制檯
Uncaught ReferenceError: Pusher is not defined
at PusherConnector.connect (eval at <anonymous> (app.js:345), <anonymous>:546:31)
at PusherConnector.Connector (eval at <anonymous> (app.js:345), <anonymous>:192:14)
at new PusherConnector (eval at <anonymous> (app.js:345), <anonymous>:537:135)
at new Echo (eval at <anonymous> (app.js:345), <anonymous>:689:30)
at eval (eval at <anonymous> (app.js:145), <anonymous>:59:15)
at Object.<anonymous> (app.js:145)
at __webpack_require__ (app.js:20)
at eval (eval at <anonymous> (app.js:418), <anonymous>:8:1)
at Object.<anonymous> (app.js:418)
at __webpack_require__ (app.js:20)
得到這個錯誤我已經安裝Independencies
composer require pusher/pusher-php-server
npm install --save laravel-echo pusher-js
你能幫如何解決我的問題。問題是Pusher沒有定義，我不知道爲什麼。