websocket项目电子签字使用场景

Posted 2021-11-25 banxian-yi

场景描述：进入页面时，如果设置强制签字，发送签字webSocket连接，同时页面有个重新签字按钮，这个按钮会多次调用

第一步：先建立一个websocket的js文件，名叫signSocket.js内容如下：

 1 /* websocket */
 2 var socket;  
 3 var connectStatus = false;
 4 
 5 function Connect(){  
 6     try{  
 7         if(socket){
 8             socket.close();
 9             socket = null;
10         }
11         socket=new WebSocket(‘ws://127.0.0.1:40000‘);              
12     }catch(e){  
13         console.error("WebSocket 连接失败" ,e) 
14         return;  
15     }  
16     socket.onopen = sOpen;  
17     socket.onerror = sError;
18     socket.onmessage= sMessage;
19     socket.onclose= sClose;
20 }  
21 function sOpen(){
22     console.info("WebSocket sOpen" ,"打开连接成功")
23     connectStatus = true;
24 }
25 function sError(e){
26     console.error("WebSocket sError" ,e) 
27 //    error("签字程序连接失败,请刷新页面再试");
28     var iframe = $(document.getElementsByTagName("iframe"));
29     if(iframe && iframe.length > 0){
30         iframe[0].contentWindow.layer.closeAll();
31 //        iframe[0].contentWindow.error("签字程序连接失败,请刷新页面再试"); 
32         if(iframe[0].contentWindow.signatureError){
33             iframe[0].contentWindow.signatureError();
34         }
35     }
36      socket.close();
37 }
38 function sMessage(msg){  
39     console.info("WebSocket sMessage" ,msg) 
40     if(isExitsFunction(‘ifSignatureSuccess‘)){
41         ifSignatureSuccess(msg.data);
42     }
43 }
44 function sClose(e){
45     console.info("WebSocket sClose" ,e) 
46     connectStatus = false;
47 }  
48 
49 function Send(recordId, url){
50     Connect();
51     var intCount = 0;
52     var interval = setInterval(function(){
53         console.info("sockect 等待连接...")
54         if(intCount++ > 20){
55              clearInterval(interval);
56         }
57         if(connectStatus && socket){
58             if(!recordId){
59                 socket.send("finish");
60             }else{
61                 socket.send("open," + url + "," + recordId);
62             }
63             clearInterval(interval);
64         }
65     },100);
66 } 
67 
68 function Close(){
69     socket.close();
70 }
71 /* websocket end */

第二步：页面引用，与发送请求

<script type=‘text/javascript‘ src=‘${ctxStatic}/js/signSockect.js?v=2018031914‘></script>

function SignatureIdByOs(id){
        console.info("当前os版本" + gs.ClientOs());
        if(gs.ClientOs().indexOf("Win") > -1){
            SignatureId(id);
        }else {
            SignatureIdApp(id);
        }
    }

    function SignatureId(id) {
//               signatureStart();
        console.info(id,‘${host}${ftx}/api/disclosure?vaccid=S_‘ + localCode + "_" + id);
        Send(id, ‘${host}${ftx}/api/disclosure?vaccid=S_‘ + localCode + "_" + id);
    }

第三步：进入方法，返回数据给页面

@RequestMapping("/disclosure")
public String disclosure(HttpServletRequest request, String vaccid, Model model) {
   logger.info("签字获取告知书vaccid" + vaccid);
   String disContext = "";
   ...

   Map<String, String[]> args = request.getParameterMap();
   model.addAttribute("pid", "");
   model.addAttribute("childcode", "");
   model.addAttribute("currentPrice", "");
   model.addAttribute("paymentType", "");
   model.addAttribute("rid", "");
   model.addAttribute("createBy", "");
   
   if(args.get("pid") != null) model.addAttribute("pid", args.get("pid")[0]);
   if(args.get("childcode") != null) model.addAttribute("childcode", args.get("childcode")[0]);
   if(args.get("currentPrice") != null) model.addAttribute("currentPrice", args.get("currentPrice")[0]);
   if(args.get("paymentType") != null) model.addAttribute("paymentType", args.get("paymentType")[0]);
   if(args.get("rid") != null) model.addAttribute("rid", args.get("rid")[0]);
   if(args.get("createBy") != null) model.addAttribute("createBy", args.get("createBy")[0]);
   return "modules/child_vaccinaterecord/signatureShow";
}