WebSocket 是一种网络通信协议,WebSocket如何使用的。
WebSocket 跟 HTTP 相比的话。 HTTP每次通信需要客户端向服务端发送请求。
WebSocket 可以做到由服务端向客户端发送消息,这样的话,有些信息可以做到实时更新,无需客户端向服务端发送请求获得最新的数据。当然客户端也是可以向服务端发送信息的,实现全双工通信(跟手机打电话一样,双方都能双向传输资料),
WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就可以创建持久性链接,并进行双向数据传输
其他特点:
- 较少的控制开销,相对比HTTP发送请求来说,
- 更强的实时性,由于协议是全双工,所以服务器可以随时主动向客户端下发数据,相对比HTTP来说需要客户端向服务器发送请求才能拿到数据来说
- 保持链接状态。跟HTTP不同,WebSocket 需要先创建链接,这就使得其成为一种有状态的协议,之后通信则会省略一些状态信息。而HTTP请求可能需要在每个请求都携带状态信息(例如身份验证)
- 更好的二进制支持。WebSocket 定义了二进制帧,相对HTTP,可以更轻松处理二进制内容
- 没有同源策略,客户端可以与任意服务器通信
- 协议标识符是 ws 如果加密则 wss 服务器地址就是URL
简单的例子
// 创建 webSocket 链接
let ws = new WebSocket("wss://echo.websocket.org")
// 链接 打开之后
ws.addEventListener('open',function(event){
console.log('connection open...')
ws.send('Hello WebSocket') // send 方法 对要传输的数据进行排队
})
// message 收到 webSocket 发来的消息触发
ws.addEventListener('message',function(event){
console.log('message from server:'+event.data)
ws.close() // close 方法 关闭当前链接
})
// WebSocket 链接被关闭 触发
ws.addEventListener('close',function(){
console.log('connection closed');
})
客户端的API
WebSocket 对象作为一个构造函数,用于新建WebSocket 实例。
let ws = new WebSocket('ws://localhost:8080');
// 非加密
// 执行上面语句之后,客户端就会与服务器进行连接。
//
WebSocket 属性
WebSocket.readyState 只读
readyState 属性返回实例对象的当前状态,共有四种。
- CONNECTING:值为0,表示正在连接。
- OPEN : 值为1,表示连接成功,可以通信了
- CLOSING:值为2,表示连接正在关闭。
- CLOSED:值为3,表示连接已经关闭或者没有连接成功
// 可以使用switch进行一个判断选择
// 上述 readyState 返回的状态也可以向下面这样访问
WebSocket.CONNECTING 0
WebSocket.OPEN 1
WebSocket.CLOSING 2
WebSocket.CLOSED 3
WebSocket.onopen
实例对象的onopen属性,用于指定连接成功后的回调函数。
WebSocket.onclose
实例对象的onclose属性,用于指定连接关闭后的回调函数。
WebSocket.onmessage
实例对象的onmessage属性,用于指定收到服务器数据后的回调函数。
注意:服务器数据可能是文本,也可能是二进制数据(blob对象或 Arraybuffer 对象)
ws.onmessage = function(event){
if(typeof event.data === String){
console.log('received data string')
}
if(event.data instanceof ArrayBuffer){
var buffer = event.data
console.log('reveived arrayBuffer')
}
}
除了动态判断收到的数据类型,也可以使用 binaryType属性,显示指定收到的二进制数据类型。
// 收到的是 blob 数据
ws.binaryType = 'blob'
ws.onmessage = function(e){
console.log(e.data.size)
}
// 收到的是 arrayBuffer 的数据
ws.binaryType = 'arraybuffer'
ws.onmessage = function(e){
console.log(e.data.byteLength)
}
WebSocket.send()
实例对象的 send() 方法用于向服务器发送数据。
- 发送文本的例子。
ws.send("your message")
- 发送 Blob 对象的例子
var file = document.querySelector('input=[type="file"]').files[0]
ws.send(file)
- 发送ArrayBuffer 对象的例子。
var img = canvar_context.getImageData(0,0,400,320);
var binary = new Uint8Array(img.data.length);
for(var i=0;i<img.data.lengthl;i++){
binary[i] = img.data[i];
}
ws.send(binary.buffer)
WebSocket.bufferedAmount
实例对象的 bufferedAmount 属性,表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束。
var data = new ArrayBuffer(10000000);
socket.send(data);
if(socket.bufferedAmount === 0 ){
// 发送完毕
}else{
// 发送还没结束
}
WebSocket.onerror
实例对象的onerror属性,用于指定报错时的回调函数。
WebSocket 方法
WebSocket.close()
关闭当前连接
WebSocket.send()
对要传输的数据进行排队
WebSocket 事件
// 使用 addEventListener()或将一个事件监听器服务给本接口的oneventname属性。
// 来监听下面的事情。
let ws = new WebSocket('ws://localhost:8080');
close
当一个WebSocket 连接被关闭时触发。 也跨域通过onclose属性来设置
ws.addEventListener('close',function(){
// 处理关闭事件
})
ws.onclose = callback
error
当一个WebSocket连接因错误而关闭时触发,例如无法发送数据时。也可以通过onerror 属性来设置
ws.addEventListener('error',function(){
//报错处理
})
ws.onerror = callback
message
当通过WebSocket收到数据时触发。也可以通过onmessage 属性来设置。
ws.addEventListener('message',function(event){
var data = event.data
// 数据处理
})
ws.onmessage = callback
open
当一个 WebSocket 连接成功时触发。也可以通过onopen属性来设置。
ws.addEventListener('open',function(){
ws.send('Hello')
})
ws.onopen = callback
参考:
developer.mozilla.org/zh-CN/docs/… www.ruanyifeng.com/blog/2017/0…