WebSocket详解-优快云博客

WebSocket protocol 是HTML5一种新的协议(protocol)。它是实现了浏览器与服务器全双工通信(full-duplex)。

WebSocket 协议本质上是一个基于 TCP 的协议。同http协议使用http://开头一样，WebSocket协议的URL使用ws://开头，另外安全的WebSocket协议使用wss://开头。

首先申请一个 websocket的构造方法构建一个websocket对象，参数是需要连接的服务器端的地址。 var Socket = new WebSocket(url, [protocol] ); 以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

特点:

事件驱动
异步
使用ws或者wss协议的客户端socket
能够实现真正意义上的推送功能

缺点：

少部分浏览器不支持，浏览器支持的程度与方式有区别。

websocket 两大好处：

Header 互相沟通的Header是很小的-大概只有 2 Bytes
Server Push 服务器可以主动传送数据给客户端

WebSocket的工作流程：

浏览器通过JavaScript向服务端发出建立WebSocket连接的请求，在WebSocket连接建立成功后，客户端和服务端就可以通过
TCP连接传输数据。因为WebSocket连接本质上是TCP连接，不需要每次传输都带上重复的头部数据，所以它的数据传输量比轮询和Comet技术小了很多。
socket 是双向通讯，数据只要渲染到页面上，后台有改动的话，页面会实时更新。

构建websocket对象：

首先申请一个 websocket的构造方法构建一个websocket对象，参数是需要连接的服务器端的地址。 var Socket = new WebSocket(url, [protocol] ); 以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。
在支持WebSocket的浏览器中，在创建socket之后。可以通过onopen，onmessage，onclose即onerror四个事件实现对socket进行响应。

WebSocket 事件（监听函数）：

open Socket.onopen 连接建立时触发
message Socket.onmessage 客户端接收服务端数据时触发
error Socket.onerror 通信发生错误时触发
close Socket.onclose 连接关闭时触发

WebSocket 方法：

Socket.send() 使用连接向远程服务器发送数据
Socket.close() 关闭该websocket链接

webSocket.readyState（webSocket的属性）

readyState属性返回实例对象的当前状态，共有四种：
CONNECTING：值为0，表示正在连接。
OPEN：值为1，表示连接成功，可以通信了。
CLOSING：值为2，表示连接正在关闭。
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

jquery项目 demo：

参考示例： client 先发起握手请求服务器端响应交互数据

<html>
    <body>
        <div id="main">
            <div id="message"></div>
            <p style="color: red;" class="content"></p>
            <span class="changeme">请把我替换掉</span>
        </div>
    </body>
</html>
复制代码

<script type="text/javascript">
    $(".changeme").replaceWith("555);
    var websocket = null;
    
    // 判断当前浏览器是否支持webSocket
    if('websocket' in window) {
        // 创建一个webSocket 链接，URL:127.0.0.1:8080/realTimeWebSocket/webSocket
        // 注：后端Server 在模块realTimeWebSocket下，所以路径下多了一层realTimeWebSocket
        websocket = new Websocket("wss://127.0.0.1:8080/realTimeWebSocket/webSocket");
    }else {
        console.log('当前浏览器 不支持webSocket')
    }
    
    // 连接发生错误的回调方法：
    websocket.onerror = function () {
        setMessageInnerHTML("连接错误！");
    }
    
    // 连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("连接成功！");
    }
    
    // 接收到消息的回调方法，此处添加处理接收消息方法，当前是将接收到的消息显示在网页上
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
        var detail = event.data;
        $(".content").html(detail);
    }
    
    // 连接关闭的回调方法：
    websocket.onclose = function () {
        setMessageInnerHTML("连接关不，如需登录请刷新页面！");
    }
    
    // 监听窗口关闭事件，当窗口关闭时，主动去关闭 websocket 连接，防止连接还没断开就关闭窗口，server 端会抛出异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }
    // 将消息显示在网页上，如果不需要显示在网页上则不调用该分支
    function setMessageInnerHTML(INNERhtml) {
        document.getElementById('message').innerHTML + = innerHTML + '<br/>'
    }
</script>
复制代码

Vue项目 demo：

<template>
    <div>
        <p @click="clickMe()"></p>
    </div>
</template>
复制代码

<script>
    export default {
        data() {
            return {
                websocket:''
            }
        },
        mounted() {
            this.initWebSocket();  // 调取行情
        },
        method: {
            // 当数据切换时需要重新调取行情，重新调取行情不能直接再初始化websocket，需要重新 send websocket数据，
            clickMe() {
                this.websocketonsend();
            },
            // 初始化websocket 
            initWebSocket() {
                const wsuri = 'wss://api.swbei.cn:9501/';
                this.websocket = new WebSocket(wsuri);
                this.websocket.onopen = this.websocketonsend;
                this.websocket.onmessage = this.websocketonmessage;
                this.websocket.onclose = this.websocketonclose;
            },
            websocketonsend(e) {
                this.websocket.send();
            },
            websocketonmessage(e) {
                var data = JSON.parse(e.data);
            },
            websocketonclose(e) {
                this.websocket.close();
            }
        },
        // 离开页面时，关闭websocket
        beforeDestroy() {
            this.websocketclose();
        }
    }
</script>
复制代码