Node.JS教程72：用cookie实现websocket自动登录，session状态保留

会话状态的保留，即登录状态保持，是很常见、很常用的功能。

本文将介绍，在NodeJS开发中，如何实现websocket连接的会话（Session）状态保持。

注意，是websocket通信，一般常见的介绍是Http登录状态，websocket实现方案很少。

要实现的效果是：

输入帐号密码登录，登录后刷新、关闭页面均不影响登录状态、还会自动进入登录后的页面。

实现方法详细：

原理：

在服务端，当登录操作时，保存客户cookie，

如果再次有连接，检查连接请求的cookie是否与登录客户保留的cookie一致，如果一致则认为已经登录，无需再次校验。

上代码、上实例：

在本例中，上述功能主要需两个文，一个服务器、一个客户端。

1、客户端index.html页面代码如下：

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

即一个输入帐号密码进行登录的页面。

2、服务端server.js代码如下：

var app = require('express')().listen(8080);
var io = require('socket.io')(app);
//会话状态
var session = [];
//websocket连接
io.on('connection', function (socket) {

//cookie是否存在
    if(socket.request.headers.cookie != undefined){

//遍历会话，检查此是否有此cookie对应的登录状态
        for(i=0; i<session.length; i++){
            if(session[i].cookie == socket.request.headers.cookie){

console.log(socket.request.headers.cookie);
                //登录成功
                socket.emit("login_ret",{"status":0, "message":"login success", "user":session[i].user});
                console.log(session[i].user,"login succcess by session");
                return;
            }
        }
    }
    //登录
    socket.on('login', function (data) {
        //登录校验
		if((data.user="admin") && (data.pass="adminpass")){
            if(socket.request.headers.cookie != undefined){
                //保存在会话中
                session.push({"cookie":socket.request.headers.cookie,"user":data.user});
            }
            //登录成功
            socket.emit("login_ret",{"status":0, "message":"login success", "user":data.user});
            console.log(data.user,"login success");
        }else{
            //登录失败
            socket.emit("login_ret",{"status":1, "message":"login failed", "user":data.user});
            console.log(data.user,"login failed");
        }
    });
});

代码很简洁，如上，且有详细注释。功能原理在上文中也已说明，在此不再赘述。

运行效果：

先启动服务端：

首次登录时，后面提示：

刷新或重打开页面，不需要重新输入帐号密码，会自动进入登录状态：

原创文章，不限转载。欢迎分享学习，大家一起进步。