我正在尝试通过 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或如何获取套接字实例。
上面我正在寻找的是:
- 如何在前端不使用sails.io.js但使用sails默认内置套接字功能的方法腾出空间?
- 如何将特定用户连接到该房间,因为我没有获得以这种不使用sails.io.js 的方法请求URL 的用户的Socket id?
- 如果上述方法在 vue js 中不使用sail.io.js,如何在sails js 中为集群模式配置Redis Pub sub?
提前致谢。