websocket的用途及简单使用

WebSocket是在2008年6月推出的一种在单个TCP连接上进行全双工通信的协议。

主要解决了某些场景下消息的及时性,     

    例如:

        1.买电影票--需要及时更新剩余可购买的座位;       

        2,即时聊天--聊天室需要及时收到并展示聊天内容;

        3.股票k线图--需要即时展示股票k线变化;

        4.商品--即时展示商品剩余库存,特别是在抢购的时候;

        5.消息通知--某些状态下比如使用时间到期,

        ......

在websocket之前都是通过http协议的轮询来实现

但是http请求是按次来发生的,直接点就是,每次请求都需要客户端主动发送请求,后台再根据该请求做出响应,存在一对一的关系,这点就非常依赖客户端的主动性

轮询分为两种:

1.短轮询

         一般情况下使用setInterval设置定时器,客户端每经过一段时间向服务器发起一次请求,

存在问题:

        设置时间过短会存在大量无效请求,设置时间过长会导致消息失去及时性

 2.长轮询

        客户端向服务器端发起一次请求,服务器等待状态有更新后做出响应,客户端拿到响应后立刻再向服务器发起一次请求,如果服务器一直等不到状态更新,服务器会一致没有响应返回,时间一长,请求会超时,此时前端可以设置 如果请求超时则作废该请求,立刻重新发起请求,如此不断循环,

存在问题:

        1.也还是会存在大量无效请求,但是相比短轮询无效请求会减少很多

 而现在websocket就不会存在这些问题了,早些时候由于websocket对浏览器兼容性不太好,在使用前一般都需要先判断浏览器是否支持,代码如下

    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8080/websocket");
    } else {
        alert('WebSocket不受当前浏览器支持')
    }

websocket不像http一样按次来发生的,对依赖客户端的主动性这点有比较好,

websocket发起一次连接后,连接是一直持续的,需要关闭的话也需要主动去关闭,在连接期间,客户端可以随时向服务器发送数据,服务器也可以随时向客户端发送数据,不存在一对一的要求

websocket简单使用

    var websocket = ''
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8080/websocket");
    } else {
        alert('WebSocket不受当前浏览器支持')
    }
//websocket事件监听--连接发生错误
    websocket.onerror = function () {
        console.log("WebSocket连接失败");
    };
//websocket事件监听--连接建立成功
    websocket.onopen = function () {
        console.log("WebSocket连接成功");
    }
//websocket事件监听--收到服务器消息
    websocket.onmessage = function (event) {
        console.log("event.data");
    }
//websocket事件监听--关闭WebSocket连接
    websocket.onclose = function () {
        console.log("WebSocket连接关闭");
    }
//手动关闭WebSocket连接,一般放在事件处理里面,需要主动去操作触发
    websocket.close();
//发送消息,message为消息内容,一般放在事件处理里面,需要主动去操作触发
    websocket.send(message);
//注意点:
//1.webSocket本身不存在跨域问题
//2.webSocket本身发送消息是不会携带cookie