引言
前段時間在 github 上看到了一個很“trick”的項目:用純 CSS(即不使用 JavaScript)實現一個聊天應用 —— css-only-chat。即下圖所示效果。
在我們的印象裏,實現一個簡單的聊天應用(消息發送與多頁面同步)並不困難 —— 這是在我們有 JavaScript 的幫助下。而如果讓你只能使用 CSS,不能有前端的 JavaScript 代碼,那你能夠實現麼?
原版是用 Ruby 寫的後端。可能大家對 Ruby 不太瞭解,所以我按照原作者思路,用 NodeJS 實現了一版 css-only-chat-node,對大家來說可能會更易讀些。
1. 我們要解決什麼問題
首先強調一下,服務端的代碼肯定還是需要寫的,而且這部分顯然不能是 CSS。所以這裏的“純 CSS”主要指在瀏覽器端只使用 CSS。
回憶一下,如果使用 JavaScript 來實現上圖中展示的聊天功能,有哪些問題需要處理呢?
- 首先,需要添加按鈕的
click
事件監聽,包括字符按鈕的點擊與發送按鈕的點擊; - 其次,點擊相應按鈕後,要將信息通過 Ajax 的方式發送到後端服務;
- 再者,要實現實時的消息展示,一般會建立一個 WebSocket 連接;
- 最後,對於後端同步來的消息,我們會在瀏覽器端操作 DOM API 來改變 DOM 內容,展示消息記錄。
涉及到 JavaScript 的操作主要就是上面四個了。但是,現在我們只能使用 CSS,那對於上面這幾個操作,可以用什麼方式實現呢?
2. Trick Time
2.1. 解決“點擊監聽”的問題
使用 JavaScript 的話一行代碼可以搞定:
document.getElementById('btn').addEventListener('click', function () {
// ……
});
使用 CSS 的話,其實有個僞類可以幫我們,即:active
。它可以選擇激活的元素,而當我們點擊某個元素時,它就會處於激活狀態。
所以,對於上面動圖中的26個字母(再加上 send 按鈕),可以分配不同的classname
,然後設置僞類選擇器,這樣就可以在點擊該字母對應的按鈕時觸發命中某個 CSS 規則。例如可以對字符“a”設置如下規則用於“捕獲”點擊:
.btn_a:active {
/* …… */
}
2.2. 發送請求
如果有 JavaScript 的幫助,發送請求只需要用個 XHR 即可,很方便。而對於 CSS,如果要想發一個請求的話有什麼辦法麼?
可以使用background-image
屬性,將它指定爲某個 URL,這樣前端就會向服務器發起一個背景圖片的請求。之所以可以使用background-image
屬性還因爲:瀏覽器只有在該 CSS 選擇器規則被實際應用到 DOM 元素後纔會實際發起background-image
的請求。例如下面這個規則:
.btn_a:active {
background-image: url('/keys/a');
}
只有在字符“a”被點擊後,瀏覽器纔會向服務器請求/keys/a
這張“圖片”。而在服務器端,通過判斷 URL 可以知道前端點擊了哪個字符。例如,對於按鈕“b”會有如下規則:
.btn_b:active {
background-image: url('/keys/b');
}
這樣就相當於實現了在 URL(/keys/a
與/keys/b
) 中“傳參”。
2.3. 實時消息展示
實時的消息展示,核心會用到一種叫“服務器推”的技術。其中比較常見方式有:
- 使用 JavaScript 來和服務端建立 WebSocket 連接
- 使用 JavaScript 創建定時器,定時發送請求輪詢
- 使用 JavaScript 和服務端配合來實現長輪詢
但這些方法都無法規避 JavaScript,顯然不符合咱們的要求。其實還有一種方式,我在《各類“服務器推”技術原理與實例》中也有提到,那就是基於 iframe 的長連接流(stream)模式。
這裏我們主要是借鑑了“長連接流”這種模式。讓我們的頁面永遠處於一個未加載完成的狀態。但是,由於請求頭中包含Transfer-Encoding: chunked
,它會告訴瀏覽器,雖然頁面沒有返回結束,但你可以開始渲染頁面了。正是由於該請求的響應永遠不會結束,所以我們可以不斷向其中寫入新的內容,來更新頁面展示。
實現起來也非常簡單。http.ServerResponse
類本身就是繼承自Stream
的,所以只要在需要更新頁面內容時調用.write()
方法即可。例如下面這段代碼,可以每隔2s在頁面上動態添加 "hello" 字符串而不需要任何瀏覽器端的配合(也就不需要寫 JavaScript 代碼了):
const http = require('http');
http.createServer((req, res) => {
res.setHeader('connection', 'keep-alive');
res.setHeader('content-type', 'text/html; charset=utf-8');
res.statusCode = 200;
res.write('I will update by myself');
setInterval(() => res.write('<br>hello'), 2000);
}).listen(8085);
2.4. 改變頁面信息
在上一節我們已經可以通過 Stream 的方式,不借助 JavaScript 即可動態改變頁面內容了。但是如果你細心會發現,這種方式只能不斷“append”內容。而在我們的例子中,看起來更像是能夠動態改變某個 DOM 中的文本,例如隨着點擊不同按鈕,“Current Message”後面的文本會不斷變化。
這裏其實也有個很“trick”的方式。下圖這個部分(我們姑且叫它 ChatPanel 吧)
其實我們每次調用res.write()
時都會返回一個全新的 ChatPanel 的 HTML 片段。於此同時,還會附帶一個<style>
元素,將之前的 ChatPanel 設爲display: none
。所以看起來像是更新了原來的 ChatPanel 的內容,但其實是 append 了一個新的,同時隱藏之前的 ChatPanel。
2.5. 點擊重複的按鈕
到目前爲止,基本的方案都有了,但還有一個重要的問題:
在 CSS 規則中的background-image
只會在第一次應用到元素時發起請求,之後就不會再向服務器請求了。也就是說,用
.btn_a:active {
background-image: url('/keys/a');
}
這種規則,“a” 這個按鈕點過一次之後,下次再點擊就毫無反應了 —— 即後端收不到請求了。
要解決這個問題有一個方法。可以在每次返回的新的 ChatPanel(ChatPanel 是啥咱們在上一節中提到了,如果忘了可以回去看下)裏,爲每個字符按鈕都應用一套新的樣式規則,並設置新的背景圖 URL。例如我們第一次點擊了“h”之後,返回的 ChatPanel 裏的按鈕“a”的classname
會該成btn_h_a
,對應的 CSS 規則改爲:
.btn_h_a:active {
background-image: url('/keys/h_a');
}
再次點擊“i”之後,ChatPanel 裏對應的按鈕的樣式規則改爲:
.btn_hi_a:active {
background-image: url('/keys/hi_a');
}
2.6. 存儲
爲了能夠保存未發送的內容(點擊 send 按鈕之前的輸入內容),以及同步歷史消息,需要有個地方存儲用戶輸入。同時我們還會爲每個連接設定一個唯一的用戶 ID。在原版的 css-only-chat 中使用了 Redis。我在 css-only-chat-node 中爲了簡便,直接存儲在了運行時的內存變量中了。
3. 最後
也許有朋友會問,這個 DEMO 有什麼實用價值麼?可以發展成一個可用的聊天工具麼?
好吧,其實我覺得沒有太大用。但是裏面涉及到的一些“知識點”到是瞭解下也無妨。我們每天面對那麼多無趣的需求,偶爾看看這種“有意思”的項目也算是放鬆一下吧。
最後,如果想看具體的運行效果,或者想了解代碼的細節,可以看這裏:
- css-only-chat-node:由於原版是 Ruby 寫的,所以實現了一個 NodeJS 版的便於大家查看
- css-only-chat:css-only-chat 的原版倉庫,使用 Ruby 實現
Just have fun! 😜