---
tags: Vue3 新手夏令營
---
# Vue + Firebase 即時聊天室
## 你要先知道的事
>**firebase 的詳細功能有哪些在此不贅述，可以去看加碼第五週的主線筆記～六角副校長卡斯伯打得很用心❤️**
正常情況下 要與資料庫交互 都會是由前端發出一個請求給後端
然後當後端收到請求就會給予響應 與數據庫交互的部分會由後端進行處理
但在使用 firebase 時則不是這樣的哦！
firebase 會先建立一個 web socket
他可以不斷跟 web server 互相聯繫 使 web server 能無限發送回應給前端
此時前端就只需要一直監聽是否有發過來的響應並進行處理即可
使用 firebase 時前後端一樣會建立一個連線 且只要連線建立成功就可不斷發送響應
firebase 主要就是先建立連線，建立後就可以不斷地從資料庫取得資料了
## 直播影片實作的 Vue + firebase 教學
1. 使用你超方便的 Google 帳號到 Firebase 登入服務
2. 首先要建立一個專案 專案名稱自己看得懂即可(副校是打 hexschool-demo)
3. 進入專案後先到設定裡面把 CDN 的內容貼到你的 .html 的 body 最下方
4. 回到 firebase 點擊左邊選單的 realtime database
5. 建立你的 realtime database
6. 到 [Firebase CDN 連結](https://firebase.google.com/docs/web/setup#expandable-8) 找到 realtime 的 scritp 引入方式 貼在引入 Firebase 那段的任意位置(反正記得貼就對惹)
7. 可以開始寫程式了 我們前往下一章
>**擔心 Config 內容流出的話可使用 Authentication 改成用戶有登入才授權使用資料庫的方式建立**
### 第一章：先串連到服務
```javascript=
// 這是雅萱的 不要亂複製 示意就好
var firebaseConfig = {
apiKey: "AIzaSyCiIDLjTl65lugnCvaoe-1xsN-NEs1fjow",
authDomain: "online-chatroom-demo.firebaseapp.com",
// 這個 databaseURL 一定要記得加入哦！！！！
databaseURL:
"https://online-chatroom-demo-default-rtdb.asia-southeast1.firebasedatabase.app",
projectId: "online-chatroom-demo",
storageBucket: "online-chatroom-demo.appspot.com",
messagingSenderId: "938520106251",
appId: "1:938520106251:web:649b16c56f38d614527e0e",
measurementId: "G-NVZQJWM59K"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
// 上面一大段全部都是 CDN 複製過來的
// 往下第一步設置 db 為 firebase 的 realtime database
const db = firebase.database();
// 第二步 用 ref 抓到對應的資料庫名稱
const msgRef = db.ref("message");
// 第三步 用 on 連結到資料庫
msgRef.on("value", (snapshot) => {
console.log(snapshot.val()); // 這個就是我們資料庫中的數據囉
});
```
### 第二章：結合 Vue(直播寫 option API 所以我寫另一種)
1. 先用 ESM 引入 Vue3
2. 我們只會用到 CreateApp ref onMounted 所以 import 這三個東西進來
3. 打電話給副校要版型(省事👍) 來貼
4. 開始起手式 setup(){ return {}; }
5. 宣告 username(用來保存當前使用者名稱 所以是空字串)
6. 宣告 chatroom(用來保存所有資料庫的資料 所以是空陣列)
7. 宣告 message(用來保存當前使用者輸入的訊息內容 所以是空字串)
8. 宣告 tempUsername(用來保存當前的使用者輸入的名稱且尚未按下開始使用 即名稱鎖定前的值 也是空字串)
9. 把上述宣告的 data 都放到 return 裏面
10. 先到空白模板中把這些 data 綁定到正確的位置(username 不會綁定在 DOM 身上 其他都要綁 這邊大家自己來哦都上五週了你可以ㄉ👍)
11. 接下來開始寫 methods ，兩個方法分別為 addMessage、addUsername
12. addMessage 就是把這個人的名字和輸入訊息和輸入時間全部傳給資料庫哦 下面會附上代碼～
13. addUsername 就是把輸入的名稱(tempUsername)設置為用戶名稱(username)
14. 方法中使用到 data 記得要改成 .value 獲取值
15. 最後就是把剛才的那個 `msgRef.on()` 改寫在 onMounted 方法中渲染數據庫資料到畫面了
* 上述宣告 data 的部分皆使用 const 變數名 = ref(設置的變數內容)
* 宣告 methods 的部分皆使用 const 方法名 = function(){ 方法程式碼 }
* 所有宣告除了 onMounted 外皆要記得放進去 setup 的 return 裏面
### 第三章：附上程式碼
前面貼入 Firebase CDN 的部份省略
往下內容如下：
```javascript=
// 這兩個保留放在這邊 第三個那個 msgRef.on() 改放在 Vue 裏面
const db = firebase.database();
const msgRef = db.ref("message");
// 往下開始寫 Vue的 API
import {
createApp,
ref,
onMounted
} from "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.0-beta.7/vue.esm-browser.min.js";
createApp({
setup() {
// date
const message = ref("");
const username = ref("");
const chatroom = ref([]);
const tempUsername = ref("");
// methods
const addUsername = function () {
username.value = tempUsername.value;
};
const addMessage = function () {
// 這是 firebase 的內建幫我們建立亂數的 key
const key = msgRef.push().key;
// 這邊是把數據推到 realtime 資料庫中的 message 這個資料集合(不確定這詞有沒有用錯)裡面
msgRef.child(key).set({
message: message.value, // 這是用戶輸入的訊息內容
username: username.value, // 這是用戶的名稱
time: Date.now(), // 這是獲取現在的時間
key // 這個等同於 key: key
});
message.value = ""; // 把物件推給資料庫後我們要把 message 清空～
};
// mounted
onMounted(() => {
// 這是前面講過的那個 msgRef.on()，是 firebase 獲取(連結)資料內容的方法
msgRef.on("value", (snapshot) => {
// 把資料庫的數據丟給 chatroom 這個陣列 再到 DOM 上用 v-for 渲染資料
chatroom.value = snapshot.val();
});
});
// 最重要的一步 記得把宣告的東西塞進去 你就完成了👍
return {
message,
username,
tempUsername,
chatroom,
addMessage,
addUsername
};
}
}).mount("#app");
```
## 成品
1. [Vue + Firebase 即時聊天室](https://codepen.io/WangShuan/pen/eYvMNmd)
2. [Vue + firebase 雲端硬碟](https://wangshuan.github.io/vue-could/#/)
Sign in with Wallet
Connect another wallet