会话状态的保留,即登录状态保持,是很常见、很常用的功能。
本文将介绍,在NodeJS开发中,如何实现websocket连接的会话(Session)状态保持。注意,是websocket通信,一般常见的介绍是Http登录状态,websocket实现方案很少。
![0d31b98e8c6d6d8d2807f2b38bb0299e.png](https://i-blog.csdnimg.cn/blog_migrate/595b1b5dcde8deafbf1454ab44829187.png)
要实现的效果是:
输入帐号密码登录,登录后刷新、关闭页面均不影响登录状态、还会自动进入登录后的页面。
实现方法详细:原理:
在服务端,当登录操作时,保存客户cookie,
如果再次有连接,检查连接请求的cookie是否与登录客户保留的cookie一致,如果一致则认为已经登录,无需再次校验。上代码、上实例:
在本例中,上述功能主要需两个文,一个服务器、一个客户端。
![4bc09a28d1468448d0d1b65904bde9e0.png](https://i-blog.csdnimg.cn/blog_migrate/0831bc07ea3059ba3db80eddea9ee6af.png)
1、客户端index.html页面代码如下:
![beead04c17fad8b9ab344d8387756ad4.png](https://i-blog.csdnimg.cn/blog_migrate/dfcb492b7ca0155500c3af5d7089519c.png)
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="login" style="display: block;">
<form >
user: <input type="text" id="user" value="admin"/>
<br>
pass: <input type="password" id="pass" value="adminpass"/>
<br>
<input type="button" value="Submit" onclick="login();"/>
</form>
</div>
<div id="logined" style="display: none;">
</div>
<script>
function login(){
var user = document.getElementById("user").value;
var pass = document.getElementById("pass").value;
socket_io.emit("login",{"user":user, "pass":pass});
}
</script>
<script src="socket.io.js"></script>
<script>
var socket_io = io("http://127.0.0.1:8080");
socket_io.on("login_ret",function(data){
if(data.status == 0){
document.getElementById("login").style.display = "none";
document.getElementById("logined").style.display = "block";
document.getElementById("logined").innerText = "You have logined:" + data.user;
}
});
</script>
</body>
</html>
即一个输入帐号密码进行登录的页面。
![14c4ffe8e395fcd19b24469af511e50b.png](https://i-blog.csdnimg.cn/blog_migrate/1077ec87f09bf51b8b9f90112b3dbad4.png)
2、服务端server.js代码如下:
![7d4f43544199a0fabfe5cfb460d4922c.png](https://i-blog.csdnimg.cn/blog_migrate/01ad473ed60ca168b5220f22b0cb536b.png)
var
代码很简洁,如上,且有详细注释。功能原理在上文中也已说明,在此不再赘述。
运行效果:
先启动服务端:
![8c8dbbf48ea4fde766d9dc7b204a691b.png](https://i-blog.csdnimg.cn/blog_migrate/419dfb9658230a11cdea04f868e1928e.png)
首次登录时,后面提示:
![41aa613c5cdda097fab8b7197f392366.png](https://i-blog.csdnimg.cn/blog_migrate/d9f92a2c5429c9741d5242d555c0473d.png)
刷新或重打开页面,不需要重新输入帐号密码,会自动进入登录状态:
![5f17819e5f99373325b7e2f9b7daba07.png](https://i-blog.csdnimg.cn/blog_migrate/ce68763afffb6809553aa9518c96b0af.png)
原创文章,不限转载。欢迎分享学习,大家一起进步。