iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

雙向奔赴的websocket與冰冷的react 系列

本次會介紹一些基礎的websocket與react的相關知識與基礎應用

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文 團隊NUTC imac
DAY 1

[day1]準備開賽囉

今年又來參予此項賽事,不過還是淺淺的介紹,雖然去年也是學前端的,不過掌握基礎的前端三大架構後,就可以去結合各種後端來渲染了,所以如果你只是要單純搭配後端去寫前端...

2024-09-09 ‧ 由 oLunao 分享
DAY 2

[day2]雙向通訊websocket介紹

首先介紹的是WebSocket WebSocket 是一種在單個 TCP 連接上進行全雙工(雙向)通訊的協議。它由 IETF(Internet Engineer...

2024-09-10 ‧ 由 oLunao 分享
DAY 3

[day3]WebSocket建立

昨天了解了Websocket是甚麼,那今天我們就來實際操作websocket吧 WebSocket流程 Websocket的流程給他劃成四個階段 建立Webs...

2024-09-11 ‧ 由 oLunao 分享
DAY 4

[day4]WebSocket持續連接

今天來簡單觀察下Websocket的連接與一般的http式的差別(採用fetch方式) 如何觀察 既然要觀察還是說一下觀察方式好了,簡單一點就是打開網站後開啟【...

2024-09-12 ‧ 由 oLunao 分享
DAY 5

[day5]觀察WebSocket運作流程

這篇繼續延用之前的server.js設定 今天主要就是觀察Websocket的觸發過程 前端介面 首先先建立index.html <!DOCTYPE ht...

2024-09-13 ‧ 由 oLunao 分享
DAY 6

[day6]WebSocket心跳機制

心跳機制 首先我們要先了解到,關閉瀏覽器正常會終止所有活躍的 WebSocket 連接並向伺服器發送關閉信號。然而,在某些情況下(如網絡中斷、客戶端崩潰、網絡不...

2024-09-14 ‧ 由 oLunao 分享
DAY 7

[day7]前端框架React SPA?介紹

React是一個基於javascript的函式庫 核心特性 想較于傳統基於DOM開發的優勢 1.組件化架構:讓開發者可以將應用程式劃分為小型、獨立、可重用的...

2024-09-15 ‧ 由 oLunao 分享
DAY 8

[day8]React要用VITE?CRA?NEXT.JS?

上篇講了React的特徵,那麼接下來我們就要選擇環境了 貼一下去年調查的前端語言使用率雖然應該貼在上一篇才對(在查打包工具時順手查到的) CRA 腳手架工具 C...

2024-09-16 ‧ 由 oLunao 分享
DAY 9

[day9]React建立環境CRA 對比Vite

我們終於要來建React了 上篇說了有各種環境,而要怎麼啟動呢?直接查官網就會告訴你相關指令 然後突然想到在用個Vite吧,然後可以試者run兩個空殼,可以回顧...

2024-09-17 ‧ 由 oLunao 分享
DAY 10

[day10]React基礎教學(0)認識環境

這邊我用CRA的環境來說 建立好之後你知道直接npm start可以直接啟動頁面,可是當你想開始寫的時候卻發現,我寫在哪? 首先是唯一的html檔案 1. in...

2024-09-18 ‧ 由 oLunao 分享