上个小节我们写好了利用WebSocket推送付款结果给前端页面，那么前端页面这里应该先建立WebSocket连接，然后才能接收到后端推送过来的通知消息。

一、创建WebSocket连接

因为以前我们用不上WebSocket，所以在main.js文件中，我把创建WebSocket连接的语句给注释掉了。现在我们要去掉注释，让前端项目启动之后就立即创建WebSocket连接。

//使用WebSocket，后端项目给前端页面推送通知更
import VueNativeSock from "vue-native-websocket-vue3";
app.use(VueNativeSock,"ws://192.168.99.216:8090/emos-api/socket",{ 
    "format": "json"
});

二、发送轮询请求

连接创建之后，真正开始使用是在用户登陆系统之后，也就是进入到main.vue页面。我在该页面的created()函数中，添加了轮询的ping请求，防止WebSocket连接因为超时被切断。这段WebSocket代码被注释掉了，我们要去掉注释。

created() {
    let that = this;
    that.routeHandle(that.$route);
    //当WebSocket连接创建成功之后，会触发这个回调函数的运行
    that.$options.sockets.onopen = function(resp) {
        //发送心跳检测，避免超时后服务端切断连接
        setInterval(function() {
            that.$socket.sendObj({ opt: 'ping' });
        }, 60 * 1000);
    };
},

三、接收付款结果

在amect-pay.vue页面中，我们要编写JS代码接收后端推送的消息。大家需要特别注意，在接收消息之前，我们要先想后端发送一条消息。为什么要这么做呢？这是因为后端onMessage()方法，遇到ping请求，是不会把Session缓存起来的。所以我们要随便发一个不是ping的请求给后端，这样它才能缓存Session，将来才可以给我推送消息。

init: function(id) {
    let that = this;
    that.visible = true;
    that.dataForm.id = id;
    that.result = false;
    that.$nextTick(() => {
        //从浏览器Cookie中获取Token令牌
        let token = that.$cookies.get('token');
        //向WebSocket服务类发送消息，让服务类缓存Session对象，可以推送消息给当前页面
        that.$socket.sendObj({ opt: 'pay_amect', token: token });
        //接收服务端推送的消息
        that.$options.sockets.onmessage = function(resp) {
            let data = resp.data;
            // console.log(data)
            if (data == '收款成功') {
                that.result = true;
            }
        };
        that.$http('amect/createNativeAmectPayOrder', 'POST', { amectId: id }, true, function(resp) {
            that.qrCode = resp.qrCodeBase64;
        });
    });
},