websocket 在客户端详细介绍_new websocket(url [, protocols]);

在前端(客户端)如何来连接服务端的websocket来实现通信呢，这里我就来介绍下在客户端websocket的实现

一：创建一个websocket对象

在客户端使用websocket首先需要创建一个wbsocket对象

语法：

webSocket = new WebSocket(url [, protocols]);

参数说明：

url：要连接的URL；这应该是WebSocket服务器将响应的URL，如：ws://127.0.0.1:8888

protocols:此参数为可选项，非必填项，一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议，这样单个服务器可以实现多个WebSocket子协议（例如，您可能希望一台服务器能够根据指定的协议（protocol）处理不同类型的交互）。如果不指定协议字符串，则假定为空字符串。如：

new WebSocket('ws://127.0.0.1:8888', 'public');

如果你设置了protocols参数，这时候前端回想websocket服务端传递一个名为Sec-WebSocket-Protocol的头信息，这时候你需要编写自定义握手事件

异常：

如果你的websocket服务未开启，这时候会抛出一个SECURITY_ERR异常错误，表示正在尝试连接的端口被阻止

二：websocket连接相关的回调函数

1：监听用于指定连接成功后的回调函数

语法：

webSocket.onopen = function(event) {
  console.log("websocket 连接成功");
};

如上表示在与websocket服务器连接成功后，这时候会调用onopen回调函数

2：监听用于指定当从服务器接受到信息时的回调函数

语法：

webSocket.onmessage = function(event) {
  console.log("websocket 传递的消息为:", event.data);
};

如上表示当websocket服务器向客户端发送消息时，这时候会调用onmessage回调函数，其中event.data表示服务端传来的数据

3：监听用于指定连接失败后的回调函数

语法：

webSocket.onerror = function(event) {
  console.error("websocket 连接失败");
};

如上表示在连接websocket服务器出现错误时，这时候会调用onerror回调函数

4：监听用于指定连接关闭后的回调函数

webSocket.onclose = function(event) {
  console.log("WebSocket 客户端连接关闭.");
};

如上表示客户端关闭与websocket通信时，这时候会调用onclose回调函数

如上就是在websocket客户端中常见的监听回调函数

5：我们还可以使用addEventListener回调函数来注册监听事件，只需要将监听事件的on去除即可

如：

// 监听websocket连接成功事件
websocket.addEventListener('open', function (event) {
    console.log(websocket 连接成功')
});

三：websocket客户端常见的方法

1：向服务器发送数据

语法：

websocket.send(data);

参数说明：

data：表示需要用于传输至websocket服务器的数据

2：关闭当前与websocket服务之间的连接

语法：

webSocket.close([code[, reason]])

参数说明：

code：一个数字状态码，它解释了连接关闭的原因，非必填项，默认为1005

reason：这是解释连接关闭的原因字符串，为非必填项

四：websocket客户端常见的属性

1：获取websocket当前连接状态

websocket.readyState  //返回0表示正在连接 1连接成功 2正在关闭连接 3关闭连接

2：获取服务器选择的下属协议，及new WebSocket(url, protocols)的第二个参数值

websocket.protocol

3：WebSocket 的绝对路径

websocket.url