nodejs-07 製作聊天室02 socket.io的應用

在安裝目錄下的node_modules\socket.io\node_modules\socket.io-client\dist\資料夾下,可以找到socket.io.js,client端(Html)需要include這支js。
找到這支後,讓html include它,也就是在html加入這一行:

接下來我們就可以寫Code了
client端(html):index.html


<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>nodejs-07 製作聊天室02</title>
  <script src="socket.io.js"></script>
 <script>
  var socket = io.connect('http://localhost:8889');//1.client要求連線
  socket.on('connect',function(){//3.client收到連線通知
   alert('connect');
   socket.emit('ClientCallServer');//4.emit傳送訊息給server,第一個參數是名稱,第二個之後的參數是要傳給server的值,這個範例是不傳值
  });
  socket.on('ServerCallClient',function(){//7.收到server的呼叫
   alert('ServerCallClient');
  });
  socket.on('disconnect', function(){//11.收到Server斷線事件
   alert('server主動斷線');
  });
 </script>
 </head>
 <body>
 測試頁
 </body>
</html>
SERVER端:index.js
var io = require('socket.io').listen(8889);//監聽8889port
io.sockets.on('connection', function (socket) {
 console.log('connect'); //2.收到client的連線
 socket.on('ClientCallServer',function(){
  console.log('5. get client data'); //5.收到client的呼叫
  socket.emit('ServerCallClient'); //6.送資料給client
 });

 socket.on('disconnect', function(){
  console.log('client 斷線'); //9.收到client斷線
 });

 setTimeout(function(){//10.server主動斷線//這是測試用,4秒後server主動斷線
  console.log('server送斷線訊息');
  socket.emit('disconnect');
 },4000);

});

簡單的說,不論cliet端或seerver端,emit就是送出命令;on就是接收命令,socket.io已經把一些常用的東西整合好方便使用了,但我測試下來,對於斷線還是有些bug,尤其是ie,server可能會收不到client傳來的命令,看來這點要再想辦法解決
Category: 0 意見

nodejs-06 製作聊天室01 安裝套件-socket.io

接下來這幾篇要來寫聊天室的製作,首先要先裝socket.io。
socket.io網站: http://socket.io
中文介紹:http://ithelp.ithome.com.tw/question/10102886
開啟command視窗,輸入npm install socket.io 然後就會自動下載並安裝。
這東西我是直接把它當成server的概念來看待,安裝完後,我希望完成client跟server的互動如下圖:

Category: 0 意見

nodejs-05 安裝套件-supervisor

每當一改nodejs的程式後,想要測試時,就一定要把command視窗關掉,然後再開啟重新執行,若是路徑設得比較深入的人…真的光輸入路徑就浪費掉好多時間需按下Ctrl+C,重新啟動,幸好網路上已經有方便的套件可以使用,幫助我們解決這種困擾,安裝supervisor套件就是一個解決方法。

supervisor網站
https://github.com/isaacs/node-supervisor

開啟command視窗,輸入npm install supervisor -g 然後就會自動下載並安裝








安裝完後,要使用supervisor 程式名稱.js來取代之前用node 程式名稱.js
例如前面的範例的程式檔名都是index.js 所以我都是執行 node index.js,現在的話,就是改成執行 supervisor index.js來啟動程式。

之後若是有修改index.js,就不用再重新啟動command視窗,它會自動更新。

 ps.
以後如果想安裝其它套件,只需要輸入下列語法:

npm install 套件名稱 -g 

其中-g指的全域安裝,不論你的程式在那裡,都可以使用這個套件;
若是非全域安裝的話,就要注意你指行install指令的命令下在那個資料夾,那就只有那個資料夾有安裝套件。
Category: 0 意見

nodejs-04 讀取靜態資料(網頁、圖片等)

修改nodejs-03的程式碼:
server端的主程式:index.js
var fs=require('fs');
var http=require('http');
http.createServer(function(req,res){
 console.log(req.url);
 var url=req.url.substr(1);
 console.log(url);
 fs.readFile(url,function(err,data){
  if(err){
   res.writeHead(400);
   res.end();
  }else{
   res.writeHead(200);
   res.end(data);
  }
 });
}).listen(8888);

解說:
console.log(req.url);
//createServer的function帶兩個變數:req、res
//req:跟http request 相關的所有資料
//res:跟http response 相關的所有資料
//req.url可以抓到在瀏覽器開啟時,要求的檔案路徑是什麼,ex:http://localhost:8888/index.html,抓到的就是/index.html

var url=req.url.split('/');
//req.url第一個斜線拿掉,fs.readFile只需要後面的路徑

res.writeHead(400);
res.end();
//找不到擋案時,head回傳錯誤狀態400,讓前端導向找不到網頁
Category: 0 意見

nodejs-03 讀取靜態html、fs組件

server端的主程式:index.js var fs = require('fs');
var http=require('http');
http.createServer(function(req, res) {
fs.readFile('index.html', function(err, data) {
if(err) {
res.writeHead(200);
res.end('no index.html');
} else {
res.writeHead(200);
res.end(data);
}
});
}).listen(8888);
解說
var fs = require('fs');//使用fs模組,開啟檔案相關用的
fs.readFile('index.html', function(err, data) { //讀檔,err:錯誤;data:讀得的檔案
res.writeHead(200); //我看網路上寫500,會顯示'找不到網頁',我想要顯示只自己的文字,所以改成200
res.end(data);//顯示index.html的檔案
靜態網頁:index.html
只要是html檔,內容隨意
Category: 0 意見

nodejs-02 在網頁顯示hello~、關於 require('http')、callback

callback的觀念參考:http://www.nodebeginner.org/index-zh-tw.html
server端的主程式:index.js var http=require('http');
http.createServer(function(req,res){
console.log("http request running...");
res.writeHead(200,{"Content-Type":"text/plain"});
res.end('hello~~');
}).listen(8888);
console.log("index.js running...");
在chrome或ie上執行http://localhost:8888/或127.0.0.1:8888,觀察執行結果

解說:
var http=require('http'); //載入http模組,nodejs內建,類似php的include、as的import
http.createServer(function(req,res){ //req:HTTP request的所有資料;res:HTTP response的所有資料
console.log("http request running...");//當有連線需求時,便會執行
res.writeHead(200,{"Content-Type":"text/plain"});//HTTP標頭檔狀態碼,200是指成功
res.end('hello~~');//在網頁端顯示hello~
}).listen(8888);//監聽8888port
console.log("index.js running...");//server執行成功時執行

關於HTTP標頭檔的狀態碼:
中文參考網址http://thobian.info/?p=318
英文詳細狀態碼http://en.wikipedia.org/wiki/List_of_HTTP_status_codes
200 用來表示請求成功.
300 來表示重定向.
400 用來表示請求出現問題.
500 用來表示伺服器出現問題.

[[2015-05-24補充 同步與非同步]]
1.建立一個文字檔,存成file.txt,內容為This is my file....
2. 非同步
2.1建立readfile.js,內容為:

var fs=require('fs');
fs.readFile('file.txt','utf-8',function(err,data){
if(err){
console.error(err);
}else{
console.log(data);
}
});
console.log('end');

2.2執行結果為:
end
This is my file....

3.同步
3.1建立readfilesync.js,內容為:
var fs=require('fs');
var data=fs.readFileSync('file.txt','utf-8');
console.log(data);
console.log('end');

3.2執行結果為:
end
This is my file....

4.會發現readfile.js跟readfilesync.js產生的結果順序不同,書上提到並非所有的api都提供同步跟非同步的版本,node.js並不推同步I/O
Category: 0 意見

nodejs-01 hello~

1.第一支NodeJS程式檔
1.1用文字檔建立一支hello.js檔,內容為 console.log('Hello');
1.2執行Node.js command promot後,使用cd 指令進入檔案所在目錄
1.3輸入node hello.js 出現Hello
1.4關於console
console是Node.js提供的主控台物件
console.log是最常用的輸出指令,類似C語言的printf、php的echo
1.5關於Node.js command promot的node指令
1.5.1執行Node.js command promot後,輸入node --help 會顯示關於node指令的用法:

node [options] [ -e script | script.js ] [arguments]
node debug script.js [arguments]

裡面看到[ -e script | script.js ] 表示這裡可以輸入"-e script"或者是"js檔名"
-e script的用法,參nodejs-00 前言的2.2跟2.3
js檔名的用法,就是本章上面的1.3

2.介紹REPL(Real-eval-print loop)模式
2.1所謂REPL,就是"輸入-求值-輸出"的迴圈,方便測試模組用
2.2參nodejs-00 前言的 3.測試是否安裝成功(使用 Node.js)

3.建立HTTP伺服器
3.1建立app.js,內容為
var http=require('http');
http.createServer(function(req,res){
res.writeHead(200,{'Content-Type':'text/html'});
res.write('Node.js');
res.end('Hello
');
}).listen(3000);
console.log("HTTP server is listener at port 3000");

3.2執行Node.js command promot後,使用cd 指令進入檔案所在目錄,執行app.js,出現 HTTP server is listener at port 3000,表示伺服器運作正常
3.3開啟瀏覽器,網址輸入http://localhost:3000/,便會顯示頁面
3.4發現它不會像1.的範例hello.js一樣執行後會立即退出,要按Ctrl+C才會結束,因為這建立了事件監事器,使得nodejs不會退出事件迴圈

4使用supervisor快速開發
4.1修改app.js裡html的內容後,再重新整理瀏覽器,會發現內容沒改變,一定要終止Node.js command promot後,再重新執行才有效,這是因為nodejs只有第一次執行才會解析script,之後都存取記憶體,這種方式效能較高,但開發階段麻煩,因此使用supervisor套件來幫助
4.2執行Node.js command promot,輸入npm install -g supervisor
(套件安裝說明參考 nodejs-05 安裝套件-supervisor)
Category: 0 意見

nodejs-00 前言

關於nodejs,本來想寫很詳細,安裝步驟、每一行程式的意義,但…認真寫下去的話,不知道要寫到何時,網路上也已經滿多資料的了,所以...就只留下別人寫好的連結,方便自己查詢用
基本概念
http://mitblog.pixnet.net/blog/post/37525108
安裝並執行第一個程式
http://mitblog.pixnet.net/blog/post/37599366


[2015-05-23]新增自己安裝步驟筆記
1.安裝NodeJS(Windows版)
進入 https://nodejs.org/,點Install,下載msi檔,一直按"Next"安裝

2.測試是否安裝成功(使用 Node.js command promot)
2.1執行Node.js command promot

2.2輸入 node -e "console.log('Hello');" 出現 Hello
2.3輸入 node -e "console.log(3+5);" 出現 8

3.測試是否安裝成功(使用 Node.js)
3.1執行Node.js
3.2輸入 'Hello' 出現 'Hello'
3.3輸入 3+5 出現 8


4.安裝nvm(多版本管理員)
略(書本 p.2-9~2-13 因提到它不支援windows,先跳過)
Category: 0 意見