
- WebSockets 教程
- WebSockets – 首頁
- WebSockets 簡介
- WebSockets – 概述
- WebSockets - 雙工通訊
- WebSockets – 功能
- WebSockets – 實現
- WebSockets 角色
- WebSockets – 事件和操作
- WebSockets – 開啟連線
- WebSockets – 處理錯誤
- WebSockets - 傳送和接收訊息
- WebSockets – 關閉連線
- JavaScript 和 WebSockets API
- WebSocket - 伺服器工作原理
- WebSocket - API
- WebSockets – JavaScript 應用
- WebSockets 實現
- 與伺服器通訊
- WebSockets – 安全性
- WebSockets – 移動應用
- WebSockets 有用資源
- WebSockets – 快速指南
- WebSockets – 有用資源
- WebSockets – 討論
WebSockets - 傳送和接收訊息
Message 事件通常發生在伺服器傳送一些資料時。伺服器傳送給客戶端的訊息可以包括純文字訊息、二進位制資料或影像。每當傳送資料時,onmessage 函式就會被觸發。
此事件充當客戶端接收伺服器資料的“耳朵”。每當伺服器傳送資料時,onmessage 事件就會被觸發。
以下程式碼片段描述了開啟 WebSocket 協議連線的過程。
connection.onmessage = function(e){ var server_message = e.data; console.log(server_message); }
還需要考慮可以使用 WebSockets 傳輸哪些型別的資料。WebSocket 協議支援文字和二進位制資料。在 JavaScript 中,text 指的是字串,而二進位制資料表示為ArrayBuffer。
WebSockets 每次只支援一種二進位制格式。二進位制資料的宣告如下所示:
socket.binaryType = ”arrayBuffer”; socket.binaryType = ”blob”;
字串
字串被認為是有用的,用於處理人類可讀的格式,例如 XML 和 JSON。每當onmessage 事件被觸發時,客戶端需要檢查資料型別並相應地採取行動。
確定資料型別為字串的程式碼片段如下所示:
socket.onmessage = function(event){ if(typeOf event.data === String ) { console.log(“Received data string”); } }
JSON(JavaScript 物件表示法)
這是一種輕量級的格式,用於在計算機之間傳輸人類可讀的資料。JSON 的結構由鍵值對組成。
示例
{ name: “James Devilson”, message: “Hello World!” }
以下程式碼顯示瞭如何處理 JSON 物件並提取其屬性:
socket.onmessage = function(event) { if(typeOf event.data === String ){ //create a JSON object var jsonObject = JSON.parse(event.data); var username = jsonObject.name; var message = jsonObject.message; console.log(“Received data string”); } }
XML
XML 的解析並不困難,儘管技術因瀏覽器而異。最好的方法是使用 jQuery 等第三方庫進行解析。
在 XML 和 JSON 中,伺服器都以字串形式響應,該字串在客戶端進行解析。
ArrayBuffer
它包含結構化的二進位制資料。包含的位按順序排列,以便可以輕鬆跟蹤位置。ArrayBuffer 方便儲存影像檔案。
使用 ArrayBuffer 接收資料非常簡單。使用instanceOf 運算子代替等於運算子。
以下程式碼顯示瞭如何處理和接收 ArrayBuffer 物件:
socket.onmessage = function(event) { if(event.data instanceof ArrayBuffer ){ var buffer = event.data; console.log(“Received arraybuffer”); } }
演示應用程式
下面的程式程式碼演示瞭如何使用 WebSockets 傳送和接收訊息。
<!DOCTYPE html> <html> <meta charset = "utf-8" /> <title>WebSocket Test</title> <script language = "javascript" type = "text/javascript"> var wsUri = "ws://echo.websocket.org/"; var output; function init() { output = document.getElementById("output"); testWebSocket(); } function testWebSocket() { websocket = new WebSocket(wsUri); websocket.onopen = function(evt) { onOpen(evt) }; websocket.onmessage = function(evt) { onMessage(evt) }; websocket.onerror = function(evt) { onError(evt) }; } function onOpen(evt) { writeToScreen("CONNECTED"); doSend("WebSocket rocks"); } function onMessage(evt) { writeToScreen('<span style = "color: blue;">RESPONSE: ' + evt.data+'</span>'); websocket.close(); } function onError(evt) { writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data); } function doSend(message) { writeToScreen("SENT: " + message); websocket.send(message); } function writeToScreen(message) { var pre = document.createElement("p"); pre.style.wordWrap = "break-word"; pre.innerHTML = message; output.appendChild(pre); } window.addEventListener("load", init, false); </script> <h2>WebSocket Test</h2> <div id = "output"></div> </html>
輸出如下所示。

廣告