iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
Modern Web

摸索 WebSocket,遠望 WebRTC系列 第 1

Day00:Setting up Environment(環境設定)

全文同步於個人 Docusaurus Blog

Foreword

過往前後端溝通,需要仰賴 client 端發起請求,譬如 GET or POST,但這對 server 端來說,卻無法主動回傳。但當我使用 socket 後,只需要透過一次握手(採用 ws 協議,而非 http 協議),前後端就能建立持久性的雙向連接(full-duplex),達到數據傳輸的目的,同時 server 端也能主動更新訊息給 client 端。

實作 socket 的作法,目前市場上主流應該是以下兩者:

  1. socket.io
  2. websocket

前者是 Node.js 老牌實作 websocket 的伺服器,因此兼容性良好,如果有考慮冷門瀏覽器的話,會是首選。後者則是 HTML5 新增的特性,因此在使用上,有可能會無法兼容冷門瀏覽器。

Require

  • Node.js
  • Visual Studio Code(任一編輯器)

第一項需要準備 Node.js 環境,推薦使用 NVM 來安裝管理 Node 版本方便切換,可參考這篇文章 NVM,至於編輯器則看個人習慣即可。

Build

建立基礎環境

mkdir chat

cd chat

# init project, use npm or yarn

yarn init

plugin

安裝 express 來建立 server,同時使用老牌的 socket.io 來實作。

yarn add express socket.io 

touch file

開始著手建立 js 檔案來寫寫看

touch server.js

# package.json 的 main 改為 server.js

Running Server

在 server.js 寫入以下內容來建立本地的 server

const express = require('express');
const app = express();

const Port = 5000;

app.listen(Port, () => {
  console.log(`Server listening on ${Port}`);
});

切換到終端機,執行以下指令,確認 server 已經被建立,印出 console

node server.js

check server running

但如果每次都需要執行 node server.js 頗麻煩,所以這邊安裝一個 plugin nodemon,讓它幫我 auto reload。

yarn add nodemon -D

同時我在 package.json 建立 scripts:

"scripts": {
  "dev": "nodemon server.js"
},

此後,我只需要執行 yarn dev,就可以達到想要自動更新 server 的目的,現在測試看看是否可行。

# start server
yarn dev

接著回到 server.js,將 port 改為 5001,檢查終端機,確定正常同步更新,代表沒問題了。

nodemon


下一篇
Day01:Build Page(建立頁面)
系列文
摸索 WebSocket,遠望 WebRTC30

尚未有邦友留言

立即登入留言