一、什麼是WebSocket？

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。WebSocket 使得客戶端和服務端之間的實時數據傳輸成為可能。

與 HTTP 相比，WebSocket 精簡、高效、快速，可以通過 JavaScript 在瀏覽器中直接實現即時通信。

二、 WebSocket 工作原理是什麼？

WebSocket 客戶端與 WebSocket 服務器建立連接，該連接始終保持開放狀態。

WebSocket 使用固定的URI，該 URI 通過瀏覽器或應用程序發送到 WebSocket 服務器。WebSocket 服務器接收客戶端請求並創建新的握手。

WebSocket 服務器通過HTTP 連接將握手響應返回到客戶端，然後將連接升級到WebSocket 協議。

客戶端和服務端之間的數據在連接上進行通訊。數據可以是文本或二進制數據，由發送者指定。

三、如何實現WebSocket連接?

在 JavaScript 中，使用 WebSocket API 進行創建 WebSockets 連接。WebSocket 類提供了構造功能，該功能將 WebSocket URI 作為輸入。

var ws = new WebSocket("ws://localhost:8080");

一旦連接被建立，採用以下代碼來發送數據：

ws.send("Hello, Server");

對 WebSockets 的每個節點（也稱為 peer）進行處理的方式與同步HTTP請求相同。您可以獲得事件的通知。

ws.onopen = function(){
  alert("WebSocket連接已打開!");
};

ws.onmessage = function (evt) { 
  var received_msg = evt.data;
  alert("Message is received..."+received_msg);
};

ws.onclose = function() { 
  alert("WebSocket已關閉!"); 
};

四、WebSocket 應用場景有哪些？

WebSocket 適用於需要處理實時數據的應用程序。以下是幾個適合使用 WebSocket 的場合：

• 即時聊天
• 在線遊戲
• 即時應用程序和控制面板
• 共享文檔和文件

五、WebSocket 的優點有哪些？

• 實時性: WebSocket 是真正的實時標準。
• 更少的流量: 使用HTTP輪詢需要發送更多的 HTTP 請求到服務器上，降低了系統的性能。
• 雙向通信: WebSocket 支持雙向通信，讓服務端可以同時發送和接收數據。
• 更少的延遲: 在使用長輪詢或 HTTP 流之類的傳輸時，由於握手時間和請求/響應延遲，數據傳輸速度會變慢。

六、WebSocket 的缺點有哪些？

• 瀏覽器兼容性問題: 一些舊版本的瀏覽器可能不支持 WebSocket。
• 實時性高的應用場合較多： 對服務器的負載壓力較大。
• 在使用安全傳輸（TLS/SSL）時，服務器的性能會降低。

七、完整的代碼示例

JavaScript 實現WebSocket連接：

var ws = new WebSocket("ws://localhost:8080");

ws.onopen = function() {
  ws.send("Hello, Server!");
};

ws.onmessage = function (evt) { 
  var received_msg = evt.data;
  console.log("Message is received... "+received_msg);
};

ws.onclose = function() { 
  console.log("WebSocket is closed..."); 
};

Python 實現 WebSocket 服務器：

import asyncio
import websockets

async def echo(websocket, path):
    async for message in websocket:
        await websocket.send(message)

start_server = websockets.serve(echo, "localhost", 8765)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

HTML5 的 WebSockets 使用示例:

	


	
		var socket = new WebSocket("ws://localhost:8080");

		socket.onopen = function() {
			document.getElementById("status").innerHTML = "Connection Open";
			socket.send("Hello, Server!");
		};

		socket.onmessage = function(evt) {
			document.getElementById("message").innerHTML = evt.data;
		};

		socket.onclose = function() {
			document.getElementById("status").innerHTML = "Connection Closed";
		};

		function sendMessage() {
			var message = document.getElementById("text").value;
			socket.send(message);
		}
	

	
WebSocket Example

	
		
		
	

	
Connection Closed