由於業務需要引入微信掃碼支付，故利用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.6.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>4.1.6.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.6.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-websocket</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-messaging</artifactId>
<version>4.1.6.RELEASE</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.47</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裏面的連接
本文章為轉載內容，我們尊重原作者對文章享有的著作權。如有內容錯誤或侵權問題，歡迎原作者聯繫我們進行內容更正或刪除文章。
