[Vuejs]-Connecting an open client socket to rails endpoint

So, after a lot of trial and error, i managed to answer this with a different approach.

as far as I can tell, actually listening to the rails endpoint without something like ActionCable seems impossible, so I booted up and express server to run in the background and ingest incoming webhooks.

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())

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

// Tell our app to listen on port 3000
const server = app.listen(8080, function (err) {
    if (err) {
        throw err
    }

    console.log('Server started on port 8080')
})

const io = require('socket.io')(server);
app.set('io', io)

// Route that receives a POST request to /webhook
app.post('/webhook', function (req, res, next) {
    const io = req.app.get('io');

    console.log(req.body)

    io.sockets.emit('orderUpdate', req.body)
    
    //res.send(req.body)
    res.sendStatus( 200 );

    next();
})

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

With that in place, I pointed my webhook to localhost through ngrok, and then added logic in Vue through https://www.npmjs.com/package/vue-socket.io-extended

import { io } from "socket.io-client";

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

import socketStore from '../stores/sockets.js';

const socket = io("http://localhost:8080", {
    transports: [ "websocket", "polling"],
});

export default function loadOrdersApp(el, pinia) {
    const app = createApp(SquareOrders);

    app.use(pinia)
       //.use(socketStore)
       .use(VueSocketIOExt, socket)
       .mount(el);
}

To then listen for incoming socket emits on the socket.io channel.
With those both in place, i was able to ingest those socket emissions in my frontend app

export default {
    name: "SquareOrders",
    components: {
        Filters,
        GlobalLoader,
        OrdersList,
        FilterGroup,
        Filter,
        OrderActions
    },
    // LISTENING FOR THE SOCKETS IN VUE COMPONENT
    sockets: {
        connect() {
            console.log('socket connected in vue')
        },
        orderUpdate(val) {
            console.log(val)
            debugger;
            
            console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
        }
    },
    mounted() {
        const os = orderStore();
        os.getOrders();
        os.getSourcesList();
        os.getSandboxOrders();

        console.log(this.$socket)

        this.$socket.client.io.on('orderUpdate', (payload) => {
            console.log(payload)
        })

        setInterval(function () {
            os.getOrders();
        }, 60000);
    },
    computed: {
        ...mapState(orderStore, {
            orders: store => store.orders,
            initalLoad: store => store.flags.loaded,
            filterDefs: store => store.filters.definitions,
            sandbox: store => store.sandbox
        })
    },
};