0

我正在尝试通过 Sails.io.js 包通过套接字连接将 VueJs 与 Sails js 连接,但直到现在还没有成功。

我采用了 VuejS 入门模板和sails js 入门模板来完成整个工作。

我的前端包包含:

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

所以我试图在安装 vue 组件后 2 秒后连接它。

但是每次我遇到一个相同的错误时,

WebSocket 连接到 'ws://localhost:1337/engine.io/?EIO=4&transport=websocket' 失败:连接在收到握手响应之前关闭

然后我尝试将 io.sails.url = 'http://localhost:1337' 更改为 io.sails.url = 'ws://localhost:1337'

但随后它开始显示错误(如果 io.sails.useCORSRouteToGetCookie = true),

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

但随后它开始显示错误(如果 io.sails.useCORSRouteToGetCookie = false),

WebSocket 连接到 'ws://localhost:1337/engine.io/?EIO=4&transport=websocket' 失败:连接在收到握手响应之前关闭

在sails js中,我在config/sockets.js文件中对socket的设置是,

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

我浏览了很多关于sails 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 js控制器上使用/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 js 连接,我得到一个客户端通过套接字连接,但我不知道如何获取连接的用户套接字ID或如何获取套接字实例。

上面我正在寻找的是:

  1. 如何在前端不使用sails.io.js但使用sails默认内置套接字功能的方法腾出空间?
  2. 如何将特定用户连接到该房间,因为我没有获得以这种不使用sails.io.js 的方法请求URL 的用户的Socket id?
  3. 如果上述方法在 vue js 中不使用sail.io.js,如何在sails js 中为集群模式配置Redis Pub sub?

提前致谢。

4

1 回答 1

2

与对方战斗后

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(如果已安装)
  • 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 是最新的。

于 2021-02-12T00:45:11.717 回答