支付成功html_微信支付整合 Websocket

流程:

1. 整合微信支付
2. 整合 WebSocket
3. 修改微信支付的扫码页面,在里面开启websocket, 参数名为订单号,用于服务器存储,关闭页面的时候关闭连接
4. 修改微信支付的成功回调接口,在内部获取到订单号,然后根据订单号找到 socket 连接,发送数据给页面
5. 页面解析发送的数据,重定向页面
6. 测试地址修改为: http://ceshi.qfjava.cn/payment

1.1微信支付

功能具体参考微信支付功能文档

1.2 整合 Websocket

具体参考 WebSocket 整合,本案例以 Servlet 方式整合的 websocket

##1.3 不同的地方

###1.3.1 扫码的jsp 页面

jsp 中发生的变化,在内部添加了初始化 websocket 的方法,以及将参数的获取方式改为 订单 id

<%--
  Created by IntelliJ IDEA.
  User: jackiechan
  Date: 2018/2/7
  Time: 上午10:20
  To change this template use File | Settings | File Templates.
--%>

1.3.2 微信回调 servlet

此类中变化的地方为 当支付完成后,添加调用了 websocket 的发送消息的方法

package 

1.3.3 WebSocket

此类的变化为 将发送消息的方法修改为静态方法,同时方法中额外添加了一个参数,参数代表的意思是如果是点对点聊天,需要将发送方的 session 传递过来

​

1.4测试

weixin://wxpay/bizpayurl?pr=5D9TfU5 (二维码自动识别)

weixin://wxpay/bizpayurl?pr=5D9TfU5 (二维码自动识别)

1.5 整合 ngixn

如果运行程序的 tomcat 地址是通过 nginx 反向代理配置后访问的,会出现 websocket 无法连接的问题,需要修改 nginx 的配置 例如:

#项目的访问地址,取决于项目实际配置
location /payment {
#tomcat地址
proxy_pass http://127.0.0.1:8090;
#websocket 需要添加以下内容,才可以访问
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Origin xxx;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;
}