How to connect socket from VueJs with Sails js built in socket with sails.io.js in vue js?

Question

I am trying to connect VueJs with Sails js over socket connection through Sails.io.js package but got not success till now.

I have taken VuejS starter template and sails js starter template to make this whole thing work.

My Frontend packages contains:

"sails.io.js": "^1.2.1",
"socket.io": "^3.1.0",
"socket.io-client": "^3.1.0",
"vue": "^2.6.11"

My Backend packages contains:

"@sailshq/connect-redis": "^3.2.1",
"@sailshq/lodash": "^3.10.3",
"@sailshq/socket.io-redis": "^5.2.0",
"grunt": "1.0.4",
"nodemon": "^2.0.7",
"sails": "^1.3.1",
"sails-hook-grunt": "^4.0.0",
"sails-hook-orm": "^2.1.1",
"sails-hook-sockets": "^2.0.0",
"socket.io": "^3.1.0"

On vuejs, my code is,

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<script>
var io = require('sails.io.js')( require('socket.io-client') );

io.sails.autoConnect = false;
io.sails.useCORSRouteToGetCookie = false
io.sails.url = 'http://localhost:1337';

export default {
  name: 'Home',
  components: {},
  mounted() {
    setTimeout(() => {
      var socket0 = io.sails.connect();
    }, 2000)
  }
};
</script>

So I am trying to connect it after 2 seconds after vue component is mounted.

But every time i am getting one same error that is,

WebSocket connection to 'ws://localhost:1337/engine.io/?EIO=4&transport=websocket' failed: Connection closed before receiving a handshake response

Then i tried changing io.sails.url = 'http://localhost:1337' to io.sails.url = 'ws://localhost:1337' with

but then it started showing error that is (incase of io.sails.useCORSRouteToGetCookie = true),

GET ws://localhost:1337/__getcookie net::ERR_DISALLOWED_URL_SCHEME

but then it started showing error that is (incase of io.sails.useCORSRouteToGetCookie = false),

WebSocket connection to 'ws://localhost:1337/engine.io/?EIO=4&transport=websocket' failed: Connection closed before receiving a handshake response

In sails js my setting for socket in config/sockets.js file is,

module.exports.sockets = {
    transports: [ 'websocket' ], 
};

I have gone through so many links and documentation of sails js, but no success till now.

After this i tried to connect socket with other available packages. those are,

"socket.io": "^3.1.0",
"socket.io-client": "^3.1.0",
"vue-socket.io-extended": "^4.0.6",

While using above packages, My Vue js code is,

<script>

import Vue from 'vue';
import Axios from 'axios'
import VueSocketIOExt from 'vue-socket.io-extended';
import { io } from 'socket.io-client';
var socket = io('http://localhost:1337', { transports: ["websocket"] } );
Vue.use(VueSocketIOExt, socket);

export default {
  sockets: {
    connect() {
      console.log('socket connected')
    },
    disconnect() {
      console.log('socket disconnected')
    },
    foo(data) {
      console.log('this method was fired by the socket server. eg: io.emit("customEmit", data): ')
      console.log('data');
      console.log(data);
    }
  },
  name: 'Home',
  components: {},
  mounted () {
    this.checkHello()
  },
  methods: {
    checkHello () {
      Axios.get('http://localhost:1337/api/testhello')
      .then((response) => {
        console.log('response');
        console.log(response);
      }).catch((error) => {
        console.log('error');
        console.log(error);
      })
    }
  }
};
</script>

I have created on route with /api/testhello on sails js controller, whose code is,

module.exports = {

    testHello: function(req, res) {

        // req.socket is undefind here

        console.log('Hello Called')

        let socketClientObj = sails.io.sockets.clients();
        console.log('socketClientObj.server.eio.clients');
        console.log(socketClientObj.server.eio.clientsCount);

        sails.io.sockets.emit('foo', { thisIs: 'thisMessage'});

        return res.status(200).json({
            anyData: 'we want to send back'
        });
    }
}

With this, I am getting output on console of sails,

Hello Called
socketClientObj.server.eio.clients
1

But with this, My vuejs is connected with sails js and i am getting that one client is connected through the socket but i dont know how to get the connected user socket id or how to get the Socket instance.

with above what i am seeking is:

1. how to make room with approach of not using sails.io.js at frontend but using sails default build in socket functionality ?
2. how to connect particular user to that room because i am not getting Socket id of user who requested the URL in this approach of not using sails.io.js?
3. How to configure Redis Pub sub for cluster mode in sails js in case of above approch of not using sail.io.js in vue js?

Thanks in advance.

Answer 1

After battling with the

WebSocket connection to 'ws://localhost:1337/engine.io/?EIO=4&transport=websocket' failed: Connection closed before receiving a handshake response

error for the longest time digging around everywhere and taking the same steps you did, what solved my problem eventually was:

• npm remove vue-socket.io-extended (if installed)
• npm remove socket.io-js
• npm install socket.io-js@^2.4.0

Seems that sails.js adapter doesn't support [email protected] yet, connection is working with version socket.io-js version 1 and 2 only, 2.4.0 is the latest.