iT邦幫忙

鐵人檔案

第 11 屆 iThome 鐵人賽
回列表
Modern Web

每日挖個坑,用坑填起耍廢聊天室! 系列

使用Vue系列的Nuxt和socket從頭建立一個偽裝編輯器聊天室

鐵人鍊成 | 共 30 篇文章 | 23 人訂閱 訂閱系列文 RSS系列文
DAY 21

二十一號坑,用正規表達式寫指令

改狀態什麼的,當然也要下指令啊(? 指令 npm help //指令列表 npm new //新增聊天室 npm change name //改名字 npm c...

2019-10-07 ‧ 由 挖洗菜呱 分享
DAY 22

二十二號坑,用ref抓取DOM之滑到最下面

現在每次發送訊息的時候,訊息區塊雖然會出現scrollbar,但都只會停在最上面,今天就來處理這件事r 因為我們需要抓到DOM的高度來做計算,會用到ref的屬性...

2019-10-08 ‧ 由 挖洗菜呱 分享
DAY 23

二十三號坑,換頁就立刻focus!

現在的流程中,在首頁輸入暱稱之後換頁,習慣上我們應該一進入聊天室就會直接開始對話,可是目前換頁之後就不會focus在input上,今天就要來做一進入聊天室就自動...

2019-10-09 ‧ 由 挖洗菜呱 分享
DAY 24

二十四號坑,在local也可以測連線-ngrok

今天沒有新進度(誒)今天來介紹一個可以讓其他裝置連上localhost的神奇工具-ngrok 到網站下載檔案之後,把檔案放在你知道怎麼用terminal找到他的...

2019-10-10 ‧ 由 挖洗菜呱 分享
DAY 25

二十五號坑,來做多個聊天頻道之一(資料建立篇)

多頻道系列就會用到前面所講的一堆東西,然後因為資料存放改放到store,所以有部分扣已經跟之前有點不一樣,變成以用store資料為準,內容可能就會漏掉一些ge...

2019-10-11 ‧ 由 挖洗菜呱 分享
DAY 26

二十六號坑,來做多個聊天頻道之二(介面篇)

之二來處理一下介面 要讓sidebar跟上面的分頁共用同個組件channels sidebar <div class="sidebar_se...

2019-10-12 ‧ 由 挖洗菜呱 分享
DAY 27

二十七號坑,來做多個聊天頻道之三(socket事件篇)

今天要來處理socket的部分,下面是邀請線上人的流程 A新增頻道 邀請B 通知B要被加入頻道 B接受並加入頻道 原本我第一版的寫法,因為沒認真看文件(咦)...

2019-10-13 ‧ 由 挖洗菜呱 分享
DAY 28

二十八號坑,阻擋直接用網址進來的傢伙-asyncData&fetch

目前聊天室有單獨設立一個router,進來到此頁有兩個方法: 首頁輸入暱稱後導入/chat 直接輸入網址localhost:3000/chat 但因為必...

2019-10-14 ‧ 由 挖洗菜呱 分享
DAY 29

二十九號坑,跟socket說掰掰-disconnect

30天要到最後了!!!!!就來用socket disconnect做結束吧! 既然有登入,那就要有登出的更新吧~我原本沒看文件的時候想說在vue被destroy...

2019-10-15 ‧ 由 挖洗菜呱 分享
DAY 30

最後一坑,菜呱封坑~

Repo 聊天室repo(鞭小力一點QQQ 廢文 這次的三十天系列除了好玩(?)其實比較多是寫給一年前菜逼八的我看的XD(雖然現在仍然很菜),記錄了前一年工作上...

2019-10-16 ‧ 由 挖洗菜呱 分享