websocket实现信息通知窗口
需求
用户登陆后，服务器实时推送用户的订单提醒，用websocket处理。
方案
两个js，notify-socket.js处理socket的连接，和socket的处理。
nofify.js，做右下角弹窗处理，用到了layui的弹窗组件。
notify-socket.js
/**
* Created by nuanfeng on 2016/9/20.
*/
define(function(require, exports, module) {
require('jQuery');
var util = require('util'),
jsonApi = require('jsonApi'),
Notify = require('notify');
var Elems = {
};
socketArea = {
/**
* 注册socket身份凭证
*/
registerSocket: function(){
var self = this,
uri = jsonApi.socketRegister;
console.log('e');
try {
util.ajaxFn(uri, {}, function (data) {
self.initSocket(data);
}, function () {
setTimeout(function () {
console.log("重新注册socket...");
self.registerSocket();
}, 5000);
});
} catch (e) {
setTimeout(function () {
console.log("重新注册socket...");
self.registerSocket();
}, 5000);
}
},
/**
* 心跳事件
*/
heartBeatEvent: function(socket, data) {
window.setInterval(function () {
console.log((new Date()).Format('yyyy-MM-dd hh:mm:ss') + "\t心跳事件....");
if (socket) {
data.dataType = 1000;
socket.send(JSON.stringify(data));
}
}, 1000 * 60);
},
/**
* 初始化socket
* @param data
*/
initSocket: function(data) {
var self = this;
var data = data.data;
var socket = new WebSocket('ws://192.168.10.111:9092/websocket');
//var socket = new WebSocket('ws://192.168.10.19:9092/websocket');
//open socket
socket.onopen = function (event) {
data.dataType = 1;
//send a init msg
socket.send(JSON.stringify(data));
//listen
socket.onmessage = function (event) {
var data = JSON.parse(event.data);
console.log("onmessage -->> ", event);
//self.msgHandle(JSON.parse(event.data));
var notify = new Notify();
notify.showMessage(JSON.parse(event.data));
};
socket.onclose = function (event) {
console.log("onclose -- >>>于" + new Date(), event);
}
}
self.heartBeatEvent(socket, data);
},
/**
* 处理
* @param data
*/
msgHandle: function(data) {
var self = this;
if (data.flag == 1) { // success
switch (data.dataType) {
case 1: //注册
self.registerSocketEvent(data);
break;
case 2: // 支付
self.paySocketEvent(data);
break;
case 3: // 需求
self.needSocketEvent(data);
break;
case 4: // 下单
self.orderSocketEvent(data);
break;
case 5: // 新用户审核
self.userCheckSocketEvent(data);
break;
case 6: // 提现
self.withDrawSocketEvent(data);
break;
case 7: // 退款
self.refundSocketEvent(data);
break;
case 0: // default
break;
}
}
},
/**
* 注册事件
* @param data
*/
registerSocketEvent: function (data) {
console.log("恭喜,于" + (new Date()).Format('yyyy-MM-dd hh:mm:ss') + "注册成功...");
},
/**
* 支付事件
* @param data
*/
paySocketEvent: function (data) {
console.log("您有新的订单已支付...");
mallMenu.refreshShipStats(true);
},
/**
* 需求事件
* @param data
*/
needSocketEvent: function (data) {
console.log("您有新的需求需要报价...");
mallMenu.refreshNeedStats(true);
},
/**
* 下单事件
* @param data
*/
orderSocketEvent: function (data) {
console.log("您有新的订单已生成");
},
/**
* 用户审核事件
* @param data
*/
userCheckSocketEvent: function (data) {
console.log("你有新的用户需要审核...");
// TODO: 根据不同的data跳转不同的列表页面
mallMenu.refreshUserStats(true);
},
/**
* 提现申请事件
* @param data
*/
withDrawSocketEvent: function (data) {
console.log("您有新的提现申请需要处理...");
mallMenu.refreshFinance(true);
},
/**
* 退款申请事件
* @param data
*/
refundSocketEvent: function (data) {
console.log("您有新的退款申请需要处理...");
mallMenu.refreshFinanceStats(true);
}
};
module.exports = socketArea;
});
notify.js
/**
* Created by nuenfeng on 2016/9/20.
*/
define(function(require, exports, module) {
function Notify(params, callback) {
this.init();
}
Notify.prototype.init = function () {
console.log('notify init...')
}
Notify.prototype.showMessage = function(data){
var msg;
if (data.dataType==1 || data.dataType==8) {
//return;
} else {
msg = data.data.message;
}
var html = '<div class="cont">';
html += '<p>' + msg + '</p>';
switch(data.dataType) {
case 1:
//html += '<a load="./main-pages/goods/goods-list.html" class="sui-btn btn-primary btn-radius btn-small" id="J_NoticeBtn">立即查看</a>';
break;
case 2:
html += '<a href="/seller/father/orders.html?orderStatus=1" class="sui-btn btn-primary btn-radius btn-small" id="J_NotifyBtn">立即查看</a>';
break;
case 4:
html += '<a href="/seller/father/orders.html?orderStatus=0" class="sui-btn btn-primary btn-radius btn-small" id="J_NotifyBtn">立即查看</a>';
break;
}
html += '</div>';
layer.open({
type: 1,
title: '通知',
closeBtn: 1,
shade: [0],
area: ['340px', '215px'],
offset: 'rb', //右下角弹出
time: 5000, //5秒后自动关闭
content: html,
shift: 2,
skin: 'notify-panel',
move: false
});
voicePlay(data.dataType);
}
var voicePlay = function(dataType){
var audio = new Audio("/js/components/notify/voice-newmsg.mp3");
audio.play();
}
module.exports = Notify;
});
