内网穿透笔记

内网穿透

1、配置natapp隧道，确保127.0.0.1可以访问

2、下载客户端放在盘下任意位置并配置config.ini文件 只需要在authtoken后写上隧道的authtoken

#将本文件放置于natapp同级目录 程序将读取 [default] 段
#在命令行参数模式如 natapp -authtoken=xxx 等相同参数将会覆盖掉此配置
#命令行参数 -config= 可以指定任意config.ini文件
[default]
authtoken=0b8834ef49c17311                      #对应一条隧道的authtoken
clienttoken=             #对应客户端的clienttoken,将会忽略authtoken,若无请留空
log=none  
#log 日志文件,可指定本地文件, none=不做记录,stdout=直接屏幕输出 ,默认为none
loglevel=ERROR                  
#日志等级 DEBUG, INFO, WARNING, ERROR 默认为 DEBUG
http_proxy=                     
#代理设置 如 http://10.123.10.10:3128 非代理上网用户请务必留空

3、启动natapp.exe观察出现如下信息即可

Forwarding http://746iqr.natappfree.cc -> 127.0.0.1:8080

4、前端代码

var vm = new Vue({
				el:"#container",
				data:{
					orderInfo:{}
				},
//vue声明周期 ：  
//创建对象---beforeCreate---初始化data---created---加载模版---beforeMount---渲染数据---mounted
				created:function(){
					var jsonstr = localStorage.getItem("orderInfo");
					if(jsonstr!=null){
						localStorage.removeItem("orderInfo");
					}
					this.orderInfo = eval("("+jsonstr+")");
				},
				mounted:function(){
					//渲染二维码
					var qrcode = new QRCode($("#payQrcodeDiv")[0],{
						width:200,
						height:200
					});
					qrcode.makeCode(this.orderInfo.payUrl);
					
					//前端发送websocket连接请求
					console.log(this.orderInfo.orderId);
					var webSocketUrl = webSocketBaseUrl + "webSocket/"+ this.orderInfo.orderId;//在base.js中配置var webSocketBaseUrl = "ws://localhost:8080/"，在此页面引入base.js
					var websocket = new WebSocket( webSocketUrl );
					console.log(webSocketUrl);
					//只要后端通过websocket向此连接发消息就会触发onmessage事件
					websocket.onmessage = function(event){
						var msg = event.data;
						if(msg=="1"){
							$("#div1").html("订单支付成功!");
						}
					}

后段代码接收websocket请求

@Component
@ServerEndpoint("/webSocket/{oid}")   //服务节点 表示我这个类可以接收别人的请求
public class WebSocketServer {

    private static ConcurrentHashMap<String, Session> sessionMap = new ConcurrentHashMap<>();
    /**
     * 前端发送请求建立websocket连接，就会执行@OnOpen方法
     **/
    @OnOpen
    //PathParam就是websocket的注解 类似@PathVariable
    public void open(@PathParam("oid") String orderId, Session session) {
        System.out.println("------------建立连接：" + orderId);
        sessionMap.put(orderId, session);
    }

    /**
     * 前端关闭页面或者主动关闭websocket连接，都会执行 @OnClose
     **/
    @OnClose
    public void close(@PathParam("oid") String orderId) {
        sessionMap.remove(orderId);
    }

    public static void sendMsg(String orderId, String msg) {
        try {
            Session session = sessionMap.get(orderId);
            session.getBasicRemote().sendText(msg);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}

需要创建配置类WebSocketConfig

@Configuration
public class WebSocketConfig {   
    @Bean  
    public ServerEndpointExporter getServerEndpointExporter(){  
        return new ServerEndpointExporter();  
    }
}

支付完成时会执行orderController中的以下代码

data.put("notify_url", "http://746iqr.natappfree.cc/pay/callback");

从而进行内网穿透进入PayController类中执行方法

@RestController
@RequestMapping("/pay")
public class PayController {

    @Autowired
    private OrderService orderService;

    /**
     * 回调接口:当用户支付成功之后，微信支付平台就会请求这个接口，将支付状态的数据传递过来
     */
    @RequestMapping("/callback")
    public String paySuccess(HttpServletRequest request) throws Exception {
        System.out.println("--------------------callback");
        // 1.接收微信支付平台传递的数据（使用request的输入流接收）
        ServletInputStream is = request.getInputStream();
        byte[] bs = new byte[1024];
        int len = -1;
        StringBuilder builder = new StringBuilder();
        while ((len = is.read(bs)) != -1) {
            builder.append(new String(bs, 0, len));
        }
        //微信支付传回来的是xml格式数据，以标签名作为key对应的值作为value
        String s = builder.toString();
        //  System.out.println(s);
        //使用帮助类将xml接口的字符串装换成map
        Map<String, String> map = WXPayUtil.xmlToMap(s);

        if (map != null && "success".equalsIgnoreCase(map.get("result_code"))) {
            //支付成功
            //2.修改订单状态为“待发货/已支付”
            String orderId = map.get("out_trade_no");
            int i = orderService.updateOrderStatus(orderId, "2");
            System.out.println("--orderId:" + orderId);
            //3.通过websocket连接，向前端推送消息
            WebSocketServer.sendMsg(orderId, "1");

            //4.响应微信支付平台,防止频繁提示
            if (i > 0) {
                HashMap<String, String> resp = new HashMap<>();
                resp.put("return_code", "success");
                resp.put("return_msg", "OK");
                resp.put("appid", map.get("appid"));
                resp.put("result_code", "success");
                return WXPayUtil.mapToXml(resp);
            }
        }
        return null;
    }

}

最后前段接收到付款成功的信息，执行响应

	websocket.onmessage = function(event){
						var msg = event.data;
						if(msg=="1"){
							$("#div1").html("订单支付成功!");
						}
					}

最后前段接收到付款成功的信息，执行响应

```js
	websocket.onmessage = function(event){
						var msg = event.data;
						if(msg=="1"){
							$("#div1").html("订单支付成功!");
						}
					}