1. 简介
WebSocket
对象提供了用于创建和管理 WebSocket 连接,以及可以通过该连接发送和接收数据的 API。
构造函数:WebSocket(url[, protocols])
2. 属性
-
WebSocket.binaryType
使用二进制的数据类型连接。 -
WebSocket.bufferedAmount
只读
未发送至服务器的字节数。 -
WebSocket.extensions
只读
服务器选择的扩展。 -
WebSocket.onclose
用于指定连接关闭后的回调函数。 -
WebSocket.onerror
用于指定连接失败后的回调函数。 -
WebSocket.onmessage
用于指定当从服务器接受到信息时的回调函数。 -
WebSocket.onopen
用于指定连接成功后的回调函数。 -
WebSocket.protocol
只读
服务器选择的下属协议。 -
WebSocket.readyState
只读
当前的链接状态。 -
WebSocket.url
只读
WebSocket 的绝对路径。
3. 方法
-
WebSocket.close([code[, reason]])
关闭当前链接。 -
WebSocket.send(data)
对要传输的数据进行排队。
4. 事件
使用 addEventListener()
或将一个事件监听器赋值给本接口的 oneventname
属性,来监听下面的事件。
close
当一个 WebSocket 连接被关闭时触发。 也可以通过onclose
属性来设置。error
当一个 WebSocket 连接因错误而关闭时触发,例如无法发送数据时。 也可以通过onerror
属性来设置。message
当通过 WebSocket 收到数据时触发。 也可以通过onmessage
属性来设置。open
当一个 WebSocket 连接成功时触发。 也可以通过onopen
属性来设置。
5. 示例
// 创建 WebSocket 连接.
const socket = new WebSocket('ws://localhost:8080');
// 连接成功时触发
socket.addEventListener('open', function (event) {
socket.send('Hello Server!');
});
// 收到数据时触发
socket.addEventListener('message', function (event) {
console.log('Message from server ', event.data);
});
6. 与HTTP协议的异同
- 相同点:
- 都是 TCP 协议;
- 都使用 Request/Response 模型进行连接的建立;
- websocket 是基于 http 的,他们的兼容性都很好;
- 在连接的建立过程中对错误的处理方式相同;
- 都可以在网络中传输数据。
- 不同点:
- websocket 是持久连接,http 是短连接;
- websocket 的协议是以 ws/wss 开头,http 对应的是 http/https;
- websocket 是有状态的,http 是无状态的;
- websocket 连接之后服务器和客户端可以双向发送数据,http 只能是客户端发起一次请求之后,服务器才能返回数据;
- websocket 是可以跨域的;
- websocket 连接建立之后,数据的传输使用帧来传递,不再需要Request消息。