如何解决Socket.io 在带有 redis 和 Laravel-echo-server 的 Web 浏览器 chrome 中没有显示任何内容
我配置了 Laravel Echo、Laravel-echo-server、Redis、Socket.io 但是，经过三周的尝试和阅读堆栈上发布的每个问题溢出和我找到的文档后，我无法让它在浏览器中工作，chrome 不显示任何内容，尽管不是 Redis 和 Laravel-echo-server 一切正常。有什么帮助吗？
查看我上次的配置：
/routes/Web.PHP
Auth::routes();
Route::get('/',function() {
return view('welcome');
});
Route::get('/welcome',function() {
return view('welcome');
});
Route::post('/messages',function () {
$data = request()->all();
$message = \App\Message::create($data);
broadcast(new \App\Events\SendMessage($message));
return redirect('/messages');
});
Route::get('/messages',function () {
$data = request()->all();
\App\Message::create($data);
return view('message');
});
/resources/views/Messages.blade.PHP
@extends('layouts.app')
@section('content')
<form action="" method="post" class="container">
@csrf
<input type='hidden' value={csrftoken} id='js-csrf' />
<input type="text" name="title" class="form-control" placeholder="Title">
<textarea type="text" name="body" class="form-control" placeholder="Message...">
</textarea>
<input type="submit" value="Send" class="btn btn-primary">
</form>
@endsection
/resources/js/App.js
require('./bootstrap');
window.Vue = require('vue').default;
Vue.component('example-component',require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',});
/resources/js/bootstrap.js
window._ = require('lodash');
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
import Echo from 'laravel-echo';
window.io = require('socket.io-client');
window.Echo = new Echo({
broadcaster: 'socket.io',host: window.location.hostname + ':6001'
})
/resources/js/components/ExampleComponent.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Messagens</div>
<div class="card-body">
<div class="alert alert-info" v-if="messages.length <= 0"></div>
<p v-for="(message,index) in messages" :key="index">
<strong> {{message.title}}</strong> <br />
{{message.body}} <br />
<small> {{ message.created_at }} </small>
</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
messages: []
}
},mounted() {
window.Echo.channel('message-received')
.listen('.message',(e) => {
this.messages.push(e);
}
);
}
}
</script>
'providers' => [
App\Providers\broadcastServiceProvider::class,'aliases' => [
'Redis' => Illuminate\Support\Facades\Redis::class, 'redis' => [
'driver' => 'redis','client' => env('REdis_CLIENT','predis'),'options' => [
'cluster' => env('REdis_CLUSTER','redis'),'prefix' => env('REdis_PREFIX',''),],'default' => [
'url' => env('REdis_URL'),'host' => env('REdis_HOST','127.0.0.1'),'password' => env('REdis_PASSWORD',null),'port' => env('REdis_PORT',6379),'database' => env('REdis_DB',0),'cache' => [
'url' => env('REdis_URL'),'database' => env('REdis_CACHE_DB',1),.ENV
LaraVEL_ECHO_PORT=6001
QUEUE_CONNECTION=sync
QUEUE_DRIVER=redis
broADCAST_DRIVER=redis
CACHE_DRIVER=file
SESSION_DRIVER=file
SESSION_LIFETIME=120
REdis_HOST=127.0.0.1
REdis_PASSWORD=null
REdis_PORT=6379
ECHO_HOST=192.241.159.78
ECHO_PORT=6001
ECHO_SCHEME=http
/routes/channels.PHP
broadcast::channel('message-received',function ($user) {
return $user;
});
/App/Events/SendMessage.PHP
class SendMessage implements Shouldbroadcast {
use dispatchable,InteractsWithSockets,SerializesModels;
private $message;
public function __construct(Message $message) {
$this->message = $message;
}
public function broadcastOn() {
return new Channel('message-received');
}
public function broadcastWith() {
var_dump($this->message->toArray());
return $this->message->toArray();
}
public function broadcastAs() {
return 'message';
}
}
依赖关系
PHP -v
PHP 7.3.26-1+ubuntu18.04.1+deb.sury.org+1 (cli) (built: Jan 13 2021 08:00:44) ( NTS )
copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.26,copyright (c) 1998-2018 Zend Technologies
with Zend OPcache v7.3.26-1+ubuntu18.04.1+deb.sury.org+1,copyright (c) 1999-2018,by Zend Technologies
Laravel Framework: 8.24.0
laravel-echo-server: 1.6.2
redis-cli: 4.0.9
laravel-echo: 1.10.0
socket.io: 3.1.0
socket.io-client: 3.1.0 fix with: 2.3.0
vue-axios: 3.2.4"
vuex: 4.0.0-rc.2**
Package.json
{
"private": true,"scripts": {
"dev": "npm run development","development": "mix","watch": "mix watch","watch-poll": "mix watch -- --watch-options-poll=1000","hot": "mix watch --hot","prod": "npm run production","production": "mix --production"
},"devDependencies": {
"@vue/compiler-sfc": "^3.0.5","axios": "^0.21.1","bootstrap": "^4.0.0","jquery": "^3.2","laravel-mix": "^6.0.11","lodash": "^4.17.19","popper.js": "^1.12","postcss": "^8.1.14","resolve-url-loader": "^2.3.1","sass": "^1.20.1","sass-loader": "^8.0.0","vue": "^2.6.12","vue-loader": "^15.9.5","vue-template-compiler": "^2.6.10"
},"dependencies": {
"karma": "^0.13.19","laravel-echo": "^1.10.0","socket.io": "^3.1.0","socket.io-client": "^3.1.0",fix with 2.3.0
"vue-axios": "^3.2.4","vuex": "^4.0.0-rc.2"
},PHP artisan queue:work
** 安装 Redis **
sudo apt install PHP-pear
sudo apt install PHP-dev
sudo pecl install redis
extension = redis.io
sudo service apache2 restart
** Redis-cli 监视器 **
1612460665.656384 [0 192.241.159.78:33820] "SELECT" "0"
1612460665.656635 [0 192.241.159.78:33820] "EVAL" "for i = 2,#ARGV do\n redis.call('publish',ARGV[i],ARGV[1])\nend" "0"
"{
\"event\":\"message\",\"data\":
{
\"id\":560,\"title\":\"Message title\",\"body\":\"Message Content,here are all the details of the message that does not appear in the browser at all.\",\"content\":null,\"created_at\":\"2021-02-04T17:44:25.000000Z\",\"updated_at\":\"2021-02-04T17:44:25.000000Z\",\"socket\":null
},\"socket\":null
}"
"message-received"
1612460665.656691 [0 lua] "publish" "message-received"
"{
\"event\":\"message\",\"socket\":null
}"
允许收听 6001
为了让 Laravel 和 Redis 完美运行，我发布了 6001 端口，但在生产中你必须小心。
sudo ufw allow 6001
L A R A V E L E C H O S E R V E R 版本 1.6.2
⚠ Starting server in DEV mode...
✔ Running at localhost on port 6001
✔ Channels are ready.
✔ Listening for http events...
✔ Listening for redis events...
Server ready!
Channel: message-received
Event: message
Channel: message-received
Event: message
Laravel-echo-server.json
{
"authHost": "http://192.241.159.78","authEndpoint": "/broadcasting/auth","clients": [
{
"appId": "***","key": "***"
}
],"database": "redis","databaseConfig": {
"redis": {
"port": "6379","host": "localhost"
},"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": true,"allowOrigin": "*","allowMethods": "GET,POST","allowHeaders": "Origin,Content-Type,X-Auth-Token,X-Requested-With,Accept,Authorization,X-CSRF-TOKEN,X-Socket-Id"
}
}
我执行这个队列
PHP artisan queue:work
浏览器中没有显示任何内容。当我切换到 Socket.Io 和 Socket.io-client 的版本 2 时，出现了一个更奇怪的错误：TypeError: cb is not a function 我还在频道名称中加了一个点，但它没有解决任何问题。 请帮帮我
**看这张照片：@MaartenVeerman ** chrome inspect
解决方法
我不知道这是 Laravel-echo 和 Socket.io 之间的错误或不兼容，但是当我将 Socket.io 客户端从 3.0.3 版降级到 2.3.0 版时，一切正常完美。我以前试过这个，但是它又出现了另一个错误，我相信它是带有 socket.io 的版本，Socket.io 和 Socket.io-client 之间不兼容。无论如何，我没有深入研究这个，但值得一个月的研究。谢谢大家的帮助！
这很奇怪，但现在它工作得很好。
这里的解决方案 --> [https://github.com/tlaverdure/laravel-echo-server/issues/550]
这里 --> [https://stackoverflow.com/questions/65026362/laravel-echo-listener-not-working-on-frontend]
感谢 Maarten Veerman 和 Mihai 以及你们所有人！！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
