您现在的位置是:网站首页>>PHP>>webSocket

websocket 在客户端详细介绍

发布时间:2020-01-10 11:28:53作者:wangjian浏览量:235点赞量:0

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


0 +1