Socket.io ERR_EMPTY_RESPONSE laravel mix

Question

I'm new to laravel mix, and i'm currently working in a project with laravel 7.30.9 and vue 2.6.14.

This project uses redis and socket.io. I've never used them before.

I've already installed redis in my machine (I'm using windows by the way). I've instaled laravel-echo and socket.io with npm dependencies with --save

npm install laravel-echo-server socket.io-client --save

First I run laravel-echo-server start, then I run php artisan queue:work and finally I run php artisan serve.

So I'm trying to run it locally but I keep getting the same error:

GET http://localhost:6001/socket.io/socket.io.js net::ERR_EMPTY_RESPONSE

This is the bootstrap.js error

Error: Socket.io client not found. Should be globally available or passed via options.client

This is my welcome.blade.php, the error apears before the console.log(window.location.hostname) line inside the second script



    
        
        
        
        Laravel

        
        

        
        
    
    
    
        

            
                
                    Laravel Echo Test Mao

This is my app-vue.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

import { EchoPrivate } from './bootstrap';
window.EchoPrivate = EchoPrivate;
window.Vue = require('vue');

import VueFormWizard from 'vue-form-wizard'
import 'vue-form-wizard/dist/vue-form-wizard.min.css'
Vue.use(VueFormWizard)

import CxltToastr from 'cxlt-vue2-toastr'
Vue.use(CxltToastr)
import 'cxlt-vue2-toastr/dist/css/cxlt-vue2-toastr.css';

import Vuesax from 'vuesax';
import 'vuesax/dist/vuesax.css';
import 'material-icons/iconfont/material-icons.css';
Vue.use(Vuesax);

import SmartTable from 'vuejs-smart-table'
Vue.use(SmartTable)

var VueScrollTo = require('vue-scrollto');
Vue.use(VueScrollTo)

import VueTheMask from 'vue-the-mask'
Vue.use(VueTheMask)


import money from 'v-money'
Vue.use(money, { precision: 3 })

import SkeletonCards from 'vue-ultimate-skeleton-cards'
Vue.use(SkeletonCards)

import CKEditor from '@ckeditor/ckeditor5-vue2';
Vue.use(CKEditor);

import VoerroTagsInput from '@voerro/vue-tagsinput';

Vue.component('tags-input', VoerroTagsInput);

import { formatValue, formatCurrency, fullFormatValue } from './trm';
Vue.filter('currency', formatCurrency);

import Gate from './components/permissions/Gate';
// Vue.prototype.$gate = new Gate(window.user);
Vue.prototype.$gate = new Gate(window.user);


window.formatValue = formatValue;
window.currency = formatCurrency;
window.fullFormatValue = fullFormatValue;


/*COMPONENTES EXTERNOS*/
Vue.component('input-form', require('./components/InputFormComponent.vue').default);
Vue.component('changued-password', require('./components/components/user/ChangedPassword.vue').default)
Vue.component('preview-doc', require('./components/components/previewdoc/PreviewDoc.vue').default)
Vue.component('custom-repetear', require('./components/components/vue-repeater/src/components/repeater.vue').default)
Vue.component('currency-display', require('./components/currency/CurrencyDisplay.vue').default)
Vue.component('currency-list', require('./components/currency/CurrencyList.vue').default)
Vue.component('filter-date', require('./components/components/filters/FilterDate.vue').default)

/*=============================================
COMPONENTES
=============================================*/
Vue.component('cards-statistcs-projects', require('./components/components/cardsStatiscsProjects/CardsStatistcsProjects.vue').default);
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('invoice-project', require('./components/backend/pages/project/components/invoice/InvoiceProject.vue').default);
Vue.component('type-invoice', require('./components/backend/pages/project/components/invoice/TypeInvoice.vue').default);
Vue.component('items-invoice', require('./components/backend/pages/project/components/invoice/components/ItemsInvoice.vue').default);
Vue.component('create-invoice-project', require('./components/backend/pages/project/components/invoice/components/CreateInvoice.vue').default);

/*=============================================
COMPONENTES GLOBALES
=============================================*/
Vue.component('show-project-component', require('./components/components/project/ShowProject.vue').default);
Vue.component('show-customer-component', require('./components/components/customer/ShowCustomer.vue').default);

// BEGIN: Profile
Vue.component('edit-profile', require('./components/backend/pages/profile/EditProfileUser.vue').default);
// END: Profile

/**
 * 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.
 */

import VueInternationalization from 'vue-i18n';
import Locale from './vue-i18n-locales.generated';
import Vue from "vue";


window.Vue.use(VueInternationalization);
const i18n = new VueInternationalization({
    locale: window.lang,
    messages: Locale
});
window.eventBus = new Vue();
const appVue = new Vue({
    el: '#app',
    i18n
});

And this is 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.
 */

try {
    // window.Popper = require('popper.js').default;
    // window.$ = window.jQuery = require('jquery');
    //
    // require('bootstrap');
} catch (e) { }

/**
 * 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-Requested-With'] = 'XMLHttpRequest';

/**
 * 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';

let echo = null;

try {
    echo = new Echo({
        broadcaster: 'socket.io',
        host: `${window.location.hostname}:${window.laravelEchoPort}`,
        // host: "creategicalatina.test:6001",
        transports: ['websocket']
    });

    let init = false;

    echo.connector.socket.on('connect', function () {
        if (init) {
            setTimeout(() => {
                Pace.stop();
            }, 500)
        } else {
            init = true;
        }
    });

    echo.connector.socket.on('disconnect', function () {
        console.log('disconnected');
    });

    echo.connector.socket.on('reconnecting', function (attemptNumber) {
        console.log('reconnecting', attemptNumber);
    });
} catch (error) {
    console.log('init echo: ', error);
}

window.Echo = echo;

const channels = {};

export const EchoPrivate = (channel_name, listen_name, callback) => {
    if (!echo) {
        return;
    }
    const key_channel = btoa(channel_name);
    if (!channels[key_channel]) {
        channels[key_channel] = {
            socket: null,
            listens: {}
        }
        try {
            channels[key_channel] = {
                socket: echo.private(channel_name),
                listens: {}
            }
        } catch (error) {
            console.log('channel: ', error);
        }
    }
    const channel = channels[key_channel];
    if (!channel.socket) {
        return;
    }

    const key_listen = btoa(listen_name);
    if (!channel.listens[key_listen]) {
        channel.listens[key_listen] = {
            callbacks: [],
            listen: function (e) {
                this.callbacks.forEach(c => c(e));
            }
        };

        try {
            channel.socket.listen(listen_name, (e) => {
                channel.listens[key_listen].listen(e);
            })
        } catch (error) {
            console.log('listing: ', error);
        }
    }

    channel.listens[key_listen].callbacks.push(callback);
}

Finally this is my .env file

APP_NAME="app"
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=https://localhost

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

LARAVEL_ECHO_PORT=6001

And my laravel-echo-server.json

{
    "authHost": "https://127.0.0.1:8000",
    "authEndpoint": "/broadcasting/auth",
    "clients": [],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": "127.0.0.1",
    "port": "6001",
    "protocol": "https",
    "socketio": {},
    "secureOptions": 67108864,
    "sslCertPath": "/Users/jimmy/.config/valet/Certificates/app.test.crt",
    "sslKeyPath": "/Users/jimmy/.config/valet/Certificates/app.test.key",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": false,
        "allowOrigin": "",
        "allowMethods": "",
        "allowHeaders": ""
    }
}

I really apreciate any kind of help :].

Socket.io ERR_EMPTY_RESPONSE laravel mix

0 Answers