用 Vue.js + Firebase 製作即時聊天功能

這幾天在練習用vue & firebase刻一個仿line即時同步聊天的功能，
直接初體驗vue.js + firebase + webpack三種願望一次滿足XD！

update: 20170923更新
[用 Vue.js + Firebase 製作即時聊天功能(2) - storage]
(https://guahsu.io/2017/09/vue-firebase-realtime-line-chat-2-storage/)

>DEMO<

>原始碼-GitHub<

這幾天想到就會再稍微更新，GitHub與下方文章可能會略有不同

環境設定步驟

1. 首先安裝node.js，理論目前的版本都會有內建npm了。

   下載位置：https://nodejs.org
   可以透過node -v及npm -v來查證是否已安裝完成node與npm。

2. 安裝vue-cli，透過指令npm install --g vue-cli安裝。

   可以透過vue -V來查證是否已安裝完成(-V是大寫唷)。

Vue-cli & webpack

1. 先起一個資料夾來存放專案，並進入該資料夾內，
2. 接著建立專案，透過vue-cli可以透過指令直接建立一包專案，
   這裡我們使用指令vue init webpack來建立webpack的專案包。

   安裝vue-cli後，可以在命令列下vue list列出可用的template
   建立專案使用vue init <template>這次用到的是webpack。

3. 建立設定項目:[]<方框內的是我的設定選項

   ? Generate project in current directory? //建於當前資料夾[Yes]
   ? Project name (folder_name) //專案名稱，注意需小寫 [自訂專案名稱]
   ? Project description A Vue.js project //專案描述 [自訂描述]
   ? Author //作者，預設抓當前環境git user [自訂]
   ? Vue build standalone [Enter]
   ? Install vue-router? //安裝vue-router [Yes]
   ? Use ESLint to lint your code? [No]
   ? Setup unit tests with Karma + Mocha? [No]
   ? Setup e2e tests with Nightwatch? [No]

4. 當環境建立好後，輸入指令npm install使相依套件都下載到當前專案中

5. 主要目錄結構：

   |- build (webpack的設定檔)
   |- config (專案設定檔)
   |- dist (編譯後產出的位置)
   |- src (專案程式碼目錄)
     |- assets (其他 css, js, images)
     |- components (主要 vue 元件)
     |- router (vue 的路由器)
     |- App.vue (主要樣版檔)
     |- main.js (vue js 主檔案)
   |- index.js 靜態首頁(進入點)

Firebase

1. 建立一個專案
2. 將Firebase的連結資訊複製起來
3. 進入Database
4. 修改權限並發布

vue-router設定

1. 到index.html把firebase剛才複製的那串載入至head中
2. 到router/index.js修改程式:
   vue-router是vue的路由器，備註內部使用方式如下：

   import Vue from 'vue'
   import Router from 'vue-router'
   //載入元件ChatRoom
   import ChatRoom from '@/components/ChatRoom'
   
   Vue.use(Router)
   export default new Router({
     routes: [
       {
         //路徑用於網址列
         path: '/',
         //name用於設定連結，例如樣板頁中可用下面方式來寫連結，就不用寫<a>掛path了
         //<router-link :to="{ name: 'ChatRoom' }>ChatRoom Page</router-link>
         name: 'ChatRoom',
         //到這個ChatRoom(/)時，使用ChatRoom元件
         component: ChatRoom
       }
     ]
   })

而routes內是陣列包覆物件，所以要再新增一個就只要透過逗號(,)的物件新增方式即可，
而router的結果都會被呈現在<router-view></router-view>中(參考main.js)。

在我的程式碼中，Hello已被替換為ChatRoom(預設範例為Hello)
其實這個練習中目前並沒有實際用到router的功能，因為僅載入一頁XD。
詳細設定可參閱官方文件vue-router 2官方文件

流程

1. 輸入使用者名稱後才能發文
2. 然後自己的發文是綠底，其他人是灰色(跟line一樣)
3. 就這樣XD
4. (傳圖功能請參考第二篇->用 Vue.js + Firebase 製作即時聊天功能(2) - storage)

主程式撰寫ChatRoom

1. 到components/ChatRoom.vue(預設是Hello.vue我改名了)
2. HTML與JS都有用到vue的寫法，我將撰寫的程式已備註如下：

   <template>
     <div class="container">
       <!-- 區塊：name area -->
       <div class="name">
         <h3>Name：{{ userName }}</h3>
         <!-- 註解：使用@click來偵測click，觸發時執行method中的setName() -->
         <div class="reset" @click="setName()">Reset Name</div>
       </div>
       <!-- 區塊：chat room -->
       <div class="chatRoom">
         <!-- 區塊：head -->
         <div class="roomHead">
           <div class="roomHead__topButtons">
             <div class="roomHead__button close"></div>
             <div class="roomHead__button minimize"></div>
             <div class="roomHead__button zoom"></div>
           </div>
           <img src="https://lorempixel.com/50/50/" class="roomHead__img" draggable="false">
           <div class="roomHead__title">Test Room</div>
         </div>
         <!-- 區塊：body -->
         <div id="js-roomBody" class="roomBody">
           <!-- 註解：使用template來當迴圈容器，或是判斷用的容器，當條件達成時產出template內容 -->
           <template v-for="item in messages">
             <!-- other people -->
             <template v-if="item.userName != userName">
               <div class="messageBox">
                 <img src="https://lorempixel.com/40/40/" class="messageBox__img" draggable="false">
                 <div class="messageBox__content">
                   <!-- 註解：Vue使用雙花括號{{}}來顯示script中data:的資料 -->
                   <div class="messageBox__name">{{item.userName}}</div>
                   <div class="messageBox__text">{{item.message}}</div>
                 </div>
                 <div class="messageBox__time">{{item.timeStamp}}</div>
               </div>
             </template>
             <!-- 區塊：self -->
             <template v-if="item.userName == userName">
               <div class="messageBox messageBox--self">
                 <div class="messageBox__time messageBox__time--self">{{item.timeStamp}}</div>
                 <div class="messageBox__content messageBox__content--self">
                   <div class="messageBox__text messageBox__text--self">{{item.message}}</div>
                 </div>
               </div>
             </template>
           </template>
         </div>
         <!-- 區塊：bottom -->
         <!-- 註解：使用:class來寫class是否顯示的判斷式{ class: 判斷式 } -->
         <div class="roomBottom" :class="{ disable: !userName }">
           <div class="roomBottom__tools"></div>
           <div class="roomBottom__input">
             <!-- 若要再帶入原生js的event(e)到function中，必須使用$event當參數傳入 -->
             <textarea id="js-message" class="roomBottom__input__textarea"
                       :class="{ disable: !userName }"
                       @keydown.enter="sendMessage($event)"></textarea>
           </div>
         </div>
       </div>
       <!-- 區塊：modal -->
       <div id="js-modal" class="modal">
         <div class="modal__container">
           <header class="modal__header">
             <h2 class="view-title">輸入名稱</h2>
           </header>
           <div class="modal__body">
             <!-- 註解：使用@keydown.enter來偵測keydown enter，觸發時執行method中的saveName() -->
             <input type="text" id="js-userName" class="userName" maxlength="6" @keydown.enter.="saveName()">
             <div class="button" @click="saveName()">設定</div>
           </div>
           <footer class="modal__footer"></footer>
         </div>
       </div>
     </div>
   </template>
   
   <script>
   // msgRef = firebase中的資料表/messages/，若沒有的會自動建立
   const msgRef = firebase.database().ref('/messages/');
   export default {
     // 指定此頁使用的name
     name: 'ChatRoom',
     // 資料位置，於html中可用{{}}渲染出來
     data() {
       return {
         userName: '',
         messages: []
       }
     },
     // 這個頁面的functions
     methods: {
       /** 彈出設定視窗 */
       setName() {
         document.querySelector('#js-modal').style.display = 'block';
       },
       /** 儲存設定名稱 */
       saveName() {
         // vue的mtthod中this是指export中這整塊的資料
         const vm = this;
         const userName = document.querySelector('#js-userName').value;
         if (userName.trim() == '') { return; }
         // 這裡的vm.userName(this.userName)就是data()裡面的userName
         vm.userName = userName;
         document.querySelector('#js-modal').style.display = 'none';
       },
       /** 取得時間 */
       getTime() {
         const now = new Date();
         const hours = now.getHours();
         const minutes = now.getMinutes();
         const format = (hours >= 12) ? "下午" : "上午";
         return `${format} ${hours}:${minutes}`;
       },
       /** 傳送訊息 */
       sendMessage(e) {
         const vm = this;
         let userName = document.querySelector('#js-userName');
         let message = document.querySelector('#js-message');
         // 如果是按住shift則不傳送訊息(多行輸入)
         if (e.shiftKey) {
           return false;
         }
         // 如果輸入是空則不傳送訊息
         if(message.value.length <=1 && message.value.trim() == '') {
           // 避免enter產生的空白換行
           e.preventDefault();
           return false;
         }
         // 對firebase的db做push，db只能接受json物件格式，若要用陣列要先轉字串來存
         msgRef.push({
           userName: userName.value,
           message: message.value,
           // 取得時間，這裡的vm.getTime()就是method中的getTime
           timeStamp: vm.getTime()
         })
         // 清空輸入欄位並避免enter產生的空白換行
         message.value = '';
         e.preventDefault();
       }
     },
     // mounted是vue的生命週期之一，代表模板已編譯完成，已經取值準備渲染HTML畫面了
     mounted() {
       const vm = this;
       msgRef.on('value', function(snapshot) {
         const val = snapshot.val();
         vm.messages = val;
       })
     },
     // update是vue的生命週期之一，接再munted後方代表HTML元件渲染完成後
     updated() {
       // 當畫面渲染完成，把聊天視窗滾到最底部(讀取最新消息)
       const roomBody = document.querySelector('#js-roomBody');
       roomBody.scrollTop = roomBody.scrollHeight;
     }
   }
   </script>
   
   <style scoped>
   /* CSS太多，不占版面放於github供參考 */
   </style>

執行與編譯

1. 使用指令npm run dev來讓這專案在本機掛server起來(預設8080port)，
   之後每次調整檔案內容，網頁就會自動刷新，非常方便開發及測試:D!
2. 編譯使用npm run build會將src中所撰寫的資訊都壓縮至dist資料夾內。

   稍微備註，編譯後的index在載入js/css時的路徑有多一個.，
   會導致放靜態主機時讀取錯誤(因為其實是在同一層)，
   所以可以到config/index.js中將設定調整為assetsPublicPat = ''來解決

心得

目前還有卡著JS30尚未練習及寫完心得，
但看著各路大神分享的資源，就一直很想寫看看XD
vue-cli & firebase & webpack都是第一次使用，
這個練習後，對這三神器終於有很基礎的理解了。

vue.js

我最初會想學習vue是因為有中文文件(遮臉)，
以及方便載入(可以直接掛載一個vue.js在html中來使用，像jQuery一樣)，
目前這專案我學習到的是HTML中的template及v-if/v-for，
以及on(@),bind(:)的用法，很方便可以組織動態的前端邏輯，
而不用在js中組大量的字串模板。

在js控制中，我覺得生命周期的設定很棒，
可以很方便且”清楚”的在預想的狀況中設定應該出現的效果，
例如整個渲染完成前可以掛一個加載的效果等等..

但這小練習我都把邏輯整在同一個vue中，
還未學到/使用在vue中正確拆分邏輯的做法。

Firebase

之前有稍微聽過被google合併，但就僅此於而已此從未使用及了解過XD
這次練習中使用到的database覺得很新奇阿，是一個雲端即時同步的noSQL，
設定非常簡單方便，也是第一次親身寫出/感受到websoket的效果感(超酷)。
其他相關的功能也很多，之後有機會一定要在多研究一下(越來越多待讀項目..)

Webpack

一直有聽到，看過，但從未使用過，
但其實這次使用後的算是知道如何使用，但不了解內容，
對於設定檔目前沒有細讀，並不是很熟悉各相關設定檔，
反而覺得最特別的是熱加載及編譯後的程式碼壓縮混淆!
但日後練習都用webpack起，遇到問題找解答，應該會越來越熟吧XD

感謝

六角學院放出的Vue教學系列，從幼幼班入門到vue-cli & firebase介紹，
讓我能從零學習相關知識，從而建立完這個練習:)

六角學院在本週日也要釋放Bootstrap的課程了！
但不知何時才有空可以把全系列看過並實作完啊QQ….

六角學院-FB
洧杰老師-FB
卡斯伯老師-FB