WebSocket 教程

2,631 阅读4分钟

WebSocket 是一种网络通信协议,WebSocket如何使用的。

WebSocket 跟 HTTP 相比的话。 HTTP每次通信需要客户端向服务端发送请求。

WebSocket 可以做到由服务端向客户端发送消息,这样的话,有些信息可以做到实时更新,无需客户端向服务端发送请求获得最新的数据。当然客户端也是可以向服务端发送信息的,实现全双工通信(跟手机打电话一样,双方都能双向传输资料),

WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就可以创建持久性链接,并进行双向数据传输

其他特点:

  1. 较少的控制开销,相对比HTTP发送请求来说,
  2. 更强的实时性,由于协议是全双工,所以服务器可以随时主动向客户端下发数据,相对比HTTP来说需要客户端向服务器发送请求才能拿到数据来说
  3. 保持链接状态。跟HTTP不同,WebSocket 需要先创建链接,这就使得其成为一种有状态的协议,之后通信则会省略一些状态信息。而HTTP请求可能需要在每个请求都携带状态信息(例如身份验证)
  4. 更好的二进制支持。WebSocket 定义了二进制帧,相对HTTP,可以更轻松处理二进制内容
  5. 没有同源策略,客户端可以与任意服务器通信
  6. 协议标识符是 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() 方法用于向服务器发送数据。

  1. 发送文本的例子。
ws.send("your message")
  1. 发送 Blob 对象的例子
var file = document.querySelector('input=[type="file"]').files[0]
ws.send(file)
  1. 发送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…