websocket 在客户端详细介绍

huaweichenai

在前端(客户端)如何来连接服务端的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
阅读 1.3k
509 声望
103 粉丝
0 条评论
509 声望
103 粉丝
文章目录
宣传栏