HTML Websocket技術實現及應用案例分享

一、什麼是Websocket技術

WebSocket是一種在單個TCP連接上進行全雙工通信的網絡協議。它有利於在WebSocket客戶端和服務器之間進行實時和異步通信。WebSocket協議於2011年被IETF標準化。

由於Websocket具有雙向通信、實時性、高效性、跨平台等特點，因此在現代化的web應用開發中被廣泛應用。它與HTTP/HTTPS協議相比，可以節約開銷，提高效率。在Websocket中，只有建立連接的時候需要發出HTTP請求，連接成功後，可以持續地傳輸數據，服務器也可以隨時主動推送消息到客戶端。WebSocket並沒有提供新的發送消息的方式，仍然通過send方法發送消息。不過WebSocket的響應數據可以直接通過onmessage事件直接獲取。

二、Websocket技術的實現方法

Websocket的實現是通過javascript提供的WebSocket對象來實現的，它需要在客戶端與服務器端都設置。

1. 服務端實現

import asyncio
import websockets

async def hello(websocket, path):
    name = await websocket.recv()
    print(f" {greeting}")

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

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

上面是一個簡單的服務端實現，使用Python的websockets庫實現。它監聽8765端口，並接收客戶端發來的消息並給予回復。

2. 客戶端實現

//先創建一個WebSocket對象
var ws = new WebSocket("ws://localhost:8765/");

//連接打開時觸發
ws.onopen = function(event){
    console.log("WebSocket連接已打開...");
}

//收到服務端消息時觸發
ws.onmessage = function(event){
    console.log("收到消息：" + event.data);
}

//連接關閉時觸發
ws.onclose = function(event){
    console.log("WebSocket連接已關閉...");
}

//發生錯誤時觸發
ws.onerror = function(event){
    console.log("WebSocket連接發生錯誤...");
}

//向服務端發送消息
ws.send("Hello Server!");

客戶端實現也是通過javascript提供的WebSocket對象來實現的。在創建WebSocket對象時，需要指定服務端地址。發送和接收消息都通過WebSocket對象對應的方法實現。

三、Websocket的應用案例

1. 百度地圖實時車輛監控系統

這是一個監控的士位置的實時應用，用戶在地圖上點擊任意區域，即可查看該區域內的士的實時位置和車牌號。

該系統是基於Node.js實現的，使用了Socket.io實現Websocket通信。以每10s刷新一次數據，定位數據採集使用GPS定位或基站定位，數據實時推送給客戶端顯示。在使用方面，用戶只需要在地圖上點擊相應的位置，後台即可實時推送最新的數據。

2. 在線聊天系統

在線聊天系統是最常見的Websocket應用之一。用戶通過登錄，在線聊天室內可以看到其他在線用戶，並可以收、發消息。

聊天系統是不斷推送信息，在Websocket中可以方便的實現，在不刷新的情況下還可以實現數據實時推送，做到接近異步的真正實時通信。這也是使用Websocket的優勢所在。

3. 協作工具

協作工具的特點是多人協作編輯，對實時性的要求比較高。目前的協作工具有文檔、畫圖、PPT等。它們都需要實時同步用戶的操作，Websocket可以非常好的解決這個問題。

Websocket可以實時推送用戶的操作，比如用戶在畫圖時新建了一條線路或者添加了文字，這些動作可以通過Websocket實時地推送給其他用戶進行展示和操作。在線協作工具帶來了便捷性，讓各地用戶可以即時交換、共同編輯和合作。