iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
1
Modern Web

用Elixir學習後端煉金術系列 第 25

Day 25 |> Phoenix |> 神奇的 LiveView 與 實作規劃

在了解LiveView之前,我們先看個影片,先對他有基本的認識再開始。

Yes


特性

  • 用戶高互動性
    LiveView 是 Phoenix 推出的一個能夠提供開發者開發出使用者高互動性的網頁的工具 (這其實就是 Phoenix 這個 web 框架最一開始的目的,所以也可以說 LiveView 是將這個目的更進一步的一個存在,也是 Phoenix 跟其他 網頁框架最大的不同處之一。)
    而且因為是利用WebSockeet協定,因此事件可以回傳多個使用者,在多個使用者的頁面上做出響應,對於聊天室,或是一些需要顯示其他用戶狀態的應用場景,其實感覺也是非常適合的。

  • 前後端相同邏輯
    還有一種情況,是例如表單驗應,通常前後端都會資料進行驗證,而這種時候,通常前後端都維護著一份驗證的邏輯,但內容上幾乎是差不多的。
    使用LiveView的話,可以在前端使用跟後端相同的邏輯做驗證,前端的資料會傳到後端,並以 WebSocket 回傳 Json 即時響應驗證結果,然後當表單 Submit 後,也可以使用相同的邏輯做驗證,可以節省掉前後端邏輯重複的程式碼。

  • 即時的更新
    對於需要即時更新的資料,例如儀表板,或是推播訊息等,也是可以適用的場景。

實作規劃

未來幾章,希望可以完成一個簡單的聊天室功能,基於 LiveView,可以在公共的頻道上傳遞訊息,以及可以私訊其中一個用戶。

用戶首先會在一個視窗下輸入自己的暱稱,然後會獲得一個使用者的ID,然後可以傳送訊息,利用 WebSocket,訊息可以傳給其他使用者。

然後也希望可以實作私密特定用戶的功能。

因為自己鐵人在的文章到這邊已經都是邊做邊學,有點吃緊,所以基於進度壓力,整個實作的時間限應該會拉長到30天後,希望可以順利完成/images/emoticon/emoticon16.gif


上一篇
Day 24 |> Phoenix |> Router
下一篇
Day 26 |> Phoenix |> LiveView |> 簡單的範例
系列文
用Elixir學習後端煉金術30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
taiansu
iT邦新手 4 級 ‧ 2020-10-14 00:38:55

喔喔能講 LiveView 真是太棒了。不過不急,先完賽再來寫吧~ 加油!

感謝鼓勵QQ
強迫自己每天發文,已經有點內容短缺了,真正有好好準備的內容,應該都要等30天過後了...
哈哈/images/emoticon/emoticon16.gif

我要留言

立即登入留言