So, i’ve currently got a Vue app with socket.io-client (exended) on the frontend.

import { createApp } from 'vue';
import { io } from "socket.io-client";

import VueSocketIOExt from 'vue-socket.io-extended';
import OysterApp from '../views/OysterApp.vue';

export default function loadApp(el, pinia) {
    const app = createApp(OysterApp);

    if(pinia){
        app.use(pinia);
    }
    
    // lets try and add the socket if it exists
    try{
        const socket = io("http://localhost:8080", {
            reconnection: true,
            rejectUnauthorized: false,
            transports: [ "websocket", "polling"],
        });

        socket.on("connect_error", (err) => {
            // the reason of the error, for example "xhr poll error"
            console.log(err);
            
            // some additional description, for example the status code of the initial HTTP response
            console.log(err.description);
            
            // some additional context, for example the XMLHttpRequest object
            console.log(err.context);
        });

        socket.on('connect', function(socket) { 
            console.log('Connected!');
        });

        console.log(socket);
        app.use(VueSocketIOExt, socket);
    } catch(e){
        console.log(e)
    }

    app.mount(el);
}

And a site served by normal LAMP stack. This site runs alongside an express server, and that server handles incoming webhook data, which is working properly on my live site.

'use strict'

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors');

// Create a new instance of express
const app = express()

// Tell express to use the body-parser middleware for JSON
app.use(bodyParser.json())

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Headers", "Content-Type");
    res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
    next();
});

// ALLOW OUR CLIENT SIDE TO ACCESS BACKEND SERVER via CORS
app.use(cors({
    origin: 'http://localhost:8080'
}));

// Tell our app to listen on port 3000
const server = app.listen(8080, function (err) {
    if (err) {
        throw err;
    } else {
        console.log('Server started on port 8080')
    }   
})

// Lets setup the sockets for the server
try{
    const io = require('socket.io')(server, { cors: {}});
    app.set('io', io); 

    io.on("connection_error", (err) => {
        console.log(err.req);      // the request object
        console.log(err.code);     // the error code, for example 1
        console.log(err.message);  // the error message, for example "Session ID unknown"
        console.log(err.context);  // some additional error context
    });
    
    // HANDLE order_update WEBHOOK
    app.post('/webhook', function (req, res, next) {
        const io = req.app.get('io');

        console.log('hit endpoint', req.body)
        // EMIT EVENT TO SOCKET.IO CHANNEL FOR FRONTEND TO LISTEN FOR
        io.sockets.emit('catalogUpdated', req.body)

        res.sendStatus( 200 );
        next();
    })
    

    io.on('connection', function(socket){   
        console.log('A connection is made', socket); 
    });

    ^^^^ this never gets hit when the browser is refreshed, and I think therein lies the problem.

    console.log(io);
} catch(err){
    console.log(err);
}

My problem is that though the backend socket.io is receiving the webhook data, the frontend socket can properly connect through IO and pipe the emitted events from the backend to the frontend via vue. The two socket connections dont seem to be communicating properly.

Now, this all works in localhost just fine, so I know theres just something weird about on my live server.

I’ve been reading about ProxyPass in apache, and that WAS needed to get the server on the backend to properly respond to the webhook post attempts.

At the moment, my virtual host file has this in it.

RewriteEngine on
RewriteCond %{HTTP:Upgrade} websocket [NC]
RewriteCond %{HTTP:Connection} upgrade [NC]
RewriteRule ^/?(.*) "ws://localhost:8080/$1" [P,L] <--  have no idea if this rewrite chunk is needed or not

ProxyPreserveHost On
ProxyTimeout 60
ProxyPass /webhook http://localhost:8080/webhook <-- def works
ProxyPassReverse /webhook http://localhost:8080/webhook <-- no idea if I need this or if it's correct

So, i’m missing some small connecting piece to be able to have that frontend socket properly connect and respond, and i’m hoping y’all brainiacs will know!