How to use socket.io in Quasar (building an Electron app) ?



  • Hi everybody.
    Quasar Framework is something brand new to me, so I hope I’m able to question this in a manner that makes some sense.

    I’m building a desktop app, migrating from Nuxt to Quasar for two reasons: the in-house support that Quasar offers to build Electron apps, and some unnecessary complications - for my specific case - related to Nuxt (which is great, don’t get me wrong).

    My app is like a chat app for OSC messages, so, its a desktop app with web functionalities.

    In my Nuxt project I had a main.js in the root folder that looks much like this one: https://github.com/nuxt-community/electron-template/blob/master/template/main.js

    I’m aware I won’t need all the Electron part of this file in Quasar, but I’m interested in the server part:

    const http = require('http')
    const server = http.createServer(nuxt.render)
    // listen the server
    server.listen()
    const _NUXT_URL_ = `http://localhost:${server.address().port}`
    console.log(`Nuxt working on ${_NUXT_URL_}`)
    

    because then I would be able to bind socketIO to the server like this:

    const socketIO = require('socket.io')
    const io = socketIO(server)
    

    My double question is how could I get/set something like this within Quasar and where in Quasar’s folder structure the file with it should live?

    bests,
    Gil



  • HI there!
    I’m not sure if I understand your first question but in terms of where this should all live but I recommend looking into boot files

    You’d run:

    $ quasar new boot <file-name>
    

    and from there you can have your socket.io available in all your pages via:

    this.$socket
    

    so in terms of the file structure of quasar src/boot holds all your plugins

    N.B. this is for v1.0



  • Hi @mKomo
    Thank you for your answer. I was guessing boot files was the way to go.

    There are two flavours of socket.io: server and client (socket.io-client). The server part of it commonly can be found in a node.js file (usually called “main.js”, “server.js” and even “index.js”), together with Express or whichever js server is used, being ‘http’ the simplest option.

    Doing a quick research in order to better formulate my first question I just found that nuxt.render, used to create the http-server binded to socket.io is “a middleware for your node.js server.”. So, maybe the question is: how can I use Quasar as a middleware for my node.js server?

    BTW I’m using v1.0, so its all fine about the boot files.

    I hope I managed to make my question more clear.

    Thanks again

    Bests;
    Gil



  • @gil
    Glad to hear!
    Unfortunately I don’t think I can offer sound help for you.
    It might be worth asking what you’re trying to achieve?

    For instance if you are using socket.io to connect to a back-end service or run a socket.io server internally for use with-in your electron app?

    Regards,
    mko



  • Hi @mKomo
    Thank you for sticking with me.
    I’m using socket.io server internally to get and emit OSC messages to others on the web, like a chat, and to other eventual desktop app in the same machine the app would be installed.



  • @gil
    Ah I see (and correct me if I’m wrong)

    So you’re running an electron app that uses socket.io-server.

    And you’ll then be connecting to that local app from other apps and machines on the network

    Figure:

                    Main Electron App (server)
                     /           |            \
                   /             |              \
                 App            App.            App        
    

    I’m not sure what’s an efficient way to go about doing this, as I haven’t played around with electron before, but I’ll look into it further as this sounds pretty interesting

    Feel free to contact me if you come up with a solution and I’ll see what I manage to come up with



  • @mKomo

    That’s it. Actually all apps are clients and servers at the same time as they receive and send messages in real time.

    I’m making it with Electron because web-browsers don’t have the permissions to communicate with other apps in the way I need.

    In the meanwhile I tried to make a boot file with this (now trying vue-socket.io):

    import VueSocketIO from 'vue-socket.io'
    
    export default async ({ Vue }) => {
      Vue.use(new VueSocketIO({
        debug: true,
        connection: 'http://0.0.0.0:8080'
      }))
    }
    

    But hen I’m getting this errors:
    Cross-Origin Read Blocking (CORB) blocked cross-origin response <URL> with MIME type text/html. See <URL> for more details.
    I’m afraid this is not the way to go as I’m trying to do server things on the client side.

    Thank you one more time. If I find a way to solve this I’ll post it here.



  • @gil
    Sounds good, best of luck!