2014年12月26日 星期五

20141226 socket.io與express

遊戲設計：
先前有討論，不要一開始就給學生答案，於是我決定用jQuery 教學 - jQuery Tutorial這篇文章的$("p.neat").addClass("ohmy").show("slow");來show計算後的結果

測試與數據收集：
礙於時間壓力，沒辦法去建後端的資料庫，所以改用問卷的模式，昨晚睡覺時想到，可以採用以前彥儒碩班時，後來查看以前present的paper，確定是用NASA Task Load Index(TLX)
  • TLX量表。NASA Task Load Index(TLX)[15]設計此問卷，TLX是美國國家航空暨太空總署NASA針對太空梭駕駛員對於操作太空梭儀表板的認知負載程度量表，使用TLX
以跟老師談好，1/7號要把用什麼量表與評論的問法給老師，量表五分，使用評論十分。

選用node.js的論述，可把他寫到論文裡去

經驗累積：
今天在用npm安裝socket.io時一直失敗，經過測試後發現，假設有一個資料夾A，A下面有個資料夾B，B下面有個資料夾C。如果我想要在C裡面用npm來安裝modules，那麼我的A、B都不能安裝，若A、B安裝了，則要用npm uninstall [模組名稱]來解除安裝。
準備架server，讓他可以在其他台電腦讀。現在我手邊的參考資料是以前紀錄的筆記
在20141215 socket. io 基礎這篇，裡面有記錄socket.io與WebGL實作的內容。

Just Node.js - Node.js中文資源及學習筆記

Express 相關資料
Developer's Note: 在 Node.js 中的 MVC 架構 - Express
[教學] Nodejs 學習筆記 (4) -- express framework - clayliao.f2e
Node.js Web 框架 – Express安裝與初始化 @ 行路難 多歧路 :: 痞客邦 PIXNET ::
QQBoxy - 酷酷方盒子: ⓒPortable Node.JS+npm+express Windows開發環境建置
nodejs小问题：[1]express不是内部或外部命令_百度经验
[Node.js]重新安裝node.js和express的問題 @ 記憶所及之處 :: 痞客邦 PIXNET ::
Summer。桑莫。夏天: 使用Node.js + Express建構一個簡單的微博網站
使用Node.js + Express建構一個簡單的微博網站 « 駭客任務
node.js中的Socket.IO使用实例-jquery-爱编程

從Matttt的空間: npm操作這篇知道，express要安裝到全域上

node.js - Build Error when Installing Socket.IO on Ubuntu 14.04 - Stack Overflow

閱讀MiCloud Blogger: PHP 開發者轉換到 node.js 開發方向這篇時才確定，Node.js每個project都要重新安裝一次模組
  • 特別是每個 node.js 專案幾乎都需要重新安裝一次套件，這個部分對於 php 開發者是覺得神奇，而且浪費空間的事情
在node.js教學－利用Express來寫HTTP伺服器 | 電腦故我在這篇文章的留言提到，如果我想要讀取先前寫好的.html檔，只要透過app.use(express.static(__dirname));這方法即可讀取，於是我查看Express - api reference，搜尋" express.static"就可以看到，搜尋資料時看到Express框架 -- JavaScript 标准参考教程（alpha）這篇，這教學內容滿豐富的像是我一直想要改網址就可以用response.redirect方法。在Express框架這篇，搜尋static就有說明我們上面看的express.static。另外也可以參考图灵社区 : 阅读 : 解构app.js這篇。

今天我讀完了node.js教學－建立一個HTTP伺服器 | 電腦故我在、node.js教學－利用Express來寫HTTP伺服器 | 電腦故我在這兩篇後，接著讀Developer's Note: 在 Node.js 中的 MVC 架構 - Express這篇，釐清了不少node.js教學－利用Express來寫HTTP伺服器未講明的觀念，另外筆記一下，我們常看到server、client這兩個名詞，在這篇文章就有提到，所謂的client就是我們瀏覽器所看到的畫面，對於這篇文章所提到的get、post，可參考HTML 表單中 GET 與 POST 的用法差異 - Wibibi這篇。

找到Fire's web log: Express ( Nodejs ) 讀取檔案這篇談如何讀取網頁，雖然跟其他文章的寫法不太一樣，一直失敗一直失敗 =..=

後來讀到httpServer in node.js to serve three.js - Stack Overflow這篇文章時，推薦使用nodejs裡的connect module，後來讀到Node.js 的 http vs Connect vs Express - @ChingHanHo這篇才知道，express的能力比connect強 =..=。


參考socket.io - Three.js with Node.js on a server - how to load a TEXTURE? - Stack Overflow這篇後，發現需要用express，找了良久後發現以前找到的naotaro0123/3D_Socket · GitHub，用npm 安裝socket.io、express，之後開啟server後在chrome上面鍵入http://localhost:3001/index.html就能成功讀取
接著我們來查看位於D:\work\WebGL Learning\3D_Socket-master的這個3D_Socket-master project吧。
可以看到3D_Socket-master裡面有node_modules、public這兩個資料夾，以及當作server的server.js，接著我們點開public floder
裡面是我們一般WebGL project的內容，若是用express只要把WebGL的東西丟到public folder來即可。

為了方便測試，現在我把3D_Socket-master folder丟到D:\work\JavaScript\NodeJsPractice，並把folder改名為3DSocket，路徑：D:\work\JavaScript\NodeJsPractice\3DSocket。

經過測試後發現，要讓server能run的code其實非常短
var express = require('express'),
    http = require('http'),
    app = express();
app.use(express.static(__dirname + '/public'));
var server = http.createServer(app).listen(3001);
var io = require('socket.io'),
    io = io.listen(server);

現在來讀D:\work\JavaScript\NodeJsPractice\3DSocket\public\index.html。
如圖所示，他的寫法其實也跟我們過去寫的寫法一樣，把運作3D world的code另外用一個.js包起來，前面run能讓socket.io運作的<script src='/socket.io/socket.io.js'></script>，知道這些後我們可以開始來實作了

在實作時一直遇到Uncaught TypeError: Cannot read property 'style' of null這串紅字，找了良久後閱讀jQuery和Javascript对比（一） - 轩枫阁 – 前端开发 | web前端技术博客這篇文章時獲得靈感，一開始的時候我是把css的style放在最上層，接著才上DOMelements，請見D:\work\WebGL Learning\WG-map editions\WG-map 4th - add server\public\index.html
這就是問題所在，因為我們一開始就給它了DOM elements的css style，然後他要去找style時卻發現找不到，於是就開始無窮迴圈讀不到然後print出Uncaught TypeError: Cannot read property 'style' of null這串紅字。

只要我們先上DOM elements，接著再上這些DOM elements的CSS style就可以了 ^_^。請見
D:\work\WebGL Learning\WG-map editions\WG-map 5th success\public\index.html
終於，我們成功看到WG-map在網路世界初登場，感動啊~~~~~~~

張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)