很多朋友对于node服务器和如何用nodejs搭建web服务器不太懂,今天就由小编来为大家分享,希望可以帮助到大家,下面一起来看看吧!
一、nodejs当web服务器行不行
可以呀
使用Node.js搭建Web服务器是学习Node.js比较全面的入门教程,因为实现Web服务器需要用到几个比较重要的模块:模块、文件系统、url解析模块、路径解析模块、以及301重定向技术等,下面我们就一起来学习如何搭建一个简单的Web服务器。
作为一个Web服务器应具备以下几个功能:
1、能显示以.html/.htm结尾的Web页面
2、能打开以.js/.css/.json/.text结尾的文件内容
3、显示图片资源
4、自动以.apk/.docx/.zip结尾的文件
5、形如,则查找b目录下是否有index.html,如果有就显示,如果没有就列出该目录下的所有文件及文件夹,并可以进一步访问。
6、形如,则作301重定向到,这样可以解决内部资源引用错位的问题。
引入需要用到的几个模块:
//协议模块var= require('');//url解析模块varurl= require('url');//文件系统模块varfs= require("fs");//路径解析模块varpath= require("path");
创建服务并在指定的端口监听:
//创建一个服务varServer= .createServer(this.processRequest.bind(this));//在指定的端口监听服务Server.listen(port,function(){console.log("[HttpServer][Start]","runing at );console.timeEnd("[HttpServer][Start]");});
在创建服务的时候需要传递一个匿名函数processRequest对请求进行处理,processRequest接收2个参数,分别是request和response, request对象中包含了请求的所有内容,response是用来设置响应头以及对客户端做出响应操作。
processRequest:function(request,response){varhasExt=true;varrequestUrl= request.url;varpathName= url.parse(requestUrl).pathname;//对请求的路径进行解码,防止中文乱码pathName= decodeURI(pathName);//如果路径中没有扩展名if(path.extname(pathName)===''){//如果不是以/结尾的,加/并作301重定向if(pathName.charAt(pathName.length-1)!="/"){pathName+="/";varredirect="://"+request.headers.host+ pathName;response.writeHead(301,{location:redirect});response.end();return;}//添加默认的访问页面,但这个页面不一定存在,后面会处理pathName+="index.html";hasExt=false;//标记默认页面是程序自动添加的}//获取资源文件的相对路径varfilePath= path.join("/webroot",pathName);//获取对应文件的文档类型varcontentType=this.getContentType(filePath);//如果文件名存在fs.exists(filePath,function(exists){if(exists){response.writeHead(200,{"content-type":contentType});varstream= fs.createReadStream(filePath,{flags:"r",encoding:null});stream.on("error", function(){response.writeHead(500,{"content-type":"text/html"});response.end("<h1>500 Server Error</h1>");});//返回文件内容stream.pipe(response);}else{//文件名不存在的情况if(hasExt){//如果这个文件不是程序自动添加的,返回404response.writeHead(404,{"content-type":"text/html"});response.end("<h1>404 Not Found</h1>");}else{//如果文件是程序自动添加的且不存在,则表示用户希望访问的是该目录下的文件列表varhtml="<head><meta charset='utf-8'></head>";try{//用户访问目录varfiledir= filePath.substring(0,filePath.lastIndexOf('\\'));//获取用户访问路径下的文件列表varfiles= fs.readdirSync(filedir);//将访问路径下的所以文件一一列举出来,并添加超,以便用户进一步访问for(variinfiles){varfilename= files[i];html+="<div><a href='"+filename+"'>"+filename+"</a></div>";}}catch(e){html+="<h1>您访问的目录不存在</h1>"}response.writeHead(200,{"content-type":"text/html"});response.end(html);}}});}
请求处理函数中有几个重点需要说一下:
对于路径中有中文的,浏览器会自动进行编码(英文不变,中文会变),因此在接收到后,需要对进行解码,否则最后得到的路径和真实路径不相符,
当访问路径不是以具体的文件结尾,并且不是以/结尾,则需要通过重定向加上/,表示当前目录,否则当前路径下的静态资源会找不到
如果访问路径是目录,则列出该目录下所有文件及文件夹,并可以访问,为了让中文目录能正常显示,则还要在header中设置charset=utf-8
核心代码就这么多,大概140行左右,完整的代码已上传到github:,
如果要运行demo,打开cmd切换到根目录,运行node start即可。
二、怎么连接nodejs服务器
前面已经学习了WebSocket API,包括事件、方法和属*。详情:WebSocket(二)--APIWebSocket是基于事件驱动,支持全双工通信。下面通过三个简单例子体验一下。
简单开始
1.安装node。/
2.安装ws模块
ws:是nodejs的一个WebSocket库,可以用来创建服务。
3.server.js
在项目里面新建一个server.js,创建服务,指定8181端口,将收到的消息log出来。
var WebSocketServer= require('ws').Server,
wss= new WebSocketServer({ port: 8181});
wss.on('connection', function(ws){
console.log('client connected');
ws.on('message', function(message){
console.log(message);
});
});
4.建立一个client.html。
在页面上建立一个WebSocket的连接。用send方法发送消息。
var ws= new WebSocket("ws://localhost:8181");
ws.onopen= function(e){
console.log('Connection to server opened');
} function sendMessage(){
ws.send($('#message').val());
}
页面:
View Code
运行之后如下,服务端即时获得客户端的消息。
模拟股票
上面的例子很简单,只是为了演示如何运用nodejs的ws创建一个WebSocket服务器。且可以接受客户端的消息。那么下面这个例子演示股票的实时更新。客服端只需要连接一次,服务器端会不断地发送新数据,客户端收数据后更新UI.页面如下,有五只股票,开始和停止按钮测试连接和关闭。
服务端:
1.模拟五只股票的涨跌。
var stocks={"AAPL": 95.0,"MSFT": 50.0,"AMZN": 300.0,"GOOG": 550.0,"YHOO": 35.0}function randomInterval(min, max){ return Math.floor(Math.random()*(max- min+ 1)+ min);
}var stockUpdater;var randomStockUpdater= function(){ for(var symbol in stocks){ if(stocks.hasOwnProperty(symbol)){ var randomizedChange= randomInterval(-150, 150); var floatChange= randomizedChange/ 100;
stocks[symbol]+= floatChange;
}
} var randomMSTime= randomInterval(500, 2500);
stockUpdater= setTimeout(function(){
randomStockUpdater();
}, randomMSTime);
}
randomStockUpdater();
2.连接建立之后就开始更新数据
wss.on('connection', function(ws){ var sendStockUpdates= function(ws){ if(ws.readyState== 1){ var stocksObj={}; for(var i= 0; i< clientStocks.length; i++){ var symbol= clientStocks[i];
stocksObj[symbol]= stocks[symbol];
} if(stocksObj.length!== 0){ ws.send(JSON.stringify(stocksObj));//需要将对象转成字符串。WebSocket只支持文本和二进制数据
console.log("更新", JSON.stringify(stocksObj));
}
}
} var clientStockUpdater= setInterval(function(){
sendStockUpdates(ws);
}, 1000);
ws.on('message', function(message){ var stockRequest= JSON.parse(message);//根据请求过来的数据来更新。
console.log("收到消息", stockRequest);
clientStocks= stockRequest['stocks'];
sendStockUpdates(ws);
});
客户端:
建立连接:
var ws= new WebSocket("ws://localhost:8181");
onopen只有在连接成功后才会触发,在这个时候将客户端需要请求的股票发送给服务端。
var isClose= false; var stocks={"AAPL": 0,"MSFT": 0,"AMZN": 0,"GOOG": 0,"YHOO": 0
}; function updataUI(){
ws.onopen= function(e){
console.log('Connection to server opened');
isClose= false; ws.send(JSON.stringify(stock_request));
console.log("sened a mesg");
}//更新UI
var changeStockEntry= function(symbol, originalValue, newValue){ var valElem=$('#'+ symbol+' span');
valElem.html(newValue.toFixed(2)); if(newValue< originalValue){
valElem.addClass('label-danger');
valElem.removeClass('label-suess');
} else if(newValue> originalValue){
valElem.addClass('label-suess');
valElem.removeClass('label-danger');
}
}//处理受到的消息
ws.onmessage= function(e){ var stocksData= JSON.parse(e.data);
console.log(stocksData); for(var symbol in stocksData){ if(stocksData.hasOwnProperty(symbol)){
changeStockEntry(symbol, stocks[symbol], stocksData[symbol]);
stocks[symbol]= stocksData[symbol];
}
}
};
}
updataUI();
运行效果如下:只需要请求一次,数据就会不断的更新,效果是不是很赞,不用轮询,也不用长连接那么麻烦了。文章末尾会附上所有源码。
(美股的涨跌和A股的颜色是反的,即红跌绿涨)
实时聊天
上面的例子是连接建立之后,服务端不断给客户端发送数据。接下来例子是一个简单的聊天室类的例子。可以建立多个连接。
1.安装node-uuid模块,用来给每个连接一个唯一号。
2.服务端消息发送
消息类型分notification和message两种,前者是提示信息,后者是聊天内容。消息还包含一个id、昵称和消息内容。在上一节有学习到readyState有四个值,OPEN表示连接建立可以发送消息。如果页面关闭了,为WebSocket.CLOSE。
function wsSend(type, client_uuid, nickname, message){ for(var i= 0; i< clients.length; i++){ var clientSocket= clients[i].ws; if(clientSocket.readyState=== WebSocket.OPEN){
clientSocket.send(JSON.stringify({"type": type,"id": client_uuid,"nickname": nickname,"message": message
}));
}
}
}
3.服务端处理连接
每新增加一个连接,都会发送一条匿名用户的加入的提示消息,如果消息中带有“/nick”认为这一个修改昵称的消息。然后更新客户端的昵称。其他都会当做聊天消息处理。
wss.on('connection', function(ws){ var client_uuid= uuid.v4(); var nickname="AnonymousUser"+ clientIndex;
clientIndex+= 1;
clients.push({"id": client_uuid,"ws": ws,"nickname": nickname});
console.log('client [%s] connected', client_uuid); var connect_message= nickname+" has connected"; wsSend("notification", client_uuid, nickname, connect_message);
console.log('client [%s] connected', client_uuid);
ws.on('message', function(message){ if(message.indexOf('/nick')=== 0){ var nickname_array= message.split(''); if(nickname_array.length>= 2){ var old_nickname= nickname;
nickname= nickname_array[1]; var nickname_message="Client"+ old_nickname+" changed to"+ nickname; wsSend("nick_update", client_uuid, nickname, nickname_message);
}
} else{
wsSend("message", client_uuid, nickname, message);
}
});
处理连接关闭:
var closeSocket= function(customMessage){ for(var i= 0; i< clients.length; i++){ if(clients[i].id== client_uuid){ var disconnect_message; if(customMessage){
disconnect_message= customMessage;
} else{
disconnect_message= nickname+" has disconnected";
} wsSend("notification", client_uuid, nickname, disconnect_message);
clients.splice(i, 1);
}
}
};
ws.on('close', function(){
closeSocket();
});
4.客户端
没有启动时,页面如下,change按钮用来修改昵称。
View Code
js:
//建立连接
var ws= new WebSocket("ws://localhost:8181"); var nickname="";
ws.onopen= function(e){
console.log('Connection to server opened');
}//显示
function endLog(type, nickname, message){ if(typeof message=="undefined") return; var messages= document.getElementById('messages'); var messageElem= document.createElement("li"); var preface_label; if(type==='notification'){
preface_label="<span class=\"label label-info\">*</span>";
} else if(type=='nick_update'){
preface_label="<span class=\"label label-warning\">*</span>";
} else{
preface_label="<span class=\"label label-suess\">"
+ nickname+"</span>";
} var message_text="<h2>"+ preface_label+" "
+ message+"</h2>";
messageElem.innerHTML= message_text;
messages.endChild(messageElem);
}//收到消息处理
ws.onmessage= function(e){ var data= JSON.parse(e.data);
nickname= data.nickname;
endLog(data.type, data.nickname, data.message);
console.log("ID: [%s]=%s", data.id, data.message);
}
ws.onclose= function(e){
endLog("Connection closed");
console.log("Connection closed");
}//发送消息
function sendMessage(){ var messageField= document.getElementById('message'); if(ws.readyState=== WebSocket.OPEN){
ws.send(messageField.value);
}
messageField.value='';
messageField.focus();
}//修改名称
function changName(){ var name=$("#name").val(); if(ws.readyState=== WebSocket.OPEN){
ws.send("/nick"+ name);
}
}
运行结果:
页面关闭之后,连接马上断开。
这种实时响应的体验简直不能太爽,代码也清爽了,前端体验也更好,客户端不用一直发请求,服务端不用等着被轮询。
小结:上面例子的代码都很好理解,接下来学习WebSocket协议。
三、如何用nodejs搭建web服务器
使用Node.js搭建Web服务器是学习Node.js比较全面的入门教程,因为实现Web服务器需要用到几个比较重要的模块:模块、文件系统、url解析模块、路径解析模块、以及301重定向技术等,下面我们就一起来学习如何搭建一个简单的Web服务器。
作为一个Web服务器应具备以下几个功能:
1、能显示以.html/.htm结尾的Web页面
2、能打开以.js/.css/.json/.text结尾的文件内容
3、显示图片资源
4、自动以.apk/.docx/.zip结尾的文件
5、形如,则查找b目录下是否有index.html,如果有就显示,如果没有就列出该目录下的所有文件及文件夹,并可以进一步访问。
6、形如,则作301重定向到,这样可以解决内部资源引用错位的问题。
引入需要用到的几个模块:
//协议模块var= require('');//url解析模块varurl= require('url');//文件系统模块varfs= require("fs");//路径解析模块varpath= require("path");
创建服务并在指定的端口监听:
//创建一个服务varServer= .createServer(this.processRequest.bind(this));//在指定的端口监听服务Server.listen(port,function(){console.log("[HttpServer][Start]","runing at );console.timeEnd("[HttpServer][Start]");});
在创建服务的时候需要传递一个匿名函数processRequest对请求进行处理,processRequest接收2个参数,分别是request和response, request对象中包含了请求的所有内容,response是用来设置响应头以及对客户端做出响应操作。
processRequest:function(request,response){varhasExt=true;varrequestUrl= request.url;varpathName= url.parse(requestUrl).pathname;//对请求的路径进行解码,防止中文乱码pathName= decodeURI(pathName);//如果路径中没有扩展名if(path.extname(pathName)===''){//如果不是以/结尾的,加/并作301重定向if(pathName.charAt(pathName.length-1)!="/"){pathName+="/";varredirect="://"+request.headers.host+ pathName;response.writeHead(301,{location:redirect});response.end();return;}//添加默认的访问页面,但这个页面不一定存在,后面会处理pathName+="index.html";hasExt=false;//标记默认页面是程序自动添加的}//获取资源文件的相对路径varfilePath= path.join("/webroot",pathName);//获取对应文件的文档类型varcontentType=this.getContentType(filePath);//如果文件名存在fs.exists(filePath,function(exists){if(exists){response.writeHead(200,{"content-type":contentType});varstream= fs.createReadStream(filePath,{flags:"r",encoding:null});stream.on("error", function(){response.writeHead(500,{"content-type":"text/html"});response.end("<h1>500 Server Error</h1>");});//返回文件内容stream.pipe(response);}else{//文件名不存在的情况if(hasExt){//如果这个文件不是程序自动添加的,返回404response.writeHead(404,{"content-type":"text/html"});response.end("<h1>404 Not Found</h1>");}else{//如果文件是程序自动添加的且不存在,则表示用户希望访问的是该目录下的文件列表varhtml="<head><meta charset='utf-8'></head>";try{//用户访问目录varfiledir= filePath.substring(0,filePath.lastIndexOf('\\'));//获取用户访问路径下的文件列表varfiles= fs.readdirSync(filedir);//将访问路径下的所以文件一一列举出来,并添加超,以便用户进一步访问for(variinfiles){varfilename= files[i];html+="<div><a href='"+filename+"'>"+filename+"</a></div>";}}catch(e){html+="<h1>您访问的目录不存在</h1>"}response.writeHead(200,{"content-type":"text/html"});response.end(html);}}});}
请求处理函数中有几个重点需要说一下:
对于路径中有中文的,浏览器会自动进行编码(英文不变,中文会变),因此在接收到后,需要对进行解码,否则最后得到的路径和真实路径不相符,
当访问路径不是以具体的文件结尾,并且不是以/结尾,则需要通过重定向加上/,表示当前目录,否则当前路径下的静态资源会找不到
如果访问路径是目录,则列出该目录下所有文件及文件夹,并可以访问,为了让中文目录能正常显示,则还要在header中设置charset=utf-8
核心代码就这么多,大概140行左右,完整的代码已上传到github:,
如果要运行demo,打开cmd切换到根目录,运行node start即可。