Have issues with socket io on backend connecting with my quasar app. Code 403(Forbidden) error with Socket io

user_7602390 0
Viewed 629

I have a Quasar app that I developed and was working fine. I was doing an update and somehow going from dev mode to production messed up my web socket connection again. I'm using pm2 on my ubuntu server to fire up the app via an express server which connects to my database.

Server Code Snippets:

const Express = require('express');
const path = require('path');
var cors = require('cors')
var app = Express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var mysql = require('mysql');
var CryptoJS = require('crypto-js')
var Report = require('fluentreports')

app.use(Express.static(path.join(__dirname, 'dist/spa'), {index: 'index.html'}))

io.set('origins', 'http://localhost:3000')

let connectedusers = []
let allusers = []
let index = 0

app.use(Express.json())

app.use(cors());

io.on('connection', function (socket) {
  console.log('a user connected');http.listen(3000, function() {

http.listen(3000, function() {
  console.log('Listening on ' + 3000);
});

Quasar boot socket.io file:

import Ioclient from 'socket.io-client'

export default ({ Vue }) => {
  Vue.prototype.$Socket = new Ioclient("http://192.168.2.193:3000"/*"192.168.2.193"*//*, {
    reconnection: true,
    reconnectionDelay: 1000,
    reconnectionDelayMax : 5000,
    reconnectionAttempts: Infinity
  }*/)
}

quasar.conf.js devServer Snippet:

devServer: {
      open: true,
      port: 3000,
      proxy: {
        // proxy all requests starting with /api to jsonplaceholder
        '/api': {
          //target: 'https://bahrepairsystem.herokuapp.com:' + process.env.PORT,
          target: 'http://localhost:3000',
          //target: 'localhost:' + process.env.PORT,
          //changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          },
          //secure: false
        }
      }
    },

My system is down right now so I really need to get this solved or else the company is going to be mad

quasar socket.io express node.js javascript
1 Answers

Got it working now.

In the server I changed the io.origins to ":" as stated in some stackoverflow questions I revisited.

Code Snippet:

io.set('origins', '*:*')

Also on the socket.js boot file in my quasar files I changed the localhost to the ip address of the server where the web socket is initiating the connection on as well as the port number. Example:

new Ioclient("http://*your server ip*:3000")

And then on the quasar.conf.js file I changed the devServer to the following code. I had to change the devServer to work on port 8080 cause it needs to run on a different port than the nodejs server from what I read.

Code snippet:

devServer: {
      open: true,
      port: 8080,
      proxy: {
        // proxy all requests starting with /api to jsonplaceholder
        '/api': {
          //target: 'https://bahrepairsystem.herokuapp.com:' + process.env.PORT,
          target: 'http://192.168.2.193:8080',
          //target: 'localhost:' + process.env.PORT,
          //changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          },
          //secure: false
        }
      }
    },
user_76023900
Related