JavaScript WebSocket的简单示例

<body style="text-align:center" onload="init()">
    <input id="shopNameInput" type="text" placeholder="店铺名" /><br />
    <br />
    <input id="commodityNameInput" type="text" placeholder="品名" /><br />
    <br />
    <input id="placeOfOriginInput" type="text" placeholder="产地" /><br />
    <br />
    <input id="unitInput" type="text" placeholder="单位" /><br />
    <br />
    <input id="specInput" type="text" placeholder="规格" /><br />
    <br />
    <input id="gradeInput" type="text" placeholder="等级" /><br />
    <br />
    <input id="barcodeDataInput" type="text" placeholder="条码" /><br />
    <br />
    <input id="retailPriceInput" type="text" placeholder="零售价" /><br />
    <br />
    <input type="button" value="创建WebSocket" onclick="createWebSocket()" />
    <input type="button" value="默认字段" onclick="initFields()" />
    <input type="button" value="打印" onclick="print()" />
    <input type="button" value="取重" onclick="getWeight()" />
    <script type="text/javascript">
        var shopNameInput;
        var commodityNameInput;
        var placeOfOriginInput;
        var unitInput;
        var specInput;
        var gradeInput;
        var barcodeDataInput;
        var retailPriceInput;
        var webSocket;
        var webSocketConnected = false;
        function init() {
            shopNameInput = document.getElementById("shopNameInput");
            commodityNameInput = document.getElementById("commodityNameInput");
            placeOfOriginInput = document.getElementById("placeOfOriginInput");
            unitInput = document.getElementById("unitInput");
            specInput = document.getElementById("specInput");
            gradeInput = document.getElementById("gradeInput");
            barcodeDataInput = document.getElementById("barcodeDataInput");
            retailPriceInput = document.getElementById("retailPriceInput");
        }
        function initFields() {
            shopNameInput.value = "天天果园";
            commodityNameInput.value = "泰国小菠萝";
            placeOfOriginInput.value = "泰国";
            unitInput.value = "袋";
            specInput.value = "500g";
            gradeInput.value = "High Quality";
            barcodeDataInput.value = "8888888888";
            retailPriceInput.value = "999.99";
        }
        function print() {
            if (webSocketConnected) {
                var shopName = shopNameInput.value.trim();
                var commodityName = commodityNameInput.value.trim();
                var placeOfOrigin = placeOfOriginInput.value.trim();
                var unit = unitInput.value.trim();
                var spec = specInput.value.trim();
                var grade = gradeInput.value.trim();
                var barcodeData = barcodeDataInput.value.trim();
                var retailPrice = retailPriceInput.value.trim();
                if (shopName == "") {
                    shopNameInput.focus();
                    shopNameInput.value = "";
                } else {
                    if (commodityName == "") {
                        commodityNameInput.focus();
                        commodityNameInput.value = "";
                    } else {
                        if (placeOfOrigin == "") {
                            placeOfOriginInput.focus();
                            placeOfOriginInput.value = "";
                        } else {
                            if (unit == "") {
                                unitInput.focus();
                                unitInput.value = "";
                            } else {
                                if (spec == "") {
                                    specInput.focus();
                                    specInput.value = "";
                                } else {
                                    if (grade == "") {
                                        gradeInput.focus();
                                        gradeInput.value = "";
                                    } else {
                                        if (barcodeData == "") {
                                            barcodeDataInput.focus();
                                            barcodeDataInput.value = "";
                                        } else {
                                            if (retailPrice == "") {
                                                retailPriceInput.focus();
                                                retailPriceInput.value = "";
                                            } else {
                                                var data = {};
                                                data.type = "print";
                                                data.shop_name = shopName;
                                                data.commodity_name = commodityName;
                                                data.place_of_origin = placeOfOrigin;
                                                data.unit = unit;
                                                data.spec = spec;
                                                data.grade = grade;
                                                data.barcode = barcodeData;
                                                data.retail_price = retailPrice;
                                                webSocket.send(JSON.stringify(data));
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            } else
                alert("未连接至WebSocket服务");
        }
        function createWebSocket() {
            if (webSocketConnected) {
                alert("WebSocket已创建");
            } else {
                webSocket = new WebSocket("ws://localhost:1234");
                webSocket.onopen = function () {
                    webSocketConnected = true;
                    alert("已连接至WebSocket Server");
                };
                webSocket.onerror = function () {
                    alert("通信发生错误");
                };
                webSocket.onclose = function () {
                    webSocketConnected = false;
                    alert("远程主机断开了连接");
                };
                webSocket.onmessage = function (event) {
                    alert(event.data);
                };
            }
        }
        function getWeight() {
            if (webSocketConnected) {
                data = {};
                data.type = "getWeight";
                webSocket.send(JSON.stringify(data));
            } else
                alert("未连接至WebSocket服务");
        }
    </script>
</body>
JavaScript WebSocket的简单示例

猜你喜欢
