利用websocket实现微信二维码码扫码支付

由于业务需要引入微信扫码支付，故利用websocket来实现消息推送技术。

实现大致流程：首先客户端点击微信支付按钮，触发微信支付接口，同时微信支付响应成功参数后，连接websocket客户端，此刻利用微信支付返回的参数生成一个二维码弹框，此时连接websocket

客户端时会发送一个指定的消息内容，然后等待用户扫码支付完成后，微信支付异步通知的地方执行websocket消息推送，根据指定的消息内容，获取到websocketsession,然后对其进行消息推送，等客户

端接收到消息之后，即可执行二维码的关闭操作及成功跳转至商户页面等。

　　既然要利用一门技术来实现业务需求，必定要先了解其技术的原理，及这门技术用于解决什么问题。

　　在项目中，常规都是前端向后端发送请求后，才能获取到后端的数据。但是在一些及时消息的处理上，这样的处理效率有些捉襟见肘；在以往获得即时数据时，比较low的方案就是ajax轮询查询，或者可以使用socket的长连接；但是这些在实际的操作上都比较消耗资源；而websocket在这方面有效的解决这个问题--WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端，客户端接收到消息可即时对消息进行处理，一些三方推送平台也提供了更为完善的消息推送技术如：GoEasy

 第一步：搭建一个简易的springmvc的工程了

引入如下依赖

<dependencies>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context-support</artifactId>
      <version>4.1..RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>4.1..RELEASE</version>
    </dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
      <scope>test</scope>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>4.1..RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>4.1..RELEASE</version>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-websocket</artifactId>
      <version>4.1..RELEASE</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-messaging</artifactId>
      <version>4.1..RELEASE</version>
    </dependency>

    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.</version>
    </dependency>
  </dependencies>

配置web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.4"
         xmlns="http://java.sun.com/xml/ns/j2ee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

  <servlet>
    <servlet-name>SpringMVC</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:spring-mvc.xml</param-value>
    </init-param>
  <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>SpringMVC</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

</web-app>
        

配置springmvc

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context-4.0.xsd">
    <context:component-scan base-package="com.test.*"></context:component-scan>
    <mvc:annotation-driven></mvc:annotation-driven>

    <mvc:resources location="/js/" mapping="/js/**" />
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/views/"/>
    <property name="suffix" value=".jsp"/>
    </bean>
</beans>

工程目录如下

核心代码

package com.test.controller;

import com.test.websocket.MyHandler;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * Created by edison on 2019/1/13.
 */
@Controller
@RequestMapping("/index")
public class IndexController {

    @Autowired
    private MyHandler myHandler;
    //返回字符串
    @ResponseBody
    @RequestMapping(value ="/notice",produces="text/html;charset=UTF-8")
    public String notice(String outTradeNo){
        myHandler.sendMessageToUser(outTradeNo);
        return "支付成功";
    }

//返回jsp视图
    @RequestMapping(value ="/pay")
    public String index(Model model) {
        model.addAttribute("name", "模拟支付页面展示");
        return "index";
    }
}

<%--
  Created by IntelliJ IDEA.
  User: edison
  Date: 2019/1/13
  Time: 18:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
${name}
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        console.log("模拟支付开始");
        //假设微信返回的交易流水号是1234
        var outTradeNo = "1234";
        console.log("模拟调用支付返回参数结束");
        var ws = new WebSocket("ws://localhost:8080/websocket/myHandler")
        ws.onopen = function () {
            console.log("开始连接服务端websocket");
            var createobj = {}
            createobj.action = "create";
            createobj.outTradeNo = outTradeNo;
            ws.send(JSON.stringify(createobj));
        }
        ws.onclose = function () {
            console.log("onclose");
        }

        ws.onmessage = function (msg) {
            console.log(msg.data);
            var closeobj = {}
            closeobj.action = "remove";
            closeobj.outTradeNo = outTradeNo;
            ws.send(JSON.stringify(closeobj));
        }
    })
</script>
</html>

模拟步骤一

首先访问模拟支付url

其次再模拟异步回调

最终发现模拟支付页面成功收到了异步回调，打印关闭二维码的操作，同时再向服务端发送消息，移除掉map里面的连接