2014年12月15日 星期一

20141215 socket. io 基礎

20141215 node.js入門，學習歷程 pt.2這篇的支線，換個口味學習。

學習資源：
兩篇io socket的文章

Three.js + socket.io
搜尋一些three.js與io socket相關的資料，下關鍵字：iosocket threejs - Google 搜尋，找到Real Time Multiplayer in HTML5 - Build New Games這篇文章之外，在GitHub上看到有io socket與three.js相關的code
一個socket.io + 3D scene and 3D monster，demo：http://simplecode.jp:3001/
NodeJs裡的fs module
jQuery
jQuery的學習，看了幾篇中文教學真的都不太順眼，有必要開第三條支線去codecademy上上課，評估只要花3hr，預計一個下午或一個晚上就可以KO了
MongoDB
一篇建議不要用MongoDB改用PostgreSQL
閱讀陳鍾誠老師在Node & js 學習筆記的貼文，關於資料庫的，除了久仰大名的mongoDB和IndexedDB外，知道兩個新的關鍵字：pouchdb與couchDB 。

學習開始：
從閱讀使用 Node.js 與 Socket.IO 建立即時性（Realtime）網頁應用程式 App - G. T. Wang這篇文章開始。實作於D:\work\JavaScript\NodeJsPractice\Basic Socket.IO這一個project。過去我們常寫response.writeHead(200, {'Content-Type': 'text/plain'});本篇是寫
response.writeHead(200, {'Content-Type': 'text/html'});在這邊有特別解釋，在此摘錄
  • 第一個參數是 HTTP 協定中三位數的 status code（例如找不到網頁就是 404），第二個參數則是指定標頭資訊中的各個欄位屬性，這裡指定 content type 為一般的文字或 html。
接著又介紹到常寫的response.write('Hello, World.');，write()裡面的內容就是我們要顯現的網頁內容。
前面的東西滿簡單的，照著code寫一寫時發現，好久沒用switch，看到switch裡頭的default，忘記是幹嘛用的，辜狗找了下面兩篇switch 條件判斷 | 良葛格、switch條件敘述的用法 | 電腦不難，default: //如果條件都沒有符合以上數值，就執行這個。實作時，寫到fs.readFile(__dirname + path, function(error, data){...});才知道__dirname是官方API的object，fs相關的參考Node.js 系列學習日誌 #22 - 核心模組檔案系統 fs - iT邦幫忙::IT知識分享社群這篇文章。

實作時發現他跟我說讀不到socket.io，想說奇怪，我不是已經安裝過了嗎

後來參考了Socket.io教學 | 電腦故我在、透過 socket.io 來建立人物移動聊天室、Build a Node.js Chat Application with Socket.IO on an Azure Website這三篇文章後發現，socket.io要用npm安裝在我們實作的project底下，且無法透過複製貼上來把socket放到所要用的project，由於用cmd執行npm指令時，他說我已經安裝過socket.io了，所以我就開個檔案try.js來測試看看，果然又不能run了。
終於寫socket.io的部分測試成功了，不過沒看到這篇文章說的終端機會顯示的文字：
info - socket.io starteddebug - served static content /socket.io.js
debug - client authorized
info - handshake authorized 1agc6iSouA2QymxUaZ0D
debug - setting request GET /socket.io/1/websocket/1agc6iSouA2QymxUaZ0D
debug - set heartbeat interval for client 1agc6iSouA2QymxUaZ0D
debug - client authorized for
debug - websocket writing 1::看文章時又提到"伺服器的終端機"這些詞。
(以下內容12/16新增)
今天這篇文章瀏覽到最後面時看到一個關鍵字：LX終端機，於是估狗之，資料不多 QQ
(以上內容12/16新增)

真的有必要去查一下如何不透過complier去開啟server.js，於是參考Node.js 初體驗、基礎的HTTP伺服器建立 « I try | MarsW這篇，實作後其實還滿簡單的，開啟cmd模式，在我們project的資料夾下，鍵入node server.js，就能成功開啟Server，
若想要關掉，只要鍵入Ctrl+c (在cmd指令下會顯示^c)或是直接關掉cmd模式
但是依舊沒有看到這篇作者所說的終端機文字，後來發現終端機的英文是Terminal....，已經讓Server在run了，WebStorm裡依舊沒有半點東西 QQ。
(以下2014/12/16新增)
進度到傳送資料至瀏覽器這節，如字面所說，這節是要學習把資料從伺服器傳到瀏覽器，一開頭就補充了一些知識，一般 Node.js 程式所使用的方式都是以callback function來處理。

一開始的時候，server與web的的頁面是互相獨立的

要讓我們的網頁連上server，才能從他處瀏覽我們的網頁，
可以透過sockets.on('connection', callback function)，connection 是一個由 Socket.IO 內建的事件，當瀏覽器端呼叫 io.connection() 之後，就會自動產生這個事件，Socket.IO 所擅長的其實是持續性的資料傳遞。

如上圖所見，在實作時，我長把與server連線起來的這步驟，sockets.io()少打了"s"
上面的圖其實還有錯，應該是sockets.on('connection',....)
再來記錄一下實作時遇到的小bug
稍微檢查一下發現我壓根沒傳值到這function的body裡的socket這variable去，所以在function的parameter加上socket就能run了
如果我們要發送資料出去要靠socket.emit()，要接收資料要靠socket.on()，可以參考Socket.io教學 | 電腦故我在
不過參考Socket.io教學在名稱上有一點打錯，在此要修正一下，首先下面這張圖討論傳的內容。
在實作的過程中，我想知道socket.html裡，data後取得的date來源是在哪邊?於是我以接收每分每秒的這段code稍做修改測試

測試結果，程式可以run，但無法接收到 new Date()，後來發現，如果我想要接收到emit()傳來的資料，那麼emit('資料名稱',...)與on('資料名稱',...)必須相同，不然收不到。
修正之後程式就能run了，以下是從web發訊息讓server接收的範例。

如此一來，在chrome按下F12，選Consloe就能成功看到從socket傳來的資訊
(以下2014/12/17新增)
HTML下的io.connect()，可以參考Socket.io教學的Socket.io網頁端基本這節，不過
不需要var socket = io.connect('http://some_server');
可以採用直接寫var socket = io.connect();即可

setInterval()函數，它可以讓指定的函數在指定的間隔時間下重複執行，第一個參數放我們要執行的動作，第二個參數放間隔時間，單位為milisecond(一秒)


讀到jQuery的code，有必要去學習jQuery，參考jQuery 教學 - jQuery Tutorial，先讀jQuery* 關於這節，設定時說到可以用google.load，於是找Google Loader Developer's Guide - Google Loader — Google Developers，參考Google Loader Developer's Guide實作時，jQuery使用1.9板，被告知讀不到

後來辜狗讀到javascript - google.load is loading the old version of jquery causing versioning issues - Stack Overflow這篇，才知道google.load的版本已經很舊了，而且他src的來源跟我們現在學習socket.io這篇文章的作者一樣，都是採用ajax.googleapis.com/ajax/libs。於是按照關鍵字去估狗後找到Google Hosted Libraries - Developer's Guide - Make the Web Faster — Google Developers這篇文章，原來Google Hosted Libraries對jQuery的支援已經到2.11版了，所以我們就直接用<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 吧，經測試已成功。

在閱讀看到引入的library有提到ajax，先閱讀了AJAX - 維基百科，AJAX全名「Asynchronous JavaScript and XML」非常清晰明瞭。但是維機太多東西了，所以改閱讀上手篇 - AJAX | MDN，知道Ajax 運用非標準的 XMLHttpRequest 物件，並配合伺服器端的 Script 進行通訊。Ajax 最吸引人之處在於它的〝非同步〞性質，這意味著 Ajax 能做各種動作，而無須更新整個頁面。如此便能透過使用者的事件更新頁面的一小部分，真的有必要再開支線來學習AJAX才對。

要取得 jQuery 物件也可以透過它提供的的另外一個縮寫符號 (別名)－錢字號「＄」，再來我們需要一些jQuery裡selector的基本知識，閱讀jQuery 教學 » 選取元素 (Selectors)這節，
語法：＄(selectors);。
  • tag selector：＄("a"); 就是取得頁面中所有的<a> elements。
  • id selector：＄("#container");，取得id為container的元素。
  • class selector：＄(".content");，取得class name為content的所有元素
在Socket.io教學的 傳送資料至伺服器這節看到的＄('#date').text(data.date);，可以參考jQuery 教學 » DOM 操作 (Manipulation) - jQuery Tutorial，＄(selectors).text();，是用來取得一個字串包含著所有匹配elements的純文字內容。

在我們學習socket.io文章的傳送資料至伺服器這節，jQuery的語法有用到ready、keypress，都可以在jQuery 教學 » 事件處理 (Events)這節找到，請善用Ctrl+F。實作keypress的部分時，看到一個新關鍵字charCode，估狗找到螞蟻的 JavaScript: event：特徵一節這篇按下Ctrl+F搜尋後閱讀知道，charCode是指按下鍵盤鍵onkeypress後產生的字母的Unicode值，IE 無此項功能；Firefox, Safari, Chrome 有支援。

有了這些知識後，我們可以來實作Socket.io教學的最後部分了，明天12/17從傳送資料至瀏覽器這節開始，今天12/17下午4:48終於第一次實作完成這篇了，接著要把這篇的內容模組化。

 (以上2014/12/16、12/17新增)




張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)