如何将VueJs中的套接字与内置在socket中的Sails js与vue js中的sails.io.js连接？

Question

我正试图通过Sails.io.js包将VueJ与Sails通过套接字连接连接起来，但到目前为止还没有成功。

我采用了VuejS初学者模板和sails初学者模板来完成整个工作。

我的前端包包含：

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

我的后端包包含：

"@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"

关于vuejs，我的代码是，

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

因此，我试图连接后，2秒后，vue组件被挂载。

但每次我遇到同样的错误，

到'ws://localhost:1337/engine.io/?EIO=4&transport=websocket‘的

WebSocket连接失败:连接在收到握手响应之前关闭

然后，我尝试用以下方式将io.sails.url = 'http://localhost:1337‘改为io.sails.url = 'ws://localhost:1337’

但是它开始显示错误，即(在io.sails.useCORSRouteToGetCookie =true的情况下)，

获取ws://localhost:1337/_getcookie net::ERR_DISALLOWED_URL_SCHEME

但是它开始显示错误，即(在io.sails.useCORSRouteToGetCookie =false的情况下)，

到'ws://localhost:1337/engine.io/?EIO=4&transport=websocket‘的

WebSocket连接失败:连接在收到握手响应之前关闭

在sails中，我在config/sockets.js文件中设置的套接字是，

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

我已经经历了这么多的风帆js的链接和文档，但至今没有成功。

之后，我尝试将套接字与其他可用的包连接起来。那些是，

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

在使用上面的包时，我的Vue js代码是，

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

我在sails控制器上创建了带有/api/testhello的路由，其代码是，

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'
        });
    }
}

有了这个，我就可以在船帆控制台上得到输出，

Hello Called
socketClientObj.server.eio.clients
1

但是有了这个，我的vuejs与sails连接，我得到一个客户端通过套接字连接，但我不知道如何获得已连接的用户套接字id或如何获取套接字实例。

我想要的是：

sails.io.js?

• How

1. 如何在前端不使用sails.io.js，但在套接字功能中使用sails.io.js默认构建的方法来腾出空间？
2. 如何将特定用户连接到该房间，因为我没有获得请求sails.io.js的用户的套接字id --在这种方法中，如果在vue js中不使用sail.io.js？

中不使用sail.io.js的情况下，不会使用sails.io.js来配置sails中的Redis集群模式。

提前谢谢。

Answer 1

在与

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

错误持续了很长一段时间，到处都在挖掘，并且采取了同样的步骤，最终解决了我的问题是：

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

)

似乎sails.js适配器不支持socket.io-js@3.0.0，但是连接只与版本socket.io-js版本1和2一起工作，最新版本是2.4.0。