zoukankan      html  css  js  c++  java
  • webSocket 简单使用

        $(document).ready(
                
            
                function() {
                    
                    var webSocket = {};
                    if ("WebSocket" in window){
         //var webSocket = new WebSocket("ws://zhanlijue.natapp1.cc/vm-mobile-service/webSocket");
         }
         else{
         console.info("不支持 WebSocket!");
         }
                    webSocket.onopen = function(evt){
    webSocket.send("发送数据");
    console.info("数据发送中...");
    };
    webSocket.onmessage = function (evt){
    console.info("收到消息:"+evt.data);
    };
    webSocket.onclose = function(evt){
    console.info("连接已关闭...");
    };
    window.onbeforeunload = function(){
        //webSocket.close();
    }
     
     
                    var root = getRootPath();
                    var vm = new Vue({
                        el : '#app',
                        data : {
                            vmCode:"1914000000",
                            payType:1,
                            customer:null,
                            itemList : "",
                            machineList : "",
                            orderList : "",
                            checkedItems:[]
                        },
                        watch : {
                        },
                        methods : {
                            'findCustomer' : function() {
                                var _this = this;
                                $.get(root + "/customer/detail",function(data, status) {
                                        _this.customer = data.data;
                                        _this.findMachineList();
                                });
                            },
                            'findItemList' : function(vmCode) {
                                var _this = this;
                                _this.vmCode = vmCode;
                                $.get(root + "/item/list?vmCode="+vmCode,function(data, status) {
                                        _this.itemList = data.data;
                                        _this.getChecked();
                                });
                            },
                            'findMachineList' : function() {
                                var _this = this;
                                $.get(root + "/machine/list",{latitude:_this.customer.latitude,longitude:_this.customer.longitude},
                                        function(data, status) {
                                            _this.machineList = data.data;
                                });
                            },
                            'findOrderList' : function() {
                                var _this = this;
                                $.get(root + "/order/list",{state:10003},function(data, status) {
                                    console.info(data.data);    
                                    _this.orderList = data.data;
                                });
                            },
                            'create':function(){
                                var _this = this;
                                var checkItemAndCountArr = new Array();
                                $.each(_this.checkedItems,function(i,e){
                                    checkItemAndCountArr.push({basicItemId:e,num:3});
                                })
                                var itemsJson = JSON.stringify(checkItemAndCountArr);
                                $.post(root + "/order/create",{'items':itemsJson,'payType':1,'vmCode':_this.vmCode},function(data,status){
                                    _this.pay(data.data);
                                });
                            },
                            'pay':function(data){
                                var payCode = data.payCode;
                                var returnUrl = 'http://zhanlijue.natapp1.cc/vm-mobile-service/web/menu.html';
                                $.get(root + "/wechatPay",{'payCode':payCode,'returnUrl':returnUrl},function(data,status){
                                    eval(data.data);
                                });
                            },
                            'pickup':function(payCode){
                                $.get(root + "/order/pickup/",{'payCode':payCode},function(data,status){
                                    alert(data);
                                    console.info(data);
                                })
                            },
                            getChecked: function() {
                                return this.itemList.filter(item => item.checked).map(item => item.basicItemId);
                            }
                        }
                    })
                    vm.findCustomer();
                    
                    function getRootPath() {
                        var curWwwPath = window.document.location.href;
                        var pathName = window.document.location.pathname;
                        var pos = curWwwPath.indexOf(pathName);
                        var localhostPaht = curWwwPath.substring(0, pos);
                        var projectName = pathName.substring(0, pathName.substr(1)
                                .indexOf('/') + 1);
                        return (localhostPaht + projectName);
                    }

                });
  • 相关阅读:
    ftpserver / FTP model:PORT/PASV/EPRT/EPSV
    windows 环境下搭建electricSearch+kibana
    springBoot2.x整合 logback实现日志记录
    springBoot使用aop添加处理rest请求 打印请求时间 和请求参数
    springCloud 使用feign复制请求头调用其他服务 content-length不一致导致调用失败
    mysql查询重复用户最新的一条数据
    【开源】 开源社区
    【数据库】 SQL 使用注意点
    【数据库】 SQL 常用语句
    【数据结构】 List 简单实现
  • 原文地址:https://www.cnblogs.com/zhuwu/p/8241540.html
Copyright © 2011-2022 走看看