先来一个常用例子
// WebSocket构造函数,创建WebSocket对象let ws = new WebSocket('ws://localhost:8888')// 连接成功后的回调函数ws.onopen = function (params) {console.log('客户端连接成功')// 向服务器发送消息ws.send('hello')};// 从服务器接受到信息时的回调函数ws.onmessage = function (e) {console.log('收到服务器响应', e.data)};// 连接关闭后的回调函数ws.onclose = function(evt) {console.log("关闭客户端连接");};// 连接失败后的回调函数ws.onerror = function (evt) {console.log("连接失败了");};
下面详细说明常用的属性和方法
更全面的官网的文档可以去这里看:点击查看
下面是我总结的内容
WebSocket
WebSocket
对象提供了用于创建和管理 WebSocket
连接,以及可以通过该连接发送和接收数据的 API。
var ws= new WebSocket(url, protocols);
参数
url
:要连接的 URL;这应该是 WebSocket 服务器将响应的 URL。
protocols(可选)
:一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议,这样单个服务器可以实现多个 WebSocket 子协议(可以通过一台服务器根据指定的协议(protocol)处理不同类型的交互)。如果不指定协议字符串,则假定为空字符串。
属性
1. readyState
属性返回实例对象的当前状态
CONNECTING
:值为0,表示正在连接。
OPEN
:值为1,表示连接成功,可以通信。
CLOSING
:值为2,表示连接正在关闭。
CLOSED
:值为3,表示连接已经关闭,或者打开连接失败。
示例
switch (ws.readyState) {case WebSocket.CONNECTING:// 也可以用0// do somethingbreak;case WebSocket.OPEN:// 也可以用1// do somethingbreak;case WebSocket.CLOSING:// 也可以用2// do somethingbreak;case WebSocket.CLOSED:// 也可以用3// do somethingbreak;default:// this never happensbreak;}
2. onopen
连接成功后的回调函数
当WebSocket
的连接状态readyState
变为1
时调用,这意味着当前连接已经准备好发送和接受数据。
使用方法
ws.onopen = function () {ws.send('Hello Server!');}
或者
ws.addEventListener('open', function (event) {ws.send('Hello Server!');});
3. onmessage
从服务器接受到信息时的回调函数
message
事件会在 WebSocket
接收到新消息时被触发
使用方法
ws.onmessage = function(event) {// 接收到的数据var data = event.data;// 其他代码};
或者
ws.addEventListener("message", function(event) {// 接收到的数据var data = event.data;// 其他代码});
注意:服务器推送的数据可能有多种格式,需要我们动态判断,也可以通过 binaryType
属性设置
判断 / 设置 数据格式
// 判断ws.onmessage = function(event){if(typeof event.data === String) {console.log("返回数据是字符串");}}// binaryType 属性设置ws.binaryType = "arraybuffer";ws.onmessage = function(e) {// 收到的是 ArrayBuffer 数据console.log(e.data.byteLength);};
4. onclose
连接关闭后的回调函数
onclose
在 WebSocket
连接的readyState
变为 CLOSED
或3
时被调用,它接收一个名字为close
的 CloseEvent
事件
使用方法
ws.onclose = function(event) {var code = event.code;// 表示服务端发送的关闭码var reason = event.reason;// 表示服务器关闭连接的原因var wasClean = event.wasClean;// 表示连接是否完全关闭// 其他代码};
或者
ws.addEventListener("close", function(event) {var code = event.code;// 表示服务端发送的关闭码var reason = event.reason;// 表示服务器关闭连接的原因var wasClean = event.wasClean;// 表示连接是否完全关闭// 其他代码});
关闭码对照表:点击查看
5. onerror
连接失败后的回调函数
当websocket
的连接由于一些错误事件的发生 (例如无法发送一些数据) 而被关闭时,一个error
事件将被引发。
使用方法
ws.onerror = function(event) {console.log('连接错误: ', event);};
或者
ws.addEventListener('error', function (event) {console.log('连接错误: ', event);});
6. bufferedAmount
未发送至服务器的字节数
bufferedAmount
是一个只读属性,用于返回已经被send()
方法放入队列中但还没有被发送到网络中的数据的字节数。一旦队列中的所有数据被发送至网络,则该属性值将被重置为 0
。但是,若在发送过程中连接被关闭,则属性值不会重置为 0
。如果你不断地调用send()
,则该属性值会持续增长。
使用方法
// 创建数据var data = new ArrayBuffer(10000000);// 发送数据ws.send(data);// 判断数据是否if (socket.bufferedAmount === 0) {// 数据发送完成} else {// 还有数据未发送完成}
方法
1. send()
对要传输的数据进行排队
send()
方法将需要通过 WebSocket
链接传输至服务器的数据排入队列,并根据所需要传输的 data bytes
的大小来增加 bufferedAmount
的值。若数据无法传输(例如数据需要缓存而缓冲区已满)时,套接字会自行关闭。
使用方法
ws.send('your message');
注意:用于传输至服务器的数据。它必须是以下类型之一:
USVString
:文本字符串。字符串将以 UTF-8 格式添加到缓冲区,并且 bufferedAmount 将加上该字符串以 UTF-8 格式编码时的字节数的值。
ArrayBuffer
:您可以使用一有类型的数组对象发送底层二进制数据;其二进制数据内存将被缓存于缓冲区,bufferedAmount 将加上所需字节数的值。
Blob
:Blob 类型将队列 blob 中的原始数据以二进制中传输。 bufferedAmount 将加上原始数据的字节数的值。
ArrayBufferView
:您可以以二进制帧的形式发送任何 JavaScript 类数组对象 ;其二进制数据内容将被队列于缓冲区中。值 bufferedAmount 将加上必要字节数的值。
2. close()
关闭当前链接
close()
方法关闭 WebSocket
连接或连接尝试(如果有的话)。如果连接已经关闭,则此方法不执行任何操作。
使用方法
// WebSocket.close(code, reason)ws.close();
参数:
code(可选)
:一个数字状态码,它解释了连接关闭的原因。如果没有传这个参数,默认使用 1005。
reason(可选)
:一个人类可读的字符串,它解释了连接关闭的原因。这个 UTF-8 编码的字符串不能超过 123 个字节。
数字状态码对照表:点击查看
到这里就结束了,根据需求使用就可以了。