js 使用HTML5 Websoket通信，发送和接收数据案例代码

HTML5 WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

以下 API 用于创建 WebSocket 对象。

之前一直用的ajax通信，项目需要websoket 通信，刚开始不知道要怎么发接口和获取数据，后来学会了也很简单，下面是个简单示例：

    var planWebsocket = null;
    var planIP = "127.0.0.1"; // IP地址
    var planPort = "6081";    // 端口号
    function initWebpack() {//初始化websocket
        if ('WebSocket' in window) {
            planWebsocket = new WebSocket('ws://'+ planIP +':' + planPort + '/vlcWebSocket'); // 通信地址
            planWebsocket.onopen = function (event) {
                console.log('建立连接');
                let sendData = {
                    "command": "getplans", "data": [{"planid": 0}]
                }
                planWebsocket.send(JSON.stringify(sendData)); // 发送获取数据的接口
            }

            planWebsocket.onmessage = function (event) {
                // console.log('收到消息:' + event.data)
                let data = JSON.parse(event.data);
                if (data.command == "getplans") {
                    var planData = data.data;//返回的数据
                    console.log(planData);
                } else if (data.command == "getscenes") {
                    // 其他命令
                }
            }

            planWebsocket.onclose = function (event) {
                console.log('连接关闭');
            }

            planWebsocket.onerror = function () {
                alert('websocket通信发生错误！');
            }
        } else {
            alert('该浏览器不支持websocket!');
        }
    }

    initWebpack(); //调用

 建立连接后，打开控制台。绿色箭头是我发送的数据

 红色箭头是服务器返回的数据，在onmessage 里 根据不同的 接口来 处理数据

 我在点击按钮时发送了另一个接口数据：

let sendData = {
    "command": "openplans", "data": [{"planid": clickPlanId, "cycled": isCycled}]
}
planWebsocket.send(JSON.stringify(sendData));

 我想修改通信地址重新连接websoket，页面样式：

<!--IP设置弹框-->
<div id="ipSetModal" style="display: none;padding: 30px;" class="layui-form layui-form-pane">
    <div class="layui-form-item">
        <label class="layui-form-label">IP地址：</label>
        <div class="layui-input-block">
            <input type="text" name="planIP" id="planIP" autocomplete="off" class="layui-input" value="127.0.0.1">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">端口号：</label>
        <div class="layui-input-block">
            <input type="number" name="planPort" id="planPort" autocomplete="off" class="layui-input" value="6080">
        </div>
    </div>
</div>

function setPlanIp() {
    layer.open({
        type: 1,
        title: "IP设置",
        className: 'layer-con',
        content: $("#ipSetModal")
        , btn: ['确定', '取消']
        , shadeClose: false
        , yes: function (index) {
            var IP = $('#planIP').val();
            var port = $('#planPort').val();
            if (IP == "") {
                layer.msg("请填写IP地址", {icon: 2});
                return
            }
            if (port == "") {
                layer.msg("请填写端口号", {icon: 2});
                return
            }
            planIP = IP;
            planPort = port;
            if (planWebsocket !== undefined) {
                planWebsocket.close();
                initWebpack();
            }
            layer.msg("修改完成", {icon: 1});
            console.log(IP + "port" + port);
            layer.close(index);
        }
    });
}