登录验证原理的实现

• 1. 访问 “ / ” 路由时候，渲染index.ejs页面

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

---

• 2. 当点击进入聊天室后（提交表单的时候，提交到'/check'路由上），即访问'/check'路由时，先获取用户名，然后判断用户名是否有数值；若有数值，则判断用户名是否重复；若不重复，则将该用户名保存在数组中，并将用户名保存在session中。然后跳转到chat路由上。

• 路由的跳转使用redirect方法

  • redirect:第一个参数表示对应的状态码，只有301和302，其余都不行

  • 第二个参数表示我们跳转到的界面的路由

  • 一般情况我们不写状态码

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;
        }
    }
});

• 3. 当访问 ‘/chat’ 路由的时候，客户端获取input中的数据，然后将用户输入的数据与用户名一起作为msg发送给服务端，服务端接受到客户端信息，再将其发送给对应的客户端，显示在界面上。
• 这里需要用到websocket，因此需要导包

var session = require('express-session');
/*设置使用session*/
app.use(session({
    secret: 'keyboard cat',//相当于是密文
    resave: false,//是否重新设置cookie
    saveUninitialized: true,//表示是否每次session都需要重新设置
    cookie: { maxAge: 90000 }//session依赖的cookie
}));

• 在express中websocket是固定的步骤

 */
/*第一种写法*/
/* 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);

• 在ejs中存在其他静态资源的请求，因此需要设置使用静态资源

/*设置使用静态资源*/
app.use(express.static('./public'));

• 在设置路由用来聊天的页面上，我们在渲染页面前需要进行对应的用户名的验证。

• 判断用户名是否存在对应的session中，如果不存在，重新跳转到登录页面。如果存在，继续处理后续的业务

/*设置路由用来聊天页面*/
app.get('/chat',function (req, res) {
    /*渲染页面前我们进行对应的用户名的验证
    * 判断用户名是否存在对应的session中，如果不存在，重新跳转到登录页面。如果存在，继续处理后续的业务*/
    if(!req.session.userName){
        //用户名不存在，跳转到首页
        res.redirect('/');
        return;
    }
    //用户名存在，渲染页面
    res.render('chat.ejs',{'userName':req.session.userName});
});

• 客户端发送数据给服务端

• 先点击对应的回车键的时候，我们获取对应的input中的数据，然后把对应的数据发送给服务器

• 在发送数据前必须先设置socket

/*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('
'+msg.perName+':'+msg.content+'
');
})

• 如果在express中使用对应的socket，不能使用app监听，要用http监听

http.listen(3000);