问题：

插座io在带有redis和Laravel echo服务器的网络浏览器chrome中不显示任何内容

秦琦

2023-03-14

我配置了Laravel Echo、Laravel Echo服务器、Redis、Socket。io但是，经过三周的尝试和阅读在堆栈溢出和我发现的文档上发布的每个问题后，我无法在浏览器中运行，chrome没有显示任何内容，尽管Redis和Laravel echo server没有显示所有内容都正常。要帮忙吗？

请参阅我的上次配置：

/路由/网络。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');
});

/资源/视图/消息。刀身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',
});

/参考资料/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>

/配置/应用程序。php

'providers' => [
    App\Providers\BroadcastServiceProvider::class,

'aliases' => [
    'Redis' => Illuminate\Support\Facades\Redis::class,

/配置/广播。php

  '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'),
                'host' => env('REDIS_HOST', '127.0.0.1'),
                'password' => env('REDIS_PASSWORD', null),
                'port' => env('REDIS_PORT', 6379),
                'database' => env('REDIS_CACHE_DB', 1),
            ],
        ],

...环境

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

/路线/频道。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**

包裹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\",
        \"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
    }"

允许听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

拉威尔回声服务器。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的版本2时。Io和套接字。io客户端，出现了一个更奇怪的错误：TypeError:cb不是一个函数，我还在通道名称中加了一个点，它没有解决任何问题。请帮帮我

**看这张照片：@Maartenverman**chrome

阎修明

2023-03-14

我不知道这是一个错误还是Laravel echo和Socket之间的不兼容。但是当我把插座降级的时候。3.0版的io客户端。3至2.3。一切都很顺利。我以前尝试过这个，但是它给出了另一个错误，我相信这是带有套接字的版本。io，套接字之间的不兼容。io和套接字。io客户端。无论如何，我没有深入研究这个问题，但值得一个月的研究。谢谢大家的帮助！

这很奇怪，但现在它工作得很好。

这里的解决方案--

这里呢--

感谢Maarten Veerman和Mihai以及你们所有人！

插座io在带有redis和Laravel echo服务器的网络浏览器chrome中不显示任何内容

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档