※ 建立靜態的網頁腳本：
<!DOCTYPE html>
<html>
<head>
<title>WebSocket minimal demo</title>
</head>
<body>
<!-- 聊天室紀錄 -->
<ul class="chat-list"></ul>
<!-- 輸入文字 -->
<input class="input">
<!-- 發送按鈕 -->
<button onclick="send()">Send</button>
</body>
<!-- 實作範圍 -->
<script>
//發送文字功能
function send() {
alert('send') }
</script>
</html>
程式碼解說：
HTML 部分：
1. <ul class="chat-list"></ul>：
- 用來顯示聊天室的訊息紀錄。
- class="chat-list"定義了一個類別，可以用於套用 CSS 樣式或在 JavaScript 中進行操作。
- 提供一個文字輸入欄位。
- class="input"定義類別，可以用來調整樣式或進行功能擴展。
3. <button onclick="send()">Send</button>：
- 定義了一個按鈕，標籤上顯示「Send」。
- 當按鈕被按下時，會執行 JavaScript 中名為send() 的函數。
JavaScript 部分：
1. function send() {alert('send') }：
- 這是一個函數，名稱為send 。
- 當使用者按下按鈕時，這個函數會被觸發。
- alert('send')：顯示一個彈出訊息框，內容為「send」。
網頁介面雛形：
※ 連接server功能：
建立連線：
let socket = new WebSocket('ws://localhost:8080')
程式碼解說：
- WebSocket： WebSocket 是一種通信協議，能夠在瀏覽器與伺服器之間建立持續的雙向連接。例如聊天室、即時遊戲等。
- new Websocket：Websocket是瀏覽器原生提供的建構函數，用於創建 WebSocket 連接。
- 連線的 URL：ws://localhost:8080是 WebSocket 伺服器的地址。
※ 定義不同事件的對應方式：
新增一筆「歷史紀錄」：
function appendHistory(message) {
let c = document.createElement('li')
c.innerText = message
document.getElementsByClassName('chat-list')[0].appendChild(c)
}
程式碼解說：
1. 函數名稱與用途：
- 函數名稱appendHistory ： 表示向聊天歷史（History）中新增一筆訊息。
- 傳入參數message ： 指使用者的訊息內容，將被用來顯示在聊天室。
2. 步驟拆解：
（1）建立新的li 元素：
- 變數c ： 用來存放新建立的li 元素。
- document.createElement('li')： 使用createElement 方法建立一個新的 HTML 元素，這裡是列表項 。
（2）設置文字內容：
- c.innerText： 用來設定 元素的內部文字內容（即使用者的訊息）。
- message： 函數傳入的參數，表示使用者要新增的訊息。
（3）將新的li 元素附加到聊天紀錄列表：
document.getElementsByClassName('chat-list')[0]：
- 使用getElementsByClassName 方法取得 HTML 中的chat-list 類別元素。
- [0]表示取得第一個符合 類別的元素（通常為 <ul class="chat-list"></ul> ）。
appendChild(c)： 將新的li 元素（存放在c 中）加入到chat-list 內。
發送訊息：
function send() {
const value = document.getElementsByClassName("input")[0].value
socket.send(value)
}
程式碼解說：
1. 函數名稱與用途：
- 函數名稱send ： 表示執行「訊息發送」的功能。
- 當被呼叫時，此函數會從輸入框中取得使用者的輸入文字，並透過 WebSocket 發送到伺服器。
2. 取得輸入框的內容：
（1）document.getElementsByClassName("input")：
- 根據類別名input ，獲取 HTML 中所有具有class="input" 的元素。
- [0]表示取得第一個匹配的元素（通常是文字輸入框）。
（2）.value：
- 取得該輸入框的值（即使用者輸入的內容）。
（3）const value：
- 儲存輸入框中的文字內容到常數 。
3. 透過 WebSocket 發送訊息：
socket： 一個已建立的 WebSocket 連線。
.send(value)：使用 WebSocket 的 方法，將使用者輸入的文字內容發送到伺服器。
發送訊息成果：
監聽連線成功事件：
socket.onopen = function (e) {
alert('onopen')
}
畫面上顯示成功連線提示：
socket.onopen = function (e) {
//畫面上顯示提示
appendHistory('Connected')
}
Websocket收到訊息：
socket.onmessage = function (e) {
alert('onmessage')
}
Websocket收到訊息畫面提示：
socket.onmessage = function (e) {
console.log(e)
appendHistory(e.data)
}
監聽連線關閉事件：
socket.onclose = function (e) {
alert('onclose')
}
監聽連線關閉事件畫面提示：
socket.onclose = function (e) {
appendHistory('Connection closed')
}
※ Websocket也可以利用開發者工具檢查和測試網站或網頁應用程式：
