WebSocket JavaScript API · PHP筆記

[WebSocket - Web API 接口參考 | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket) ## **實例化** var aWebSocket = new WebSocket(url [, protocols]); ~~~ // Create WebSocket connection. const socket = new WebSocket('ws://localhost:8080'); // Connection opened socket.addEventListener('open', function (event) { socket.send('Hello Server!'); }); //or socket.onopen = function(event) { socket.send('Hello Server!'); }; // Listen for messages socket.addEventListener('message', function (event) { console.log('Message from server ', event.data); }); ~~~ ## **常量** | 常量 | 值 | | --- | --- | | WebSocket.CONNECTING | 0 | | WebSocket.OPEN | 1 | | WebSocket.CLOSING | 2 | | WebSocket.CLOSED | 3 | ## **屬性** ### [`WebSocket.binaryType`](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket/binaryType)：使用二進制的數據類型連接。 ### [`WebSocket.bufferedAmount`](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket/bufferedAmount)只讀：未發送至服務器的字節數。 ### [`WebSocket.extensions`](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket/extensions)只讀：服務器選擇的擴展。 [異常處理](%E5%BC%82%E5%B8%B8%E5%A4%84%E7%90%86.md) ### [`WebSocket.protocol`](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket/protocol)只讀：服務器選擇的下屬協議。 ### [`WebSocket.readyState`](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket/readyState)只讀：當前的鏈接狀態。 ### [`WebSocket.url`](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket/url)只讀：WebSocket 的絕對路徑。 >[warning]事件 ### [`WebSocket.onclose`](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket/close_event)：用于指定連接關閉后的回調函數。 ### [`WebSocket.onerror`](https://developer.mozilla.org/zh-CN/docs/conflicting/Web/API/WebSocket/error_event)：用于指定連接失敗后的回調函數。 ### [`WebSocket.onmessage`](https://developer.mozilla.org/zh-CN/docs/conflicting/Web/API/WebSocket/message_event)：用于指定當從服務器接受到信息時的回調函數。 ### [`WebSocket.onopen`](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket/open_event)：用于指定連接成功后的回調函數。 ## [方法](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket#method_overview "Permalink to 方法") [`WebSocket.close([code[, reason]])`](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket/close "WebSocket.close([code[, reason]])")：關閉當前鏈接。 [`WebSocket.send(data)`](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket/send "WebSocket.send(data)")：對要傳輸的數據進行排隊。 ## **事件** WebSocket繼承 [`EventTarget`](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget)所以可使用`addEventListener()`或將一個事件監聽器賦值給本接口的?`oneventname`屬性，來監聽下面的事件。或將一個事件監聽器賦值給本接口的?`on事件名稱`屬性，來監聽下面的事件。 ### [**close**](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket/close_event "close")：當一個?`WebSocket`?連接被關閉時觸發。 ``` socket.addEventListener('close', function (event) { console.log('WebSocket is closed ', event.data); }); ``` 也可以通過[`onclose`](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket/close_event "onclose")屬性來設置。 ~~~ WebSocket.onclose = function(event) { console.log("WebSocket is closed now."); }; ~~~ ### [**error**](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket/error_event "error")：當一個?`WebSocket`?連接因錯誤而關閉時觸發，例如無法發送數據時。也可以通過[`onerror`](https://developer.mozilla.org/zh-CN/docs/conflicting/Web/API/WebSocket/error_event "onerror")屬性來設置. ### [**message**](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket/message_event "message")：當通過?`WebSocket`?收到數據時觸發。也可以通過[`onmessage`](https://developer.mozilla.org/zh-CN/docs/conflicting/Web/API/WebSocket/message_event "onmessage")屬性來設置。 ### [**open**](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket/open_event "open")：當一個?`WebSocket`?連接成功時觸發。也可以通過[`onopen`](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket/open_event "onopen")屬性來設置。