聊天室( 前後端實作) - Webduino 實戰智慧插座教學

上一篇我們已經做出一個基本的網頁聊天室，這篇要來做兩件事情， ... 然後就可以開始聊天控制燈泡，不論在燈泡、前端、後端或是資料庫，都可以看到即時的變化。

聊天室(前後端實作) 上一篇我們已經做出一個基本的網頁聊天室，這篇要來做兩件事情，第一件事情「和燈泡聊天」，第二件事情則是「美化聊天室」。

我們剛剛做的那個頁面可以完全不用更動，重點在要設計另外一個頁面給燈泡使用(其實就是你用頁面A，燈泡用頁面B和你聊天，這樣才有聊天室的感覺)。

撰寫燈泡的聊天程式(網頁前端) 因為對於燈泡來說，對話的內容不需要顯示出來，只需要在程式內容撰寫對應的邏輯，所以這邊就純粹用console印出內容，不過因為要透過Webduino控制智慧插座，所以一開始在HTML的部分要先引入對應的JavaScript。

JavaScript一開始先對變數做宣告，主要就是初始化Firebase資料庫。

(記得要用自己的資料庫！) varfirebase; varled; varconfig={ databaseURL:"你的資料庫網址" }; firebase.initializeApp(config); vardatabase=firebase.database().ref(); 然後寫一個獲取時間並且可以自動判斷「如果是個位數就補零」的流程，待會會用到。

functiongetTime(){ vardate=newDate(); varh=date.getHours(); varm=date.getMinutes(); vars=date.getSeconds(); if(h<10){ h='0'+h; } if(m<10){ m='0'+m; } if(s<10){ s='0'+s; } varnow=h+':'+m+':'+s; returnnow; } 再來就是裝置開發板的程式，這邊先宣告智慧插座是接在板子的10號腳上，一開始會出現連線中的提示，然後「當裝置上線之後」，就會觸發database.push這一段程式，也就是會發一段「我上線囉！」的訊息進資料庫，也因為資料庫有變動，有連接資料庫的聊天室就會收到燈泡上線的訊息。

boardReady('evkG',function(board){ board.systemReset(); board.samplingInterval=250; led=getLed(board,10); console.log('裝置連線中...'); database.push({ name:'智慧燈泡', content:'我上線囉！', time:getTime() }); //主程式... }); 在還沒有寫主程式的狀況下，我們讓裝置上線，這時候就會在聊天室裡頭收到智慧燈泡說「我上線囉！」的訊息。

最後就是主程式，一開始先設定一個event的陣列物件，裡面放入收到指定的訊息(text)後，智慧插座要做的對應行為(fn)，還有燈泡要回覆的訊息(msg)，接著使用Firebase的.limitToLast(1)，來獲取最後一筆訊息，然後內容作出對應的判斷，當然這邊寫的判斷非常簡單(單純判斷有沒有包含文字)，如果有興趣也可以寫得複雜些。

varevent=[ { text:'開燈', msg:'燈泡已經打開！', fn:function(){led.on();} }, { text:'關燈', msg:'燈泡已經關起來了！', fn:function(){led.off();} }, { text:'閃爍', msg:'一閃一閃亮晶晶~', fn:function(){led.blink(500);} } ]; database.limitToLast(1).on('value',function(snapshot){ vars={}; for(variinsnapshot.val()){ s=snapshot.val()[i]; console.log('('+s.time+')'+s.name+'說：'+s.content); for(varjinevent){ if(s.content.indexOf(event[j].text)!=-1){ event[j].fn(); database.push({ name:'智慧燈泡', content:event[j].msg, time:getTime() }); } } } }); 完整程式碼：http://bin.webduino.io/budiw/2/edit?html,js,output 完成之後讓裝置上線，在聊天室打「開燈」、「關燈」或「閃爍」，就可以看到燈泡作出對應的變化，而且燈泡也會把當前的狀態回報在聊天室裡面。

撰寫燈泡的聊天程式(網頁後端) 剛剛看到的是網頁前端的做法，雖然很方便但某種程度上也會受限於瀏覽器，如果你會使用Node.js的話，我們就可以讓燈泡聊天的程式跑在後端運作，要使用Node.js首先必須安裝Node.js Node.js：https://nodejs.org/en/download/ 基本上現在安裝完成之後就會連同npm(nodepackagemanager)一起安裝，透過npm我們就可以安裝對應的package，打開指令輸入工具，進入開發的目錄，安裝webduino-js、webduino-blockly和firebase。

(Mac可能要用sudo開頭) npminstallwebduino-jswebduino-blocklyfirebase 安裝好了之後應該會看到目錄下多一個node_modules的資料夾，裡面包含了所需要的程式內容。

接著建立一個名為index.js的檔案，一開始先require對應的package，後面的程式基本上就把剛剛寫的完全複製貼上就可以了。

require("webduino-js"); require("webduino-blockly"); varfirebase=require('firebase'); 編輯完成存檔之後，在指令輸入nodeindex，就可以透過Node.js操控智慧插座上頭的燈泡，我們在前端網頁的聊天室，也就會看到出現燈泡上線的訊息。

然後就可以開始聊天控制燈泡，不論在燈泡、前端、後端或是資料庫，都可以看到即時的變化。

美化聊天室 到這邊為止基本上已經幾乎完成所有的工作，最後一步就是美化一下聊天室，而美化的工作幾乎全部都在CSS身上，為了讓設計的結構更完整，這邊稍微調整了一下HTML，目的是「讓輸入框在最底下，而訊息顯示在上方」。