玩一玩nodejs--一個簡單的線上實時填表應用

學習nodejs三天，入了個門，感覺他和jsp、php還是存在較大的差別。本文首先複習這些天學的一些知識點，然後談一下如何一步一步到做一個線上實時填表的小應用，進一步鞏固一下這些個知識點。這裡先簡單介紹一下這個應用，班上經常要填一些電子統計表，要求每個人填對應的行，最後班長彙總出一個總表，這是非常麻... ...

　　學習nodejs三天，入了個門，感覺他和jsp、php還是存在較大的差別。本文首先複習這些天學的一些知識點，然後談一下如何一步一步到做一個線上實時填表的小應用，進一步鞏固一下這些個知識點。這裡先簡單介紹一下這個應用，班上經常要填一些電子統計表，要求每個人填對應的行，最後班長彙總出一個總表，這是非常麻煩的。這個應用就是要解決這樣一個問題，每個人在瀏覽器填表中的對應的行，然後生成一個彙總的表，這個應用的核心模塊是socket.io模塊。（筆者水平有限，如有不當，請各位園友批評指正。）

一、知識點複習篇

　　1、構建一個web伺服器

　　以前玩php和jsp時用過Apache、湯姆貓伺服器，nodejs則有不同，他是需要自己createServer。

//server.js
var http = require('http');

http.createServer(function(req,res){
    res.writeHead(200,{'Content-Type':'text/plain'});
    res.end('so easy!');
}).listen(1111,'127.0.0.1');

console.log('server runing at 127.0.0.1:1111...');

　　在瀏覽器訪問127.0.0.1：1111可以看到so easy！字樣。

　　這裡用到的時http模塊到createServer方法，node的模塊有三種，自有模塊，npm模塊，文件模塊。自有模塊直接用require,不帶路徑;npm模塊先要npm install, 然後像自有模塊那樣引入;文件模塊就是自己創建到模塊，要帶路徑引入。

　　2、從請求對象中獲取東西

　　上面到req是一個請求對象，包含了請求相關到信息,可以console.log出來看看，比較多，這裡簡單介紹。

　　(1)req.url

　　訪問http://127.0.0.1:1111其值為/

　　訪問http://127.0.0.1:1111/index/index.html?a=1#fd其值為/index/index.html?a=1（註意這裡沒有hash）

　　一般的，用url模塊解析其路徑，用querystring模塊解析其查詢參數，當然自己去分解字元串也是可以的。

　　3、作出響應

　　1中到res是http.ClientRequest 類的一個實例，他有很多方法。這裡介紹兩個。

　　（1）writeHead(status,{'key':value});這個方法用於寫響應header頭。

var http = require('http');

http.createServer(function(req,res){
    res.writeHead(200,{'Content-Type':'text/html'});
    res.end("<html><head><meta charset='utf-8'></head><body><h2>歡迎關註大～熊</h2></body></html>");
}).listen(1111,'127.0.0.1');

console.log('server runing at 127.0.0.1:1111...');

　　如果這樣寫，得到的響應的head中Content-Type就是text/html,響應數據作為html代碼被解析。

　　（2）end()

　　上面到這個例子已經用到這個方法，作用是將數據寫到響應報文的數據段。

　　4、讀寫文件

　　讀寫文件用到的時fs模塊。

　　（1）讀文件

　　　　fs.readFile(file[, options], callback)：非同步讀文件，回調函數有兩個參數，第一個錯誤信息，第二個是讀到的數據。數據可能是一個buffer，也可能是一個字元串。取決於options中到encoding

　　　　fs.readFileSync(file[, options])：同步讀文件，返回讀到到數據

　　　　具體可以看看文檔說明，關於同步和非同步，大～熊理解不太深入，也經常因為這個犯錯。同步是一種阻塞式的，必須讀完了後邊的事才可以做，非同步非阻塞的，一件事沒幹完後邊的事就可以做。

　　　　我在項目根目錄下建了一個1.txt文件，內容為“歡迎關註大～熊”;　　　

var fs = require('fs');

console.log(fs.readFileSync(__dirname+'/1.txt','utf8'));　　//指定了encoding
//歡迎關註大～熊

var fs = require('fs');

console.log(fs.readFileSync(__dirname+'/1.txt')); 　　　　//沒有指定encoding
//<Buffer e6 ac a2 e8 bf 8e e5 85 b3 e6 b3 a8 e5 a4 a7 ef bd 9e e7 86 8a>

　　非同步方法是類似的

var fs = require('fs');

fs.readFile(__dirname+"/1.txt",'utf8',function(err,data){
    console.log(data);
})

　　（2）寫文件

　　　　fs.writeFile(file, data[, options], callback)，非同步api，data可以是buffer也可以時String

　　　　fs.writeFileSync(file, data[, options])，同步api

var fs = require('fs');

fs.writeFileSync(__dirname+'/1.txt','大熊真帥！','utf8');

　　可以看到文件內容變成了‘大熊真帥！“.

　　5、node-xlsx模塊和socket.io模塊

　　前者是幫助我們處理excel表的，請參看https://github.com/mgcrea/node-xlsx

　　後者時封裝了實時通信的api，請參看https://github.com/socketio/socket.io

二、線上填表應用開發篇

　　1、完成效果

　　這裡在錄製gif時還存在一個問題，就是a用戶修改某一行中，b用戶中不會立即顯示更改後的數據，現已經改正，原來的時單播事件，改成廣播就好了。原計劃將代碼都貼出來分析分析，但是考慮到放一大段代碼似乎不太好，所以將其放到了github上https://github.com/yibingxiong/onlinetable/ ，下麵只簡單講一下思路，如果你需要看看源碼可以clone，我的github目前沒有star，如果你能成為第一個star，大～熊非常高興。

　　2、基本思路

　　（1）用戶初次鏈接時向伺服器發送一個connectin事件，這個事件是調用io()方法自動發送給伺服器的，無需主動調用，伺服器接受到這個事件後讀取excel文件，並用nodex-xlsx解析，然後調用自定義的一個changeStatus方法，這個方法時根據正在被修改的行的數組isOptRows（這個數組是所有用戶共用的，存儲正在被修改的行到行號）為每一行增加一個標識，0表示沒人在修改，1表示有人在修改。處理完成後向客戶端單播一個serverChange事件，同時攜帶處理後的數據，客戶端根據這些數據渲染出表格，將狀態為0的行置於可編輯狀態，狀態為1的行置於不可編輯狀態。

　　（2）用戶點擊編輯時，向伺服器發送一個enter事件，攜帶的數據為被編輯的行號。然後將該行數據變成編輯狀態，就是變成文本框，按鈕變成完成。伺服器收到enter事件後，取得其中的行號，加入到isOptRows數組，然後廣播一個事件broadcast，攜帶上行號，告知所有用戶"這個行有人在編輯，你不要編輯了",客戶端收到這個事件，將這一行變成不可編輯狀態。

　　（3）用戶點擊完成後向伺服器發送一個datachange事件，攜帶上修改後到新數據，同時將這一行變成正常狀態。伺服器收到datachange事件後，將對應行的數據更新，寫回到文件。寫完後發一個serverChange事件，攜帶上新的數據。同時從isOptRows中溢出完成修改的行的行號。

　　（4）思路總結一下，實現還是比較的簡單，不過用這個例子還是可以學習下如何進行實時通信，socket.io其實就是在伺服器和客戶端建立了一個交流的通路。如果將伺服器看作領導，客戶端看作員工，可以理解為領導可向單個員工發出指令（單播），也可以開個員工大會，向所用員工發出指令（廣播），反過來，員工也可以向領導反映情況。

三、談談入門nodejs的感受

　　javascript是個奇葩，nodejs更是一個奇葩。javascript裡邊可以一個函數裡邊套一個函數，他的繼承是基於原型的，他的數組時動態變化的......而nodejs將這門奇葩到語言搬到了服務端，奇葩歸奇葩，但是發自內心的說，他們非常靈活，也比較好玩。

　　關於nodejs適合io密集什麼的我不懂，但是感覺入門還是比較容易的，我看的是清華出版到Node.js開發實戰詳解（不得不吐槽：這本書的錯誤真多），兩三天就入門了。看了下後面的章節，感覺後邊難度會有所加大，不過萬物都是相通的，他和其他的比如php之類的還是會有很多共性的。

　　不得不提一下jade（現在叫pug）提供的模板引擎，他將我們美麗的html搞成了那個樣子確實讓人很不適應啊，相比之下更喜歡ejs這個模板引擎，發現他jsp長得好像啊，好像遇到舊友一般。

　　剛入門nodejs，關於文中的一些錯誤和不當之處還請各位園友多多批評指正。最後，如果你喜歡大～熊，請關註他。　