登录验证原理的实现

2017-10-31  本文已影响0人  小草莓蹦蹦跳
var express = require('express');
var app = express();

/*设置使用静态页面*/
app.set('view engine','ejs');

/*渲染静态页面*/
app.get('/',function (req, res) {
    res.render('index.ejs');
});

/*如果在express中使用对应的socket,不能使用app监听,要用http监听*/
 app.listen(3000);

res.redirect('/chat');
/*判断用户名是否重复
 * 解决的办法:
 * 设置一个数组,用来记录所有输入的用户名,然后获取到当前的用户名和对应的数组中的数组进行比较,如果数组中没有这个用户名,表示不重复,就添加到数组中。要是重复,就回到首页*/
/*设置一个数组,用来记录对应的用户名
 * 设置数组不能设置到路由的回调中,需要设置在外面*/
var names = [];

/*
 首页、验证信息、登录界面
 设置处理check路由,用来处理对应的用户昵称的业务逻辑
 分析用户名的逻辑
 保证对应的哟用户名有数值
 当有数值之后,判断用户名是否重复
 当都符合后,就进入登录页面,不符合就回到首页
 * */
app.get('/check',function (req, res) {
    /*获取用户名*/
    var userName = req.query.userName;

    /*判断用户名是否存在*/
    if (!userName){
        //用户名没有数值,即不存在
        res.send('用户名不存在,请输入用户名');
        return;
    }else {
        //用户名存在,判断用户名是否重复
        /*检测用户名是否存在数组中
         * 解决方法:使用数组中的indexOf方法
         * indexOf:表示对应的元素是否存在数组中,如果返回-1,则表示不存在,即不重复。不等于-1则表示存在,即重复*/
        if (names.indexOf(userName) == -1){
            //用户名不存在,即不重复。
            /*不重复时,则先将对应的用户名保存在数组中,然后跳转到聊天页面。*/
            names.push(userName);

            /*我们需要在其他地方使用用户名,因此我们需要使用session保存用户名*/
            req.session.userName = userName;

            /*当符合后,我们跳转到聊天页面*/
            /*redirect:第一个参数表示对应的状态码,只有301和302,其余都不行
            * 第二个参数表示我们跳转到的界面的路由
            * 一般情况我们不写状态码*/
            res.redirect('/chat');
        }else{
            /*重复*/
            res.send('用户名已经存在,请重新输入');
            return;
        }
    }
});

var session = require('express-session');
/*设置使用session*/
app.use(session({
    secret: 'keyboard cat',//相当于是密文
    resave: false,//是否重新设置cookie
    saveUninitialized: true,//表示是否每次session都需要重新设置
    cookie: { maxAge: 90000 }//session依赖的cookie
}));
 */
/*第一种写法*/
/* 0. 导包*/
   // var io = require('socket.io');
 /* 1. 使用app创建对应的http服务端*/
   // var http = require('http').Server(app);
/* 2. 使用http服务端创建对应的socket*/
   // var socket = io(http);

/*第二种写法*/
var http = require('http').Server(app);
var socket = require('socket.io')(http);
/*设置使用静态资源*/
app.use(express.static('./public'));
/*设置路由用来聊天页面*/
app.get('/chat',function (req, res) {
    /*渲染页面前我们进行对应的用户名的验证
    * 判断用户名是否存在对应的session中,如果不存在,重新跳转到登录页面。如果存在,继续处理后续的业务*/
    if(!req.session.userName){
        //用户名不存在,跳转到首页
        res.redirect('/');
        return;
    }
    //用户名存在,渲染页面
    res.render('chat.ejs',{'userName':req.session.userName});
});
/*0. 设置socket*/
var socket = io();

/*1. input触发对应的事件,然后发送信息*/
$('#content').on('keydown',function (e) {
    /*判断点击的是否是回车键*/
    if (e.keyCode == 13){

       /*获取每一个用户的名字*/
        var perName = $('#userName').html();

        /*获取input中的内容*/
        var content = $('#content').val();

        /*获取数据,发送给服务器*/
        socket.emit('chat',{
            perName:perName,
            content:content
        });
        
        /*清空表单中的数据*/
        $('#content').val(" ");
    }
});

*处理具体聊天逻辑
* 当用户点击回车时候,把对应的input中信息获取到然后发送到服务器端,当服务器接收到信息后,
* 再把数据返回给客户端
* 分析服务器:接收到连接后,然后接收客户端发送过来的信息
* 接收到后,再返回对应的数据
* 服务器必须先接收连接,再接收信息*/
socket.on('connection',function (socket) {
    socket.on('chat',function (msg) {
        console.log(msg);

        /*msg表示接受到的信息*/
        /*再把对应的信息发送给对应的客户端*/
        socket.emit('reply',msg);
        console.log('发送成功');
    })
});

/*2.当接收到信息后,我们把对应的信息作为记录添加到页面中*/
/*在界面中添加对应的记录,就是在ul中添加li标签,使对应的信息跑到最前面,使用prepend
* 我们需要在li中设置用户名和对应的内容
* 而且设置用户名为加粗*/

socket.on('reply',function (msg) {
    console.log('接受成功');
    $('.oList').prepend('<li><b>'+msg.perName+':</b>'+msg.content+'</li>');
})
http.listen(3000);
上一篇 下一篇

猜你喜欢

热点阅读