我试图创建一个简单的登录应用程序,只是为了玩弄socketio,vue和nodejs(express),我让发送和接收在客户端和服务器上工作。 但是当我尝试集成 session 以便让用户保持登录状态时遇到问题。
我尝试了很多不同的模块,但没有任何效果。我确信有些东西我现在还没有得到,因为我对 Nodejs 等还很陌生。
无论如何,这是我的代码:
前端:
<template>
<div>
<p>
<input type="text" name="username" id="username" v-model="user.username" placeholder="Username" /><br />
<input type="password" name="password" id="password" v-model="user.password" placeholder="Password" /><br />
<button v-on:click="register()">Register</button>
</p>
</div>
</template>
<script>
import io from 'socket.io-client';
export default {
name: 'BlockGame',
data() {
return {
user: {
username: '',
password: '',
},
socket: {},
context: {},
};
},
created() {
this.socket = io('localhost:3000', {
withCredentials: true,
});
},
mounted() {
this.socket.on('', (data) => {});
},
methods: {
register() {
this.socket.emit('register-user', this.user);
},
},
};
</script>
<style scoped></style>
后端:
const app = require('express')();
const redis = require('redis');
const server = require('http').createServer(app);
const session = require('express-session');
const socketio = require('socket.io')(server, {
cors: {
origin: 'http://localhost:8080',
methods: ['GET', 'POST'],
preflightContinue: false,
optionsSuccessStatus: 204,
credentials: true,
},
});
let RedisStore = require('connect-redis')(session);
let redisClient = redis.createClient();
var sessionMiddleware = session({
name: 'session_cookie',
secret: 'edfafewfdsfezhrjew',
store: new RedisStore({ client: redisClient }),
resave: false,
saveUninitialized: true,
cookie: { maxAge: 1000 * 60 * 5, secure: false },
});
app.use(sessionMiddleware);
socketio.use((socket, next) => {
sessionMiddleware(socket.request, {}, next);
});
socketio.on('connect', (socket) => {
const session = socket.request.session;
console.log(session.id);
if (session.user) {
console.log('----- SESSION -----');
console.log('Session ID: ' + session.id + ' / Session User: ' + session.user);
}
socket.on('register-user', (data) => {
const session = socket.request.session;
session.user = data['username'];
session.save();
console.log(session);
});
});
server.listen(3000, () => {
console.log('Listening at :3000...');
});
基本上应该发生的是,当用户“登录”时,他的用户名会保存到 session 中。当用户刷新页面时,它应该仍然存在。但目前,每次用户刷新页面时,他都会获得一个新 session ,因此一切都消失了。
希望有人能帮助我。
最佳答案
我尝试了您的服务器代码,并通过express.static提供客户端服务,它按预期工作。即使刷新后或在新选项卡上也提供相同的 sessionId。
app.use(express.static("public"))
客户端代码,保存在public/index.html
<!doctype html>
<html>
<head>
<script src='/socket.io/socket.io.js'></script>
<script>
var socket = io("/",{withCredentials: true,});
socket.on('connect', ()=>{
socket.emit('register-user', {username:"User Name"});
document.write("Connected")
})
</script>
</head>
</html>
在您的情况下,您正在从不同的来源提供客户文件。 Express session 不会按您的预期工作。即使对于简单的获取请求也会创建新 session 。尝试将以下代码添加到您的服务器,并尝试从您的客户端发出 get 请求,您就会明白我的意思
app.use((req,_,next)=>{
console.log(req.session.id)
next()
})
关于node.js - 使用 socket.io 和 vue 的 Express Session 在每次页面加载时都会重置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67902031/