websocket概述

websocket是一种沟通协议, 这个协议是一种连接服务端和客户端的持久化的TCP链接.
任何客户端和服务端都可以使用该协议, 但是主要还是浏览器和服务端. 通过websocket, 服务端可以主动传递数据给客户端, 不需要像http那样,由客户端先发起请求.

websocket客户端用法


const socket = new WebSocket('websocket url');


//事件函数
socket.onopen = function(e) {
   
}

socket.onmessage = function(e) {

}

socket.onclose = function(e) {

}

socket.onerror = function(e) {
  
}

//只读属性
socket.url
socket.protocol
socket.extensions
socket.bufferedAmount

//可读写属性
socket.binaryType
socket.readyState


//函数属性
socket.close();
socket.send();

建立连接

首先我们需要创建一个WebSocket的实例. 实例创建后, 其实就已经开始了与服务端建立连接. 建立连接后, 监听的onopen事件会响应. 我们可以通过以下代码来测试效果.

const socket = new WebSocket('ws://echo.websocket.org');
socket.onopen = function(e) {
  console.log('已经建立连接')
}

建立了连接后, 可以观察下websocket的连接状态. 状态的确定是通过readyState这个属性来观察. 它有这几个值:

值	状态	描述
0	CONNECTING	连接服务器中...
1	OPEN	已经建立连接, 可以与服务端进行沟通
2	CLOSING	关闭连接中...
3	CLOSED	已关闭

接收消息

接收消息的处理, 是由一个接收消息的事件来作为回调处理.

 socket.onmessage = function(e) {
   console.log(e)
 }

当服务端发送消息给客户端的时候, 该message事件, 则会执行绑定的回调函数中.

发生错误

如果客户端与服务端沟通过程中, 发生了错误. 则会执行绑定的错误函数.

socket.onerror = function(e) {
  console.log("error throw");
}

连接关闭

客户端与服务端关闭了websocket链接, 则会执行关闭事件

socket.onclose = function(e) {
  console.log('closed');
}

客户端主动关闭连接, 是调用close函数来执行. close函数执行后, 也会执行onclose事件.

socket.close()

close函数, 有两个可选参数, 第一个参数是code: 代码编号, 第二个参数是reason: 关闭的原因.

socket.close(2100, "关闭问题")

code为数值类型, reason则为字符串类型, 且小于123个字节.

发送消息

发送消息的函数, 直接是一个send来处理.

socket.send("消息内容............")

发送的消息过程中, 我们的发送的时候, readyState状态, 应该是属于open状态. 否则会抛出对应的异常.

在发送消息时，我们可以设置发送消息的类型，这个属性为binaryType。它有两个值： blob和arrayBuffer. 默认情况下我们是arrayBuffer类型。我们可以发送字符类型。

socket.binaryType = "arrayBuffer";

这个情况下我们在onmessage的时候，获取到的数据也是为arrayBuffer. 可以直接打印出来。

如果我们指定为

socket.binaryType = "blob";

这时候，我们发送的数据也必须是二进制类型： Blob类型。我们需要通过Blob对象来构造相关的数据，然后进行发送。比如

const blob = new Blob(["hello, world"])
socket.send(blob);

在onmessage事件中，获取到的数据也将是一个blob对象数据。

  socket.onmessage = function(e) {
	    console.log(e.data.text()); //这样将会转化为文本数据
	}

总结

在实际项目中，我们会遇到种种不一样的实际连接问题，这个需要大家静下心来分析其中程序的每一步流程，真正了解websocket的实现过程。

后续，我们会编写服务端的websocket，来了解完整的websocket的用法。

WebSocket客户端的实现