【发布时间】：2020-06-12 07:43:20
【问题描述】：
我正在学习https://medium.com/@dennissmink/laravel-echo-server-how-to-24d5778ece8b 中给出的教程。
我安装了laravel-echo-server、redis、socket.io、laravel-echo。
这是laravel-echo-server init的配置
{
"authHost": "http://localhost",
"authEndpoint": "/broadcasting/auth",
"clients": [],
"database": "redis",
"databaseConfig": {
"redis": {},
"sqlite": {
"databasePath": "/database/laravel-echo-server.sqlite"
}
},
"devMode": true,
"host": null,
"port": "6001",
"protocol": "http",
"socketio": {},
"secureOptions": 67108864,
"sslCertPath": "",
"sslKeyPath": "",
"sslCertChainPath": "",
"sslPassphrase": "",
"subscribers": {
"http": true,
"redis": true
},
"apiOriginAllow": {
"allowCors": false,
"allowOrigin": "",
"allowMethods": "",
"allowHeaders": ""
}
}
这个js代码在app.blade.php的底部，包含在所有页面中
<script type="module">
import Echo from 'laravel-echo'
window.io = require('socket.io-client');window.Echo = new Echo({
broadcaster: 'socket.io',
host: window.location.hostname + ':6001'
});
window.Echo.channel('test-event')
.listen('ExampleEvent', (e) => {
console.log(e);
});
</script>
我创建了一个事件php artisan make:event ExampleEvent如下
namespace App\Events;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
class ExampleEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
/**
* Create a new event instance.
*
* @return void
*/
public function __construct()
{
//
}
/**
* Get the channels the event should broadcast on.
*
* @return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new Channel('test-event');
}
public function broadcastWith()
{
return [
'data' => 'Hi bro!'
];
}
}
接下来的路线
Route::get('test-broadcast', function(){
broadcast(new \App\Events\ExampleEvent);
});
我还启动了一个队列监听器
php artisan queue:listen --tries=1
当我访问页面 test-broadcast 时，我在终端中看到了这个
但是浏览器的控制台什么也没有显示，而console.log(e); 必须返回一些东西。我也这样做了
window.Echo.channel('test-event')
.listen('ExampleEvent', (e) => {
alert('hi')
console.log(e);
});
但没有任何警报。听着好像有问题。
提前致谢。
更新
访问login 或任何包含app.blade.php 的页面时，我从浏览器控制台收到此错误
更新
我更新了脚本代码如下
<script src="http://{{ Request::getHost() }}:6001/socket.io/socket.io.js"></script>
<script src="{{ asset('/js/app.js') }}"></script>
<script type="module">
import Echo from 'laravel-echo'
window.Echo = new Echo({
broadcaster: 'socket.io',
host: window.location.hostname + ':6001'
});
window.Echo.channel('test-event')
.listen('.ExampleEvent', (e) => {
console.log(e);
});
</script>
控制台还是报错
TypeError：解析模块说明符时出错：laravel-echo
更新
我跑
npm run development -- --watch
这就是结果
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js “--看”
'cross-env' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ 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"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Mamad\AppData\Roaming\npm-cache\_logs\2020-03-05T14_59_30_604Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ watch: `npm run development -- --watch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Mamad\AppData\Roaming\npm-cache\_logs\2020-03-05T14_59_30_697Z-debug.log
【问题讨论】：
-
您是否使用“npm run build”构建了您的应用程序？此外，您的错误查找会产生 this
-
@DanielProtopopov 声明“npm run build”不在那个教程中，所以我没有这样做。
-
不是，但它（有点）在 cmets 部分。作者经常通过前几个来检查有价值的信息以修改文章；）。里面还有一些其他有用的东西。
-
@DanielProtopopov 我添加了对问题的更新
-
我相信你没有抓住重点：刀片文件中的 Javascript/Typescript 不会通过 NPM 被编译或视为 Javascript 编译的一部分。它最终应该在被编译的 app.js 中，并通过该编译处理您的导入语句。我将尝试在空白的 Laravel 上进行完整安装，并通过演练发布答案。
标签： php laravel sockets laravel-echo