iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

摸索 WebSocket,遠望 WebRTC 系列

原先計畫能夠將 WebSocket 和 WebRTC 都嘗試摸索一番,但在準備的過程中,發現精力和時間分配有限,因此重點仍會放在 WebSocket上,使用 Vanilla JS 來創建 Chat,或者摸索看看有沒有其他可以實作的功能。

行有餘力之下,會再嘗試加入框架的架構下,如何實作相關作品。

最後的最後,如果有幸還有力量的話,希望能涉獵到 WebRTC,期許自己完成。

鐵人鍊成 | 共 30 篇文章 | 10 人訂閱 訂閱系列文 RSS系列文 團隊血汗攻城屍
DAY 1

Day00:Setting up Environment(環境設定)

全文同步於個人 Docusaurus Blog Foreword 過往前後端溝通,需要仰賴 client 端發起請求,譬如 GET or POST,但這對...

2021-09-16 ‧ 由 DoDoBird 分享
DAY 2

Day01:Build Page(建立頁面)

全文同步於個人 Docusaurus Blog Public(靜態資料,存放 Client 端資料) 建立靜態頁面,並將頁面和 terminal 之間建立...

2021-09-17 ‧ 由 DoDoBird 分享
DAY 3

Day02:Send Event(發送事件)

全文同步於個人 Docusaurus Blog 在上一章中,已將 client 端和 server 端進行連線,接下來我們需要開始,讓兩端互相發送訊息。 S...

2021-09-18 ‧ 由 DoDoBird 分享
DAY 4

Day03:Set User Name(存放使用者名稱)

全文同步於個人 Docusaurus Blog 在這一章中,主要處理下述兩個問題: 初始進入頁面的建立 存放使用者輸入的名稱 Introduct...

2021-09-19 ‧ 由 DoDoBird 分享
DAY 5

Day04:Set Chat Page(設定聊天頁) I

全文同步於個人 Docusaurus Blog 在處理完輸入使用者名稱後,下一步,自然就是進入 Chat 的觸發事件。 HTML 先處理結構 <b...

2021-09-20 ‧ 由 DoDoBird 分享
DAY 6

Day05:Set Chat Page(設定聊天頁) II

全文同步於個人 Docusaurus Blog 在本章中,要達成兩個目標: 使用 JS 來動態 render HTML 頁面,產生一個小的對話框 當...

2021-09-21 ‧ 由 DoDoBird 分享
DAY 7

Day06:Forward Message To Server(轉發訊息到 Server 端)

全文同步於個人 Docusaurus Blog 前一章印出使用者名稱和訊息內容後,接下來要嘗試將其透過 socket.io 轉發給 server。 修正使用...

2021-09-22 ‧ 由 DoDoBird 分享
DAY 8

Day07:Boardcast Event(推播事件)

全文同步於個人 Docusaurus Blog 當某個使用者輸入訊息發送到 server 後,若當前環境為留言板或公共頻道,server 端則必須推播訊息給...

2021-09-23 ‧ 由 DoDoBird 分享
DAY 9

Day08:Build Private Chat(建立私人頻道)

全文同步於個人 Docusaurus Blog 除了共用的頻道外,當不同使用者進入時,希望能夠出現一個很陽春的不同使用者的聊天頻道,並進行私人訊息。 而這一...

2021-09-24 ‧ 由 DoDoBird 分享
DAY 10

Day09:Emit Direct Message I(發送個人訊息到 server 端)

全文同步於個人 Docusaurus Blog 當建立私人頻道後,下一步,便是將私人頻道的訊息發往 server-side,透過 server 轉給指定的使...

2021-09-25 ‧ 由 DoDoBird 分享