大家一定都有使用 message、line 或是 skype 等通訊軟體，而在使用的過程中不需要重新整理頁面就可以接收到對方傳送的訊息的技術到底是如何實現的呢？今天就讓我們好好的來聊聊 WebSocket 吧！

WebSocket

與 http 比較

首先我們可以先比較 WebSocket 與 Http 兩種協定有什麼相似之處與相異之處：

相似處

1. 基於 TCP 的可靠性傳輸協議。
2. OSI Layer7 協定。

不同處

1. WebSocket 為 雙向通訊協議，可以同時傳送與接收訊息，而 HTTP 是單向的。
2. WebSocket 需要透過 握手（HandShake）建立連線。

握手連線

在建立 WebSocket 連線之前，要先通過 握手 的方式呼叫 Server，以下為流程圖

1. 在一開始建立連線時，client 端先發送一個 request 給 server，問看看 server 是否存在。
2. server 收到 client 端的訊息後，回傳說「我活得很好」的訊息，這時候就算是完成 握手。
3. 最後就可以建立起 WebSocket 的連線了。

屬性

WebSocket 的屬性皆為 ReadOnly，也就是只能讀取不能修改

readyState

主要是以數字來表示目前的連線狀態：

• 0：尚未建立連線
• 1：以建立連線，隨時可以相互通訊
• 2：正在關閉連線
• 3：已經關閉連線，無法進行通訊

bufferedAmount

用來表示已經被 send() 放入序列中還在等待送出的 utf8 的訊息。

事件

WebSocket 具有以下的 event 可以使用，以下一一介紹

open

連線建立時會觸發的事件，Server 端可以透過 header 辨識是誰連線上的。

message

送出或是接收訊息時會觸法的事件。

error

連線發生錯誤時會觸發的事件。

close

關閉連線會觸發的事件。

方法

WebSocket 可以用的方法非常簡單，只有 send 與 close

send

用來傳送訊息，訊息格式為 字串，通常會使用 json 內容傳遞。

close

用來通知關閉連線。

小結

今天大概的介紹了一下 WebSocket 的基本概念，明天就讓我們來實作 Server 與 Client 並且搭建一個聊天室吧！

參考

• https://www.runoob.com/html/html5-websocket.html
• https://letswrite.tw/websocket/