Node.js_06 express

一、初探

1 express是什么

Express.js 框架是目前最流行的node.js后端框架之一, 相当于jQuery和js之间的关系;

Express 不对 Node.js 已有的特性进行二次抽象，我们只是在它之上扩展了 Web 应用所需的基本功能;

功能类似的后端框架：Koa.js, egg.js, hapi.js

2 安装

进入应用目录
npm init 命令为你的应用创建一个 package.json 文件
安装 Express 并将其保存到依赖列表中 npm install express --save，

如果只是临时安装 Express，不想将它添加到依赖列表中，只需略去 --save 参数即可 npm install express

3 Express 应用生成器

通过应用生成器工具 express 可以快速创建一个应用的骨架。

安装 npm install express-generator -g ,这个可以在cmd 里执行，全局安装，全局安装以后在哪儿都可以直接用了。

常用操作: express -h -h 选项可以列出所有可用的命令行选项

新建一个文件夹demos, 在该文件夹下执行 express --view=ejs demo1 设置视图模板， 这句执行完毕后，接下来怎么执行，命令行会提示
安装所有依赖包 npm install

设置视图模板 express --view=ejs demo1
启动应用:
- MacOS 或 Linux 平台： DEBUG=myapp npm start
- Windows 平台： set DEBUG=myapp & npm start
- 在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了
通过 Express 应用生成器创建的应用一般都有如下目录结构：

4.中间件

通过app 根据路径处理客户端传来的 get post 请求：

// 1 引入
const express = require('express');
// 2 创建一个server
const app = express();
// 3 通过app 根据路径处理 客户端传来的 get post 请求
app.get('/',(req,res)=>{
    res.write('<h1>there is two ways,the one is the right way ,the other way is the easy way!</h1>');
    res.end();
});
app.get('/pub',(req,res)=>{
    res.write('<p>there is a way!</p>');
    res.end();
});
//
app.get('/it', (req, res)=>{
    console.log(req.url);
    res.write('<h2>it</h2>');
    res.end();
});
// 4 开启监听
app.listen(3000,()=>{
    console.log('server is running');
});
/*
访问：http://localhost:3000/   ----there is two wa......
访问: http://localhost:3000/pub ---- there is a way!
访问:http://localhost:3000/it?name=jack&age=12  server端打印： /it?name=jack&age=12
*/

app.use:

const express = require('express');
const app = express();
// 中间件
app.use((req,res,next)=>{
    console.log(111);
    next();  // next() 后，才会继续往下面执行，否则就会卡在这里,后面的也不会执行了
});
app.use((req,res,next)=>{
    console.log(222);
    next();
});
app.use((req,res,next)=>{
    console.log(333);
    next();
});
app.get('/pub',(req,res,next)=>{
    console.log('pub file');
    next();
});
app.get('/',(req,res,next)=>{
    console.log('aaa');
    res.write('<h1>hello a</h1>');
    res.end();
});
app.listen(3000,()=>{
    console.log('server is running');
})
// 直接访问 http://localhost:3000/  打印
/*
server is running
111
222
333
aaa
*/
/*
* 访问  http://localhost:3000/pub
*
* server is running
111
222
333
pub file
* */

用中间件写日志：

const express = require('express');
const fs = require('fs');
const app = express();
app.use((req,res,next)=>{
    const lg =
`
---------------------------
请求方式:${req.method},
请求路径:${req.url},
请求时间:${new Date}
---------------------------
\n
`
    // 写入文件
    fs.appendFile('log.txt',lg,(err)=>{
        if(err){
            console.log('log write failed');
        }else {
            console.log('log write success');
        }
    });
    res.end()
})
app.listen(3000,()=>{
    console.log('server is running..');
})
/*
log.txt:
---------------------------
请求方式:GET,
请求路径:/,
请求时间:Tue Dec 25 2017 12:52:27 GMT+0800 (GMT+08:00)
---------------------------
*/

5.静态资源文件夹配置

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
// 配置静态资源文件夹
app.use(express.static(path.join(__dirname,'public'))); //将public 文件夹作为静态资源文件夹
app.get('/',(req,res,next)=>{
    console.log(path.join(__dirname, 'public'));
    res.end();
    next();
});
app.listen(3000, ()=>{
    console.log('server is running..');
});
/*
* 访问 http://localhost:3000/images/1.jpg , 就可以访问到public/images/1.jpg 文件了
* 访问 http://localhost:3000/  打印: E:\hfive\gd_code\p8\d7\demos\demo1\public
* */

6 模板引擎

目录结构：

engine.js:

let express = require('express');
let path = require('path');
let app = express();
// 1 指定视图所在位置
app.set('views',path.join(__dirname,'views'));
// 2. 注册模板引擎
app.set('view engine','ejs');
app.get('/',(req,res)=>{
    res.render('index',{"lists":["黄飞鸿","张择端","霍华德"]}); //这里放json的数据，开发中，将数据从数据库取出传这里即可。
});
app.listen(3000);

index.ejs:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<ul>
    <% for(var i=0; i<lists.length;i++){%>
    <li><%=lists[i] %></li>
    <%}%>
</ul>
</body>
</html>

运行结果:

express 如何处理错误，如果处理找不到页面的情况，如下代码实现与 express帮我们生成的代码结构类似，可以帮我们更好的理解express 自动生成后成品结构。

const express = require('express');
const fs = require('fs');
const app = express();
app.get('/',(req,res,next)=>{
    try {
        const data = JSON.parse('{"name":}'); // 这里设置让程序报错
        console.log(data);
        res.json(data);
    }catch (e) {
        next(e);
    }
});
app.get('/a',(req,res,next)=>{
    res.end('hello,this is directory: a ');
});
/**
 * 统一处理错误，记录日志
 */
app.use((err,req,res,next)=>{
    const err_log = `
    ----------------------
    错误名: ${err.name},
    错误消息: ${err.message},
    错误时间: ${new Date()},
    错误堆栈: ${err.stack}
    ----------------------
    `;
    fs.appendFile('./err_log.txt',err_log,(err)=>{
       res.writeHead(500,{"Content-Type": "text/html;charset=utf-8"});
       res.end('500,服务器内部错误');
    });
});
// 404
app.use((req,res,next)=>{
    res.writeHead(404, {"Content-Type": "text/html;charset=utf-8"});
    res.end('您当前访问的页面不存在!!!!');
});
app.listen(3000,()=>{
    console.log('running..');
});

执行结果：

1、访问 http://localhost:3000/ ，页面显示：500,服务器内部错误，并记录日志

2、访问 http://localhost:3000/a ，页面显示：hello,this is directory: a

3、访问 http://localhost:3000/b，页面显示：您当前访问的页面不存在!!!! ，并记录日志

二、express + socket.io

1、搭建

全局安装过 generator 后，执行如下命令，创建项目文件

express --view=ejs chat

自动生成如下结构：

然后，安装依赖

cd chat
npm install

系统会提示：

run the app:
 > SET DEBUG=chat:* & npm start

运行它有两种方式，一种就是执行 ``` npm start ``1

或者，运行bin 目录下的 www.js 文件

2、简要说明

此处只记录简要内容，不记录详细细节

引入路由文件：

中间件：

chat.js:

3、 socket.io

Socket.io 将 Websocket 和轮询（ Polling ）机制以及其它的实时通信方式封装成了通用的接口，并且在服务端实现了这些实时机制的相应代码。

H5 的新技术 Websocket 仅仅是 Socket.io 实现实时通信的一个子集。

中文文档参考： https://www.w3cschool.cn/socket/

安装：

npm install socket.io --save

使用 socket.IO 的时候，需要生成一个实例对象;

生成这个实例对象的依赖原生 node 已经建立好的 httpServer 对象

客户端socket.on()监听的事件：

connect：连接成功

connecting：正在连接

disconnect：断开连接

connect_failed：连接失败

error：错误发生，并且无法被其他事件类型所处理

message：同服务器端message事件

anything：同服务器端anything事件

reconnect_failed：重连失败

reconnect：成功重连

reconnecting：正在重连

当第一次连接时，事件触发顺序为：connecting->connect；

当失去连接时，事件触发顺序为：disconnect、reconnecting（可能进行多次）、connecting、reconnec、connect。

demo 演示：

chat.ejs:

<ul id="chatList">
    <li class="service"><span class="chat-msg">1</span></li>
    <li class="custom"><span class="chat-msg">111111,!</span></li>
    <li class="service"><span class="chat-msg">2</span></li>
    <li class="custom"><span class="chat-msg">2222222</span></li>
</ul>
<script src="/socket.io/socket.io.js"></script>
<script src="/lib/js/jquery-3.3.1.js"></script>
<script>
    // 1建立连接
    var socket = io('http://localhost:3000');
    socket.on('connect', function (data) {
        console.log(data);
        // 1.1 打开通道
        socket.emit('open...');
    });
    //2.监听
    socket.on('msg',function (data) {
        console.log(data);
        dealWithMsg('service',data)
    });
    // 3 点击发送
    $('#btn_send').on('click',function () {
        // 3.1 发送消息给服务器
        socket.emit('msg',$('#msg').val());
        // 3.2 显示到界面
        dealWithMsg('custom',$('#msg').val());
        // 3.3 清空消息
        $('#msg').val('');
    });
    let dealWithMsg = (claaName,data)=>{
        // 1 创建标签
        let $liDom = $("<li>");
        $liDom.attr({
            'class':claaName
        });
        // 创建span
        let $spanDom = $("<span>");
        $spanDom.attr({
           "class":"chat-msg"
        });
        $spanDom.text(data);
        $liDom.append($spanDom);
        $('#chatList').append($liDom);
        // 2. 让滚动条在最底部
        // $('#chatList')[0] 是把它从jquery 转成 js 了，这样就可以拿到scrollheight
        let scoreHeight = $('#chatList')[0].scrollHeight;
        $('#chatList').scrollTop(scoreHeight);
        console.log(scoreHeight);
    };
</script>

www.js:

...............
// 1. 引入包
const socketIO = require('socket.io');
// 2. 针对 http server  生成 socket.IO  实例对象
let io = socketIO(server);
// 3.建立连接
io.on('connection',(socket)=>{
    console.log('建立连接成功');
    // 3.1 返回消息
    socket.emit('msg','欢迎找我talk!');
    // 3.2 接收客户端的消息
    socket.on('msg',(data)=>{
        console.log(data);
        let msg = backMsg(data);
        socket.emit('msg',msg);
    });
});
// 4. 根据用户输入, 返回信息
let backMsg = (data)=>{
    let msg = null;
    switch (data){
        case '在吗':
            msg =  '我在呢...';
            break;
        case '1':
            msg =  '1111';
            break;
        case '2':
            msg =  '2222!';
            break;
        case '3':
            msg =  '3333!';
            break;
        case '4':
            msg =  '44444444';
            break;
        default:
            msg = 'what are you talking about....';
    }
    return msg;
};