HTML - WebSockets：初學者指南
你好，未來的網頁開發者們！今天，我們將要深入WebSockets的精彩世界。如果你之前從未聽說過它們，別擔心——到了這個教學的結尾，你將會成為一名WebSocket大師！所以，拿起你喜歡的飲料，放鬆身心，讓我們開始這段旅程。
WebSockets是什麼？
在我們深入細節之前，讓我們先了解WebSockets是什麼，以及它們為什麼這麼酷。想像你正在和朋友聊天。在一個普通的電話中，你必須撥號，等待他們接聽，說出你想說的話，然後掛斷。如果你想再次說話，你必須重複整個過程。這聽起來很麻煩，對吧？
這就是傳統網頁通信的運作方式。你的瀏覽器發送一個請求，等待回應，然後關閉連接。另一方面，WebSockets就像是一條永遠打開的電話線，你和你的朋友隨時都可以說話，而不需要不斷地撥號和掛斷。酷炫吧？
語法
現在，讓我們看看我們如何在HTML中使用WebSockets。語法出奇地簡單：
<script>
var socket = new WebSocket('ws://example.com/socket');
</script>在這裡，我們創建了一個新的WebSocket對象，並將其連接到位於'ws://example.com/socket'的服務器。'ws://'部分就像'http://'一樣，但是專門為WebSockets設計的。還有一個安全版本，'wss://'，就像'https://'一樣。
WebSocket屬性
WebSockets帶有一些方便的屬性，告訴我們當前連接的狀態。讓我們在表中看看它們：
| 屬性 | 描述 |
|---|---|
| readyState | 連接的當前狀態 |
| bufferedAmount | 使用send()方法排隊的數據字節數 |
| extensions | 服務器選擇的擴展 |
| protocol | 服務器選擇的子協議名稱 |
readyState屬性特別有用。它可以有四個值：
- 0 (CONNECTING)：連接尚未打開。
- 1 (OPEN)：連接已打開，準備通訊。
- 2 (CLOSING)：連接正在關閉過程中。
- 3 (CLOSED)：連接已關閉或無法打開。
WebSocket事件
WebSockets不僅關於發送數據——它們還可以回應各種事件。這就像設置派對彩帶，當特定的事情發生時會爆炸一樣！這裡是主要的事件：
- onopen：當連接建立時觸發。
- onmessage：當從服務器接收到數據時觸發。
- onerror：當發生錯誤時觸發。
- onclose：當連接關閉時觸發。
讓我們看看我們如何在代碼中使用它們：
<script>
var socket = new WebSocket('ws://example.com/socket');
socket.onopen = function(event) {
console.log('連接建立！');
};
socket.onmessage = function(event) {
console.log('來自服務器的訊息：', event.data);
};
socket.onerror = function(error) {
console.log('WebSocket 錯誤：', error);
};
socket.onclose = function(event) {
console.log('連接關閉。');
};
</script>在這個例子中，我們設置了函數來處理這些事件。當連接打開時，我們記錄一個訊息。當我們接收到訊息時，我們記錄它。如果發生錯誤，我們也記錄。當連接關閉時，我們說再見！
WebSocket方法
現在我們知道如何監聽事件了，讓我們看看我們如何在WebSocket中實際做事。這裡是主要的方法：
| 方法 | 描述 |
|---|---|
| send() | 將數據發送到服務器 |
| close() | 關閉WebSocket連接 |
這是我們如何使用這些方法的：
<script>
var socket = new WebSocket('ws://example.com/socket');
// 將訊息發送到服務器
socket.send('你好，服務器！');
// 關閉連接
socket.close();
</script>這就是這麼簡單！使用send()，我們可以將任何數據我們想要發送到服務器。當我們完成時，我們可以禮貌地使用close()關閉連接。
使用Python設置WebSocket服務器
現在，我知道我們這裡的重點是HTML，但我認為理解對話的雙方是很重要的。所以，讓我們快速看看我們如何使用Python設置一個簡單的WebSocket服務器。別擔心如果你不熟悉Python——這裡的重點是概念。
import asyncio
import websockets
async def echo(websocket, path):
async for message in websocket:
await websocket.send(f"Echo: {message}")
start_server = websockets.serve(echo, "localhost", 8765)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()這個服務器簡單地將任何收到的訊息回傳，前綴為"Echo: "。它運行在本地主機（你自己的電腦）上，端口8765。
為服務器設置HTML客戶端
現在我們有了我們的服務器，讓我們創建一個HTML頁面來連接到它：
<!DOCTYPE html>
<html>
<head>
<title>WebSocket 測試</title>
</head>
<body>
<h1>WebSocket 測試</h1>
<input type="text" id="messageInput" placeholder="輸入一個訊息">
<button onclick="sendMessage()">發送</button>
<div id="messages"></div>
<script>
var socket = new WebSocket('ws://localhost:8765');
socket.onopen = function(event) {
console.log('連接建立！');
};
socket.onmessage = function(event) {
var messages = document.getElementById('messages');
messages.innerHTML += '<p>' + event.data + '</p>';
};
function sendMessage() {
var input = document.getElementById('messageInput');
socket.send(input.value);
input.value = '';
}
</script>
</body>
</html>這個HTML頁面創建了一個簡單的界面，你可以輸入一個訊息，發送到服務器，並看到回傳的訊息。
這就是全部！我們已經涵蓋了WebSockets的基本知識，從了解它們是什麼，到設置服務器和創建客戶端。記住，WebSockets是關於實時、雙向通信的。它們對於聊天室、實時體育更新或任何需要即時數據交換的情況都完美無缺。
在你繼續網頁開發的旅程時，你會發現WebSockets為你打開了一個全新的世界。所以，請持續練習，持續嘗試，最重要的是，樂在其中！快樂編程！
Credits: Image by storyset