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")属性来设置。