将js进行到底:node学习笔记4

使用Node做web开发

废话:说起web开发,这真的算是我的老本行了,从进入计算机领域我习得的第一门语言便是php,到后来公司使用的ASP.NET平台,再到学校强推的JavaEE平台,后来自学了一点ruby on rails平台,一直到现在node.js做毕设终究还是没有绕出web开发这个大坑!(其实我一直想做嵌入式的,有段时间疯狂迷恋c语言来着==|||)。

HTTP与TCP

上一回使用node.js的NET(TCP)模块开发了一个聊天室demo。单纯用到了原始的TCP协议,可以说TCP是HTTP,SMTP,FTP的鼻祖了,后面的应用层协议都是基于TCP/IP协议的扩展。

接下来讨论的HTTP就是TCP上层的。

在node中TCP与HTTP的区别

创建TCP服务:

//tcp服务
require("net").createServer(function(conn){
    //在创建服务后回调函数获得一个连接引用
    //每一次TCP访问,甚至于http(可降级为tcp),都会产生一个基本的conn!
    //我们将要在连接上做的事情,从客户端获取数据,返回数据给客户端都基于这个conn,上一章也展示了多个conn的使用
}).listen(3000);

创建HTTP服务:

require("http").createServer(function(req,res){
    //在创建服务后回调函数获得两个参数,分别是请求request与响应response,这很类似于Java Servlet中的HttpRequest和HttpResponse对象,其实不同语言,不同平台虽然语法,习惯,框架不同,但是基础思想都得遵循http协议规范,这就是规范的作用:使得开发统一,简单!
    //req对象中有获得客户端数据的各种方法
    //res对象可以向客户端发送响应数据
    //每一个客户端每一次请求都会创建一对req与res!
})。listen(3000);

HTTP可降级,但TCP不可升级:

我们知道浏览器一般必须访问http服务器(严格来说ftp也可以),至少说TCP服务是浏览器访问不了的,我们可以测试一个事情:HTTP服务可以被TCP客户端捕获,但是TCP服务无法被HTTP的客户端请求到:

代码1:TCP服务器

//这是一个tcp服务
var tcp  = require("net");
tcp.createServer(function(conn){
    conn.write("hello world");
}).listen(3000);

浏览器(http客户端)访问不到:

telnet(tcp客户端)可以访问到:

代码2:HTTP服务器

//这是一个http服务
var http  = require("http");
http.createServer(function(req,res){
    res.end("hello world");
}).listen(3000);

浏览器(http客户端)可以访问:

Telnet(TCP客户端)可以降级访问:

注意:如果是windows系统的telnet,有可能在telnet localhost 3000后一片漆黑啥都没有,什么都不管直接输入:“GET / HTTP/1.1”注意GET后面空格斜杠空格不能少!然后HTTP后面是没有空格的,总之最后就能看到啦!

这里,我们的发现就很有意思了,TCP的可以看到HTTP的,但HTTP却不能看到TCP的数据,这就充分说明TCP相当于是HTTP的父类,是更加基础,更加简单的协议,http更加复杂,降级后可以被TCP看到!

HTTP的头信息

对于HTTP这协议来说,传输的可以是文本,二进制文件,html富文本,xml,json等等,我们是需要告诉浏览器我们服务器传给你的是啥文件,这样浏览器才能知道如何解析收到的数据,而这个文件类型就在content-type中声明,我们做两个测试对比一下,看看浏览器如何识别:

直接返回html:

var http  = require("http");
http.createServer(function(req,res){
    res.writeHead(200);
    res.end("sss<h1>hello world</h1>");
}).listen(3000)

无法解析html的h1标记,变成了纯文本输出(这里如果去掉前面sss单独输出一个h1标记是会被chrome浏览器默认当html解析的)

加入content-type声明后:

var http  = require("http");
http.createServer(function(req,res){
    res.writeHead(200,{"content-type":"text/html"});
    res.end("sss<h1>hello world</h1>");
}).listen(3000);

这里的hello world就被识别为h1标记内容了!

当然,content-type有很多,这里不一一解释,详细参考:http://tool.oschina.net/commons/

返回文件

如果每一次都是使用res.end()返回字符串,形成一个完整的网页是不方便的

所以可以通过与Node FS模块联合,通过读取html文件来独立出html代码,在项目同级目录新建一个form.html

form.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="">
        <h1>表单测试</h1>
        <label for="">姓名:</label>
        <input type="text" placeholder="输入您的姓名">
    </form>
</body>
</html>

index.js

var http  = require("http");
var fs = require("fs");
http.createServer(function(req,res){
    res.writeHead(200,{"content-type":"text/html"});
    fs.createReadStream("form.html").pipe(res);
}).listen(3000);

注意:代码中引入了fs模块,即文件系统模块,通过学过的读取流,读取一个html文件,然后pipe是“管道”的意思,作用是将I/O管道里文件流对接到res响应流(其实也是I/O管道),好比自来水管相接,水就从一家到另一家了的道理。

这之间所有的流操作都是异步执行的,无论哪一根管道“水”慢了都不会阻塞node.js的运作,node任然能处理其他的请求!这就充分表现了node强大的异步性。

效果

这样就将html代码分离出来了,降低了代码耦合性。

像这样的非阻塞文件流操作在大文件传输方面,例如一些图片的加载,则性能尤为突出,如下使用node.js发送给客户端一张图片!

访问图片:

我们先往项目目录中放一张“psd.jpg”

var http  = require("http");
var fs = require("fs");
http.createServer(function(req,res){
    res.writeHead(200,{"content-type":"application/x-jpg"});
    fs.createReadStream("psb.jpg").pipe(res);
}).listen(3000);

使用这招老套路的话,chrome浏览器会弹出让下载图片,而不是显示图片!下载后就是那一张图片了。这是因为我们没有给出img标签来要求浏览器显示这张图片

万全之策:

为了让图文正常显示,使用如下代码:

var http  = require("http");
var fs = require("fs");
http.createServer(function(req,res){
    //请求为图片
    if(req.method == ‘GET‘ && req.url.substr(-4)==".jpg"){
        fs.stat(__dirname+req.url,function(err,stat){
            if(err || !stat.isFile()){
                res.writeHead(404);
                res.end("找不到图片");
                return;
            }
            serve(__dirname+req.url,‘application/x-jpg‘);
        });
    }else if(req.method=="GET" && req.url==‘/‘){
        serve(__dirname+‘/form.html‘,‘text/html‘);
    }else{
        res.writeHead(404);
        res.end("网址丢了");
        return;
    }

    //独立response函数
    function serve(path,content_type){
        res.writeHead(200,{"content-type":content_type});
        fs.createReadStream(path).pipe(res);
    }
}).listen(3000);

效果:

这时候网页和图片都能正常显示了!

这章已经到了HTTP,就到了Node.js的核心了,因为node最广泛的应用是在http服务上,所以这一章说不掉多少node中http的知识和问题,只能下一章继续聊http了。

原文地址:https://www.cnblogs.com/devilyouwei/p/8432682.html

时间: 2024-07-31 19:24:40

将js进行到底:node学习笔记4的相关文章

Js脚本之jQuery学习笔记(1)

Js脚本之jQuery学习笔记(1) 一.javascript基础 单行注释 多行注释 /* */ 数据类型 数值型 字符串型 布尔型 空值 未定义值 转义字符 函数定义:1234567891011121314<head><script language="javascript"function test(m){var xixi="嘻嘻"alert("这是javascript")document.write(xixi + m)}

《JS高程》事件学习笔记

事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. ------------------------------------------------------------------------------------------------------------- 一.事件流 事件流:描述的是页面中接收事件的顺序. IE:事件冒泡流,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档): NetScape:事件捕获流,即不太具体的节

node 学习笔记1 router路由

1. var express = require('express'); var app = express(); app.get('/', function(req, res){ res.send('hello world'); }); app.listen(3000); 一个最为常见的 路由 2. var admin = express(); admin.get('/', function (req, res) { console.log(admin.mountpath); // [ '/a

将js进行到底:node学习笔记5

HTTP开发之Connect工具集--中间件 继学习node.js的TCP API和HTTP API之后,node.js web开发进入了正轨,但这就好像Java的servlet一样,我们不可能使用最基础得Servlet对象去写网站,我们也不能使用最基本的node http API去写一个完整得网站,我们需要更加强大得工具集,web套件,甚至是web开发框架(诸如Java下的Spring MVC),来提供开发者更人性化得web开发环境. 创建网站的基本任务--为何要有中间件 独立托管静态文件,诸

node学习笔记(1)--简介及安装Node.js开发环境

简介 Node.js是让Javascript脱离浏览器运行在服务器的一个平台,不是语言: Node.js采用的Javascript引擎是来自Google Chrome的V8:运行在浏览器外不用考虑头疼的Javascript兼容性问题 采用单线程.异步IO与事件驱动的设计来实现高并发(异步事件也在一定程度上增加了开发和调试的难度): Node.js内建一个HTTP服务器,所以对于网站开发来说是一个好消息: 主页:http://nodejs.org/  英文API:http://nodejs.org

node+webpack环境搭建 vue.js 2.0 基础学习笔记

npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm install -g vue-cli //全局安装vue-cli //可用淘宝镜像 npm=>cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org生成项目 vue init webpack my-first-vue-project //生成项目名为my-first-vue-pr

node学习笔记

1.Node,可以让javascript运行在服务器端的平台. 是一个为实时Web(Real-time Web)应用开发而诞生的平台.充分考虑了实时响应,超大规模数据要求下架构. 2.摒弃了传统平台依靠多线程来实现高并发的设计思路,而采用了单线程.异步式I/O,事件驱动式的程序设计模型. 不仅带来了巨大的性能提升,还减少了多线程程序设计复杂性,进而提高了开发效率. 3.单线程事件驱动的异步I/O. 单线程事件驱动的异步I/O比传统的多线程阻塞式I/O到底好在哪里:简而言这,异步式I/O少了多线程

Node学习笔记(四):gulp+express+io.socket部署angularJs2(填坑篇)

这篇就先暂停下上篇博客--你画我猜的进度,因为在做这个游戏的时候,想采用最新的ng2技术,奈何坑是一片又一片,这边就先介绍下环境部署和填坑史 既然要用ng2,首先要拿到资源,我这边用的是angularJs2 beta版的,网上的资源有两种,一个是文件全压缩版的.min.js版的另一个就是一大堆乱七八糟的js文件,主要是ng2已经完全采用TypeScript,加之对es6的支持,所以需要引入一大堆兼容,编译文件 这边刚好特别手欠想学学gulp,于是开搞配置gulp环境,压缩所有的js文件成一个mi

node 学习笔记

以下笔记默认安装完成node 及npm 1.安装express 新版本的express-generator已经独立出来,全局安装这个包就ok. npm install express-generator -gd 2.新建一个文件夹并进入 3.执行express -e 初始化项目 4.npm install 安装项目依赖包 5.npm start 启动项目 6.为省去每次调试都要手动kill process然后重启项目的麻烦 可以安装superviser views文件夹下 .ejs 改为.htm