websocket 在客户端详细介绍

在前端(客户端)如何来链接服务端的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