朱兆平 / vue_cli · 提交

转到一个项目

作者 shenhailong
提交 36d4f1cd784397730299f1116d2d8a66fae60320 1 个父辈 d095773d

引入 jquery 

引入前端 websocket 通信
内嵌 并排对比
正在显示 6 个修改的文件 包含 184 行增加 和 16 行删除
@@ -2,6 +2,7 @@ var path = require('path') @@ -2,6 +2,7 @@ var path = require('path')
2 var utils = require('./utils') 2 var utils = require('./utils')
3 var config = require('../config') 3 var config = require('../config')
4 var vueLoaderConfig = require('./vue-loader.conf') 4 var vueLoaderConfig = require('./vue-loader.conf')
  5 +var webpack=require('webpack')
5 6
6 function resolve(dir) { 7 function resolve(dir) {
7 return path.join(__dirname, '..', dir) 8 return path.join(__dirname, '..', dir)
@@ -65,5 +66,12 @@ module.exports = { @@ -65,5 +66,12 @@ module.exports = {
65 ], 66 ],
66 } 67 }
67 ] 68 ]
68 - } 69 + },
  70 + plugins: [
  71 + new webpack.ProvidePlugin({
  72 + $:"jquery",
  73 + jQuery:"jquery",
  74 + "windows.jQuery":"jquery"
  75 + })
  76 + ]
69 } 77 }
@@ -5485,6 +5485,12 @@ @@ -5485,6 +5485,12 @@
5485 "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=", 5485 "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
5486 "dev": true 5486 "dev": true
5487 }, 5487 },
  5488 + "jquery": {
  5489 + "version": "3.4.1",
  5490 + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
  5491 + "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==",
  5492 + "dev": true
  5493 + },
5488 "js-base64": { 5494 "js-base64": {
5489 "version": "2.5.1", 5495 "version": "2.5.1",
5490 "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz", 5496 "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
@@ -58,6 +58,7 @@ @@ -58,6 +58,7 @@
58 "function-bind": "^1.0.2", 58 "function-bind": "^1.0.2",
59 "html-webpack-plugin": "^2.28.0", 59 "html-webpack-plugin": "^2.28.0",
60 "http-proxy-middleware": "^0.19.1", 60 "http-proxy-middleware": "^0.19.1",
  61 + "jquery": "^3.4.1",
61 "json-loader": "^0.5.4", 62 "json-loader": "^0.5.4",
62 "mockjs": "^1.0.1-beta3", 63 "mockjs": "^1.0.1-beta3",
63 "node-sass": "^4.5.0", 64 "node-sass": "^4.5.0",
  1 +// import axios from "axios";
  2 +// let base = 'empt-location/userPayOrder';
  3 +// var socket;
  4 +//
  5 +// function openSocket(orderNum) {
  6 +// console.log(orderNum);
  7 +// if(typeof(WebSocket) == "undefined") {
  8 +// console.log("您的浏览器不支持WebSocket");
  9 +// }else{
  10 +// console.log("您的浏览器支持WebSocket");
  11 +// //实现化WebSocket对象，指定要连接的服务器地址与端口 建立连接
  12 +// //等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");
  13 +// //var socketUrl="${request.contextPath}/im/"+$("#userId").val();
  14 +// var socketUrl="http://localhost:10003/imserver/"+orderNum;
  15 +// socketUrl=socketUrl.replace("https","ws").replace("http","ws");
  16 +// console.log(socketUrl);
  17 +// if(socket!=null){
  18 +// socket.close();
  19 +// socket=null;
  20 +// }
  21 +// socket = new WebSocket(socketUrl);
  22 +// //打开事件
  23 +// socket.onopen = function() {
  24 +// console.log("websocket已打开");
  25 +// //socket.send("这是来自客户端的消息" + location.href + new Date());
  26 +// };
  27 +// //获得消息事件
  28 +// socket.onmessage = function(msg) {
  29 +//
  30 +// console.log(msg.data);
  31 +// return msg;
  32 +// //发现消息进入 开始处理前端触发逻辑
  33 +// };
  34 +// //关闭事件
  35 +// socket.onclose = function() {
  36 +// console.log("websocket已关闭");
  37 +// };
  38 +// //发生了错误事件
  39 +// socket.onerror = function() {
  40 +// console.log("websocket发生了错误");
  41 +// }
  42 +// }
  43 +// }
  44 +// function sendMessage() {
  45 +// if(typeof(WebSocket) == "undefined") {
  46 +// console.log("您的浏览器不支持WebSocket");
  47 +// }else {
  48 +// console.log("您的浏览器支持WebSocket");
  49 +// console.log('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
  50 +// socket.send('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
  51 +// }
  52 +// }
  53 +//
  54 +//
  55 +// export default {
  56 +// openSocket
  57 +// }
  58 +
  59 +const WSS_URL = `ws://localhost:10003/imserver`
  60 +let Socket = ''
  61 +let setIntervalWesocketPush = null
  62 +
  63 +/**建立连接 */
  64 +export function createSocket() {
  65 + var socketUrl="http://localhost:10003/imserver";
  66 + socketUrl=socketUrl.replace("https","ws").replace("http","ws");
  67 +
  68 + console.log(socketUrl);
  69 + if (!Socket) {
  70 + console.log('建立websocket连接')
  71 + Socket = new WebSocket(socketUrl)
  72 + Socket.onopen = onopenWS
  73 + Socket.onmessage = onmessageWS
  74 + Socket.onerror = onerrorWS
  75 + Socket.onclose = oncloseWS
  76 + } else {
  77 + console.log('websocket已连接')
  78 + }
  79 +}
  80 +/**打开WS之后发送心跳 */
  81 +export function onopenWS() {
  82 + sendPing() //发送心跳
  83 +}
  84 +/**连接失败重连 */
  85 +export function onerrorWS() {
  86 + clearInterval(setIntervalWesocketPush)
  87 + Socket.close()
  88 + createSocket() //重连
  89 +}
  90 +/**WS数据接收统一处理 */
  91 +export function onmessageWS(e) {
  92 + console.log(e.data);
  93 + window.dispatchEvent(new CustomEvent('onmessageWS', {
  94 + detail: {
  95 + data: e
  96 + }
  97 + }))
  98 +}
  99 +/**发送数据
  100 + * @param eventType
  101 + */
  102 +export function sendWSPush(eventTypeArr) {
  103 + const obj = {
  104 + appId: 'airShip',
  105 + cover: 0,
  106 + event: eventTypeArr
  107 + }
  108 + if (Socket !== null && Socket.readyState === 3) {
  109 + Socket.close()
  110 + createSocket() //重连
  111 + } else if (Socket.readyState === 1) {
  112 + Socket.send(JSON.stringify(obj))
  113 + } else if (Socket.readyState === 0) {
  114 + setTimeout(() => {
  115 + Socket.send(JSON.stringify(obj))
  116 + }, 3000)
  117 + }
  118 +}
  119 +/**关闭WS */
  120 +export function oncloseWS() {
  121 + clearInterval(setIntervalWesocketPush)
  122 + console.log('websocket已断开')
  123 +}
  124 +/**发送心跳 */
  125 +export function sendPing() {
  126 + Socket.send('ping')
  127 + setIntervalWesocketPush = setInterval(() => {
  128 + Socket.send('ping')
  129 + }, 5000)
  130 +}
@@ -12,6 +12,7 @@ import Mock from './mock' @@ -12,6 +12,7 @@ import Mock from './mock'
12 import i18n from './lang' 12 import i18n from './lang'
13 import 'font-awesome/css/font-awesome.min.css' 13 import 'font-awesome/css/font-awesome.min.css'
14 import ElementUI from 'element-ui' 14 import ElementUI from 'element-ui'
  15 +import $ from 'jquery'
15 16
16 //定义一个全局过滤器实现日期格式化 17 //定义一个全局过滤器实现日期格式化
17 Vue.filter('datefmt',function(input,fmtstring){ 18 Vue.filter('datefmt',function(input,fmtstring){
@@ -20,7 +21,8 @@ Vue.filter('datefmt',function(input,fmtstring){ @@ -20,7 +21,8 @@ Vue.filter('datefmt',function(input,fmtstring){
20 21
21 }); 22 });
22 23
23 - 24 +import * as socketApi from './api/socket'
  25 +Vue.prototype.socketApi = socketApi
24 26
25 Vue.config.productionTip = false 27 Vue.config.productionTip = false
26 Mock.bootstrap(); 28 Mock.bootstrap();
@@ -67,7 +67,7 @@ @@ -67,7 +67,7 @@
67 <el-input type="number" style="width:200px" oninput ="value=value.replace(/[^0-9.]/g,'')" v-model.number="waterForm.payFees"></el-input> 67 <el-input type="number" style="width:200px" oninput ="value=value.replace(/[^0-9.]/g,'')" v-model.number="waterForm.payFees"></el-input>
68 </el-form-item> 68 </el-form-item>
69 <el-form-item v-else label="充值金额" prop="payFees"> 69 <el-form-item v-else label="充值金额" prop="payFees">
70 - <el-input type="number" style="width: 802px" oninput ="value=value.replace(/[^0-9]/g,'')" v-model.number="waterForm.payFees"></el-input> 70 + <el-input type="number" style="width: 802px" oninput ="value=value.replace(/[^0-9.]/g,'')" v-model.number="waterForm.payFees"></el-input>
71 </el-form-item> 71 </el-form-item>
72 </el-col> 72 </el-col>
73 </el-form> 73 </el-form>
@@ -90,24 +90,24 @@ @@ -90,24 +90,24 @@
90 </el-main> 90 </el-main>
91 </el-container> 91 </el-container>
92 </template> 92 </template>
93 -<style scoped>  
94 -  
95 -</style>  
96 <script> 93 <script>
97 - import loginUserInfo from '@/api/base' 94 + import loginUserInfo from '@/api/base';
98 import {getList, add, qrCode} from '../../api/empt/userPayOrder'; 95 import {getList, add, qrCode} from '../../api/empt/userPayOrder';
99 - import ElCol from "element-ui/packages/col/src/col" 96 + import ElCol from "element-ui/packages/col/src/col";
100 // import QRCode from 'qrcodejs2' 97 // import QRCode from 'qrcodejs2'
101 - import Vue from 'vue'  
102 - import VueQriously from 'vue-qriously' 98 + import Vue from 'vue';
  99 + import VueQriously from 'vue-qriously';
  100 + import {createSocket, sendWSPush, onmessageWS} from "../../api/socket";
103 Vue.use(VueQriously) 101 Vue.use(VueQriously)
  102 + import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";
104 export default { 103 export default {
105 components: {ElCol}, 104 components: {ElCol},
  105 + components: {ElButton},
106 data() { 106 data() {
107 return{ 107 return{
108 loading:false, 108 loading:false,
109 filters:{ 109 filters:{
110 - roomNumber:'' 110 + roomNumber:'三号楼一层卫生间'
111 }, 111 },
112 electricityForm:{ 112 electricityForm:{
113 overdraftthreshold:'', 113 overdraftthreshold:'',
@@ -139,7 +139,8 @@ @@ -139,7 +139,8 @@
139 shuibiao:'', 139 shuibiao:'',
140 dianbiao:'', 140 dianbiao:'',
141 dialogVisible:false, 141 dialogVisible:false,
142 - Qrcode: '' 142 + Qrcode: '',
  143 + resultMsg:''
143 } 144 }
144 }, 145 },
145 methods:{ 146 methods:{
@@ -201,16 +202,37 @@ @@ -201,16 +202,37 @@
201 this.$refs.waterForm.validate((valid) => { 202 this.$refs.waterForm.validate((valid) => {
202 if (valid) { 203 if (valid) {
203 this.$confirm('确认充值吗？', '提示', {}).then(() => { 204 this.$confirm('确认充值吗？', '提示', {}).then(() => {
204 - this.waterForm.realName = loginUserInfo.username;  
205 - console.log(loginUserInfo.username) 205 + this.waterForm.realName = JSON.parse(sessionStorage.getItem('user')).username;
206 let para = Object.assign({}, this.waterForm); 206 let para = Object.assign({}, this.waterForm);
207 this.loading=true; 207 this.loading=true;
208 qrCode(para).then((res) => { 208 qrCode(para).then((res) => {
209 this.addLoading = false; 209 this.addLoading = false;
210 if (res.data.code == 200) { 210 if (res.data.code == 200) {
211 this.dialogVisible=true; 211 this.dialogVisible=true;
212 - this.Qrcode = res.data.data; 212 + this.Qrcode = res.data.url;
213 this.loading=false; 213 this.loading=false;
  214 + // var socket_ = openSocket.openSocket(res.data.data.orderNum);
  215 + createSocket();
  216 +
  217 + // 监听ws数据响应
  218 + const getDataFunc = function(e) {
  219 + console.log(e.detail.data.data)
  220 + console.log(res.data.data.orderNumber)
  221 + console.log(e.detail.data.data.orderNumber)
  222 + if (e.detail.data.data!==undefined){
  223 + let resultMessage = JSON.parse(e.detail.data.data);
  224 + if(resultMessage.orderNumber===res.data.data.orderNumber){
  225 + if (resultMessage.success === "Y"){
  226 + this.dialogVisible=false;
  227 + alert("支付成功")
  228 + }else {
  229 + this.dialogVisible=false;
  230 + alert("支付失败")
  231 + }
  232 + }
  233 + }
  234 + }
  235 + window.addEventListener('onmessageWS', getDataFunc)
214 }else { 236 }else {
215 this.$message({ 237 this.$message({
216 message: '网络异常', 238 message: '网络异常',
@@ -223,7 +245,6 @@ @@ -223,7 +245,6 @@
223 }); 245 });
224 }, 246 },
225 }, 247 },
226 -  
227 mounted(){ 248 mounted(){
228 249
229 } 250 }