作者 shenhailong

引入 jquery

引入前端 websocket 通信
... ... @@ -2,6 +2,7 @@ var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
var webpack=require('webpack')
function resolve(dir) {
return path.join(__dirname, '..', dir)
... ... @@ -65,5 +66,12 @@ module.exports = {
],
}
]
}
},
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
]
}
... ...
... ... @@ -5485,6 +5485,12 @@
"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
"dev": true
},
"jquery": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
"integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==",
"dev": true
},
"js-base64": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
... ...
... ... @@ -58,6 +58,7 @@
"function-bind": "^1.0.2",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.19.1",
"jquery": "^3.4.1",
"json-loader": "^0.5.4",
"mockjs": "^1.0.1-beta3",
"node-sass": "^4.5.0",
... ...
// import axios from "axios";
// let base = 'empt-location/userPayOrder';
// var socket;
//
// function openSocket(orderNum) {
// console.log(orderNum);
// if(typeof(WebSocket) == "undefined") {
// console.log("您的浏览器不支持WebSocket");
// }else{
// console.log("您的浏览器支持WebSocket");
// //实现化WebSocket对象,指定要连接的服务器地址与端口 建立连接
// //等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");
// //var socketUrl="${request.contextPath}/im/"+$("#userId").val();
// var socketUrl="http://localhost:10003/imserver/"+orderNum;
// socketUrl=socketUrl.replace("https","ws").replace("http","ws");
// console.log(socketUrl);
// if(socket!=null){
// socket.close();
// socket=null;
// }
// socket = new WebSocket(socketUrl);
// //打开事件
// socket.onopen = function() {
// console.log("websocket已打开");
// //socket.send("这是来自客户端的消息" + location.href + new Date());
// };
// //获得消息事件
// socket.onmessage = function(msg) {
//
// console.log(msg.data);
// return msg;
// //发现消息进入 开始处理前端触发逻辑
// };
// //关闭事件
// socket.onclose = function() {
// console.log("websocket已关闭");
// };
// //发生了错误事件
// socket.onerror = function() {
// console.log("websocket发生了错误");
// }
// }
// }
// function sendMessage() {
// if(typeof(WebSocket) == "undefined") {
// console.log("您的浏览器不支持WebSocket");
// }else {
// console.log("您的浏览器支持WebSocket");
// console.log('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
// socket.send('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
// }
// }
//
//
// export default {
// openSocket
// }
const WSS_URL = `ws://localhost:10003/imserver`
let Socket = ''
let setIntervalWesocketPush = null
/**建立连接 */
export function createSocket() {
var socketUrl="http://localhost:10003/imserver";
socketUrl=socketUrl.replace("https","ws").replace("http","ws");
console.log(socketUrl);
if (!Socket) {
console.log('建立websocket连接')
Socket = new WebSocket(socketUrl)
Socket.onopen = onopenWS
Socket.onmessage = onmessageWS
Socket.onerror = onerrorWS
Socket.onclose = oncloseWS
} else {
console.log('websocket已连接')
}
}
/**打开WS之后发送心跳 */
export function onopenWS() {
sendPing() //发送心跳
}
/**连接失败重连 */
export function onerrorWS() {
clearInterval(setIntervalWesocketPush)
Socket.close()
createSocket() //重连
}
/**WS数据接收统一处理 */
export function onmessageWS(e) {
console.log(e.data);
window.dispatchEvent(new CustomEvent('onmessageWS', {
detail: {
data: e
}
}))
}
/**发送数据
* @param eventType
*/
export function sendWSPush(eventTypeArr) {
const obj = {
appId: 'airShip',
cover: 0,
event: eventTypeArr
}
if (Socket !== null && Socket.readyState === 3) {
Socket.close()
createSocket() //重连
} else if (Socket.readyState === 1) {
Socket.send(JSON.stringify(obj))
} else if (Socket.readyState === 0) {
setTimeout(() => {
Socket.send(JSON.stringify(obj))
}, 3000)
}
}
/**关闭WS */
export function oncloseWS() {
clearInterval(setIntervalWesocketPush)
console.log('websocket已断开')
}
/**发送心跳 */
export function sendPing() {
Socket.send('ping')
setIntervalWesocketPush = setInterval(() => {
Socket.send('ping')
}, 5000)
}
\ No newline at end of file
... ...
... ... @@ -12,6 +12,7 @@ import Mock from './mock'
import i18n from './lang'
import 'font-awesome/css/font-awesome.min.css'
import ElementUI from 'element-ui'
import $ from 'jquery'
//定义一个全局过滤器实现日期格式化
Vue.filter('datefmt',function(input,fmtstring){
... ... @@ -20,7 +21,8 @@ Vue.filter('datefmt',function(input,fmtstring){
});
import * as socketApi from './api/socket'
Vue.prototype.socketApi = socketApi
Vue.config.productionTip = false
Mock.bootstrap();
... ...
... ... @@ -67,7 +67,7 @@
<el-input type="number" style="width:200px" oninput ="value=value.replace(/[^0-9.]/g,'')" v-model.number="waterForm.payFees"></el-input>
</el-form-item>
<el-form-item v-else label="充值金额" prop="payFees">
<el-input type="number" style="width: 802px" oninput ="value=value.replace(/[^0-9]/g,'')" v-model.number="waterForm.payFees"></el-input>
<el-input type="number" style="width: 802px" oninput ="value=value.replace(/[^0-9.]/g,'')" v-model.number="waterForm.payFees"></el-input>
</el-form-item>
</el-col>
</el-form>
... ... @@ -90,24 +90,24 @@
</el-main>
</el-container>
</template>
<style scoped>
</style>
<script>
import loginUserInfo from '@/api/base'
import loginUserInfo from '@/api/base';
import {getList, add, qrCode} from '../../api/empt/userPayOrder';
import ElCol from "element-ui/packages/col/src/col"
import ElCol from "element-ui/packages/col/src/col";
// import QRCode from 'qrcodejs2'
import Vue from 'vue'
import VueQriously from 'vue-qriously'
import Vue from 'vue';
import VueQriously from 'vue-qriously';
import {createSocket, sendWSPush, onmessageWS} from "../../api/socket";
Vue.use(VueQriously)
import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";
export default {
components: {ElCol},
components: {ElButton},
data() {
return{
loading:false,
filters:{
roomNumber:''
roomNumber:'三号楼一层卫生间'
},
electricityForm:{
overdraftthreshold:'',
... ... @@ -139,7 +139,8 @@
shuibiao:'',
dianbiao:'',
dialogVisible:false,
Qrcode: ''
Qrcode: '',
resultMsg:''
}
},
methods:{
... ... @@ -201,16 +202,37 @@
this.$refs.waterForm.validate((valid) => {
if (valid) {
this.$confirm('确认充值吗?', '提示', {}).then(() => {
this.waterForm.realName = loginUserInfo.username;
console.log(loginUserInfo.username)
this.waterForm.realName = JSON.parse(sessionStorage.getItem('user')).username;
let para = Object.assign({}, this.waterForm);
this.loading=true;
qrCode(para).then((res) => {
this.addLoading = false;
if (res.data.code == 200) {
this.dialogVisible=true;
this.Qrcode = res.data.data;
this.Qrcode = res.data.url;
this.loading=false;
// var socket_ = openSocket.openSocket(res.data.data.orderNum);
createSocket();
// 监听ws数据响应
const getDataFunc = function(e) {
console.log(e.detail.data.data)
console.log(res.data.data.orderNumber)
console.log(e.detail.data.data.orderNumber)
if (e.detail.data.data!==undefined){
let resultMessage = JSON.parse(e.detail.data.data);
if(resultMessage.orderNumber===res.data.data.orderNumber){
if (resultMessage.success === "Y"){
this.dialogVisible=false;
alert("支付成功")
}else {
this.dialogVisible=false;
alert("支付失败")
}
}
}
}
window.addEventListener('onmessageWS', getDataFunc)
}else {
this.$message({
message: '网络异常',
... ... @@ -223,7 +245,6 @@
});
},
},
mounted(){
}
... ...