堆棧內存溢出
  簡體   English   中英

Socket.io 在帶有 redis 和 Laravel-echo-server 的 web 瀏覽器 chrome 中沒有顯示任何內容

[英]Socket.io shows nothing in web browser chrome with redis and Laravel-echo-server

 原文  2021-02-04 18:18:12  7   1    laravel/ socket.io/ laravel-echo

問題描述

我配置了 Laravel Echo、Laravel-echo-server、Redis、Socket.io，但是，經過三周的嘗試和閱讀我發現的 Ichrome 堆棧上發布的每個問題，我發現它的堆棧溢出和文檔無法正常工作，沒有顯示任何東西，雖然不是 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>

/config/App.php

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

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

/config/broadcasting.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),
            ],
        ],

.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\",
        \"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

LA R AVELE C 軟管 R VE ZE1E1D3D40067127D6ZEE0418 版。

⚠ 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 檢查

1 個解決方案

解決方案1
 0  2021-02-05 04:34:52

我不知道這是 Laravel-echo 和 Socket.io 之間的錯誤還是不兼容，但是當我將 Socket.io-client 從版本 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 以及你們所有人！！

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用Laravel Echo，laravel-echo-server和socket.io進行廣播無法正常工作 使用Laravel Echo，laravel-echo-server和socket.io進行廣播無法正常工作 Laravel Echo、Redis、Socket IO 和 Laravel-echo-server 停止工作並需要想法 如何使用 laravel-echo-server 通過 socket.io 從 React 到 Laravel 連接 websocket？ 宅基地上的Laravel-echo-server和socket.io收到TypeError：無法讀取屬性&#39;socketId&#39;和&#39;presenceChannel&#39; Laravel-echo-server 和 Socket.io 即使正在收聽頻道也不會觸發命令 Socket.io 未在 laravel 回顯服務器中監聽 無法使用 Laravel 回顯服務器、redis 和 Z3D7A7766E8CDEB1C1BAE2A4A7 驗證 laravel 專用通道 laravel echo 服務器與 socket.io 和 redis CORS Laravel Echo 服務器上缺少允許來源，帶有 Socket.io 和 ZE111446745A1825B862F8727AE3
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM