Websocket使用教程

一、WebSocket是什麼

WebSocket為瀏覽器和伺服器之間提供了一種新的實時通信協議。與HTTP不同，它允許伺服器主動發送數據給客戶端。在使用WebSocket之前，Web開發人員總是使用輪詢技術來實現實時通訊。輪詢技術往往需要在客戶端和伺服器之間頻繁發送大量的請求；然而，WebSocket僅需建立一次連接，之後伺服器與客戶端之間就可以互相發送數據。WebSocket還支持完整的雙向通信，你可以在客戶端和伺服器之間進行實時對話。

二、WebSocket基本用法

要在頁面使用WebSocket，我們要實例化WebSocket對象並通過它與伺服器通信。以下是一個最簡單的WebSocket頁面：

 var ws = new WebSocket("wss://echo.websocket.org");

 ws.onopen = function(event) {
   console.log("Opened");
   ws.send("Hello Server!");
 };

 ws.onmessage = function(event) {
   console.log( "Message received:", event.data );
 };

 ws.onclose = function(event) {
   console.log("Closed");
 };

我們創建一個新的WebSocket，並連接到wss://echo.websocket.org上。在連接到伺服器之後，我們發送了消息並偵聽了來自伺服器的消息。

三、WebSocket對象的屬性與方法

1、WebSocket.readyState

此屬性返回連接狀態，具有4個可能的值：

• WebSocket.CONNECTING: 正在連接
• WebSocket.OPEN: 已連接
• WebSocket.CLOSING: 正在關閉
• WebSocket.CLOSED: 已關閉

下面是使用readyState屬性的例子：

 var ws = new WebSocket("wss://echo.websocket.org");

 if (ws.readyState === WebSocket.OPEN) {
   console.log("Connected!");
 } else {
   console.log("Not Connected!");
 }

2、WebSocket.send()

此方法允許客戶端向伺服器發送數據。你可以發送文本、二進位和blob數據。

 var ws = new WebSocket("wss://echo.websocket.org");

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

3、WebSocket.close()

此方法關閉WebSocket連接。

 var ws = new WebSocket("wss://echo.websocket.org");

 ws.onclose = function(event) {
   console.log("Closed!");
 };
 
 ws.close();

四、服務端的實現

我們通過Node.js的ws模塊來創建WebSocket伺服器。ws是一個簡單且易於使用的WebSocket庫，具有很好的性能和廣泛的瀏覽器支持。

 const WebSocket = require('ws');

 const server = new WebSocket.Server({ port: 8080 });

 server.on('connection', function connection(ws) {
   ws.send('Hello! Welcome to our WebSocket server!');

   ws.on('message', function incoming(message) {
     console.log('received: %s', message);
   });

   ws.on('close', function close() {
     console.log('disconnected');
   });
 });

我們創建了WebSocket伺服器並監聽8080埠。當連接建立時，我們發送了一條歡迎消息到客戶端，並向控制台輸出收到的所有消息和連接關閉事件。

五、WebSocket安全

WebSocket支持加密的連接（wss）。為了確保連接安全，請使用wss而不是ws協議。可以使用自己的SSL證書來加密連接，也可以使用第三方證書。

以下是使用Node.js創建wss連接的例子：

 const https = require('https');
 const fs = require('fs');
 const WebSocket = require('ws');

 const server = https.createServer({
   cert: fs.readFileSync('/path/to/cert.pem'),
   key: fs.readFileSync('/path/to/key.pem')
 });

 const wss = new WebSocket.Server({ server });

 wss.on('connection', function(ws, req) {
   console.log(`New Connection from ${req.socket.remoteAddress}`);
 });

在此示例中，我們在創建WebSocket伺服器之前創建了HTTPS伺服器。我們使用SSL證書啟用HTTPS。隨後，我們創建了WebSocket伺服器並監聽HTTPS伺服器。