雙向互動的即時訊息:Websocket 入門

雙向互動的即時訊息:Websocket 入門

在 HTTP 設計之初,網路應用主要是交換文件,因此當提交訊息或更新訊息時,需要刷新整個頁面,這也導致大量 HTML 被重複傳輸,浪費使用頻寬。後來 AJAX 被提出,讓 HTTP 可以只取得想要的伺服端訊息,同時在沒有重新導向的情況下更新頁面,讓 HTTP 更符合現代網路應用情境。

但是對需要互動的應用,像是聊天室、遊戲、即時狀態監控等等來說,如果使用 HTTP 傳遞訊息,則需要客戶端頻繁向伺服端輪詢(Polling),有點像客戶端三不五時跟伺服端問說:「你有沒有新資料需要更新的啊?」可想而知會造成客戶端跟伺服端很大的負擔。比較理想的情況是,應該存在一個事件驅動模型,當伺服端有事件發生時,它會主動通知訂閱的客戶端,客戶端再進行更新,而這就是 WebSocket 這套通訊協定誕生的原因。

Websocket 沒有限定語言,但為了簡化操作,後端可以用 node.js,好跟前端的 JavaScript 共用一套函式庫。本文中會使用 node.js 常見的後端框架 Express,並搭配 socket.io,來建立前後端之間的 WebSocket 連線。

想 Clone 程式碼的,可以到這裡

Create Server

既然是網路應用,首先來建立 Server,node.js 的專案結構是

project
├── public
├── index.js
└── README.md

初始化專案

npm init

npm 會問你一堆問題,通常按照預設來回答就好

ken@DESKTOP-2R08VK6:~/git/medium-example-nodejs/socket-io$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (socket-io) 
version: (1.0.0) 
description: socket.io demo
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: kenwschen
license: (ISC) MIT
About to write to /home/ken/git/medium-example-nodejs/socket-io/package.json:

{
    "name": "socket-io",
    "version": "1.0.0",
    "description": "socket.io demo",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "kenwschen",
    "license": "MIT"
}

Is this OK? (yes)

回答完後,專案初始化完成。

接著來安裝 express,這是一套 node.js 的 Web 框架,可以用來將不同的 URL 導向不同的資源(用專有名詞來說,可以用來做多路複用),它的官網是
Express — Node.js web application framework

安裝方式是

npm install express --save

npm 會將 express 加入 node_modules 中,讓 node 可以調用依賴,專案變成

project
├── node_modules
├── public
├── index.js
├── package.json
├── package-lock.json
└── README.md

在入口 index.js 中加入內容

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

app.get('/', function (req, res) {
    res.type('text/plain');
    res.status(200).send('Hello, World.');
})

server = http.createServer(app)
server.listen(8001, () => {
    console.log('Express started')
})

前面是引用函式庫,並建立 express instance

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

再建立 root 的回覆訊息

app.get('/', function (req, res) {
    res.type('text/plain');
    res.status(200).send('Hello, World.');
})

當收到 Get / 的 HTTP request 時,response 的形式是純文本;狀態是 200 ok;內容是 “Hello, World.”

最後,監聽 port 8001,如果建立成功,印出訊息

server = http.createServer(app)
server.listen(8001, () => {
    console.log('Express started')
})

執行程式

node index.js

在瀏覽器的導航列輸入 http://127.0.0.1:8001 可以看到 “Hello, World.”

Create WebSocket Server

有了基本 Server 後,再來加入 WebSocket,這邊使用 Socket.IO 這套函式庫

安裝方式是

npm install socket.io --save

改寫 index.js 內容

const http = require("http");
const io = require('socket.io');
const express = require('express');
const app = express();

// ...

var servIo = io.listen(server);
servIo.on('connection', function (socket) {
    setInterval(function () {
        socket.emit('second', { 'second': new Date().getSeconds() });
    }, 1000);
});

WebSocket 跟 HTTP Listen 同一個 Port,訂閱 connection 事件,當連線建立時會觸發

servIo.on('connection', function (socket)

若是連線成功,則每秒發送當前的秒數到 second 事件中

setInterval(function () {
        socket.emit('second', { 'second': new Date().getSeconds() });
    }, 1000);

Create WebSocket Client

建立完伺服端,接著建立客戶端。客戶端用到的的靜態資源會放在 public 下,因此新增兩個檔案

project
├── node_modules
├── public
│   ├── client.js
│   └── socket.html
├── index.js
├── package.json
├── package-lock.json
└── README.md

也要讓 express 知道這件事,改寫 index.js

const http = require("http");
const io = require('socket.io');
const express = require('express');
const app = express();

app.use(express.static(__dirname + '/public'));

新增的兩個資源,socket.html 用以描述前端頁面;client.js 用來建立 WebSocket 並改寫 HTML 顯示的資訊。

先來看 HTML

<html>

<head>
    <script src="/socket.io/socket.io.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

<body>
    <script src="client.js"></script>
    <div id="second"></div>
</body>

</html>

引用了 socket.io 的函式庫,還有 jQuery 用來操作 HTML 元素。body 內執行 client.js 的內容,並有一個 div 顯示秒數資訊。

接著看 client.js

var socket = io.connect();

socket.on('second', function (second) {
    $('#second').text(second.second);
});

訂閱 second 事件;當收到 second 時,改寫 second 元素中的內容

用瀏覽器打開 http://127.0.0.1:8001/socket.html,叫出剛剛建立的頁面,用 F12 打開瀏覽器的開發者視窗,可以看到資源都被 Get 回來

其中有個 WebSocket 連線,點選後可以看到伺服器不斷傳送訊息

前端頁面上的秒數值也會不斷被刷新。

Monitor WebSocket Packet

我們可以用 WireShark 來觀察 WebSocket 的封包。WebSocket 的交握過程如下圖

Client 會發起 HTTP Upgrade,要求將 Session 升級為 WebSocket 協定,Server 收到後,會回覆 Client 已經 Upgrade,雙方後續就可以使用 WebSocket 通訊。如果用 WireShark 抓取封包,結果會是

可以看到一開始是 HTTP,等到雙方交握完成後,就改為 WebSocket。

進一步查看交握的封包內容

HTTP 中會帶許多 Header,Upgrade 表示要升級的協定;Sec-WebSocket-Key 則是交握用的資訊。Server 收到後會回

狀態碼是 101,表示協議切換;其中 Sec-WebSocket-Accept 是用 Sec-WebSocket-Key 算出來的值,用來避免跨協議攻擊。

後面 WebSocket 協定包括幀頭跟載荷

Fin 的 bit 表示該幀為完結幀,通常 WebSocket 傳送只用到一幀,但也能支援多幀傳送;Opcode 是操作碼,表示內容的類型,通常用於 WebSocket 的傳送都是文本;Payload 是資料內容,可以看到事件名稱跟秒數都在 Payload 中。

Send Message From Client

由於 WebSocket 是雙向通訊,也可以改寫程式,由前端發訊息給後端,先在 HTML 中建立文本輸入欄位

<body>
    <script src="client.js"></script>
    <div id="second"></div>
    <textarea id="text"></textarea>
</body>

改寫 client.js

$(document).ready(function () {
    $('#text').keypress(function (e) {
        socket.emit('client_data', String.fromCharCode(e.charCode));
    });
});

在前端載入完成時註冊一個 function,當文本輸入欄位被輸入新的值,這個值就會立刻傳送回後端。

接著改寫 index.js

servIo.on('connection', function (socket) {
    setInterval(function () {
        socket.emit('second', { 'second': new Date().getSeconds() });
    }, 1000);

    socket.on('client_data', function (data) {
        console.log(data);
    });
});

訂閱 client_data,當收到前端回傳的資料,用 console.log() 印出。

這樣就能完成雙向通訊了。

小結

隨著 Web 領域的發展,WebSocket 已經是非常常見的應用了,畢竟現在的網路應用越來越接近桌面程式,前後端的互動更加頻繁,有些時候必須仰賴 WebSocket 才能滿足即時性的需求。像是開發設備前端,如果只使用單純的 AJAX,由於瀏覽器不可能每秒都跟後端取資料,拿到的數據不免有可能會失真,無法正確反映瞬間峰值,這時就是改用 WebSocket 的時機點。

Reference

Read more

Weekly Issue 第 15 期:Go 語言從 1.25 支援 Flight Recorder

最近安排旅遊計畫,會到 Brisbane 居住三個月,突然跟熟悉的環境分開,用陌生眼光看待周圍一切,真是個特別的體驗。 世界依然在轉動,只是用了不同速度,反映在每週週報上,是項目變少了,可是內容變長了。 🗞️ 熱門新聞 Flight Recorder in Go 1.25 Go 1.25 開始支援 Flight Recorder。 以前要抓 trace,都是要等到事發後才能抓,有沒有可能事發前抓呢?有,原理很簡單,配置一塊記憶體存放臨時的 trace,如果符合條件,輸出持久化,否則丟棄,這就是 Flight Recorder。 官方給的範例很讚,像 slow request 這類例子,常常是處理 request 時遇到問題,在沒有 Flight Recorder

By Ken Chen

Weekly Issue 第 14 期:Product Hunt 已死

近期台灣技術圈新聞應該要算 Vibe Coding,無獨有偶的是,HN 上也談到類似的議題:行銷跟技術的界線在哪?哪些東西可以包裝成商品販售,哪些則是應該要有基本的自我審核? 🗞️ 熱門新聞 Product Hunt is Dead 有位產品創辦人寫了篇 Blog,標題比較聳動:Product Hunt 已死。 我沒特別 Follow Product Hunt,只有偶爾看看,但看完還是五味雜陳。依照文中所說,當你在 Product Hunt 發布產品後,會有一堆人來跟你說需不需要買讚,這讓我想到以前書市買榜的例子。 有人可能會覺得這是行銷,只是對我來說,行銷跟欺騙還是兩回事。我比較不確定的是,假設今天換個場景,改為無傷大雅的善意謊言,我會同意嗎? ✨ 科技觀點 How to Lead in a Room Full of Experts

By Ken Chen

Weekly Issue 第 13 期:Google 無須出售 Chrome

Chrome 的判決出來了,Google 不用分拆,只需要保障競爭者能跟它公平競爭。 這個判決有指標意義,所有人都知道 Google 長期利用 Chrome 數據改善它的搜尋引擎,讓其他廠商處於競爭劣勢。要解決這問題,最簡單方式是要求 Google 出售 Chrome,而法官在仔細評估後,給出相當審慎的判決。 我喜歡這種法律見解,具有實務與原則的平衡,法律條文不應該是照本宣科。 🗞️ 熱門新聞 Google Can Continue Paying for Firefox Search Deal, Judge Rules 以前很少注意 Chrome 的新聞,剛好最近判決出來了,看了一些。 最驚訝的是,Mozilla 有 85% 的年度收入是由 Google 給的,如果判決禁止 Google 出錢成為瀏覽器預設的搜尋引擎,將直接影響到 Mozilla

By Ken Chen

Weekly Issue 第 12 期:Bear 修改授權條款

通常開源專案需要面對長期維護的問題,而長期維護需要人力(開發者)物力(伺服器與基礎建設),個人開發者來說是個負擔。有些專案會有企業贊助,有些專案則是替用戶提供顧問與服務來收費維持。 這期選了 Bear 修改授權的新聞,也因為這則新聞,順道看了 Sentry 的授權模式。我們都希望擁有健康的開發生態,而授權條款很大程度左右了這點。 🗞️ 熱門新聞 Bear changes license to Elastic License Blog 平台工具 Bear 修改授權,原本是 MIT,現在改用 Elastic License。 看開發者的說法,原因是有人搭便車,fork 完直接部署成服務賣錢。開源不是免費勞工,這樣確實有點過分。Elastic License 的差別是不准以託管方式提供服務,算是補上這個洞。 相對 AGPL 來講,有時這種個人開發的小型專案,也不追求產業影響力,直接用 EL

By Ken Chen