需求

用户登陆后,服务器实时推送用户的订单提醒,用websocket处理。

方案

两个js,notify-socket.js处理socket的连接,和socket的处理。

nofify.js,做右下角弹窗处理,用到了layui的弹窗组件。

notify-socket.js

  1. /**
  2. * Created by nuanfeng on 2016/9/20.
  3. */
  4.  
  5. define(function(require, exports, module) {
  6. require('jQuery');
  7.  
  8. var util = require('util'),
  9. jsonApi = require('jsonApi'),
  10. Notify = require('notify');
  11.  
  12. var Elems = {
  13.  
  14. };
  15.  
  16. socketArea = {
  17. /**
  18. * 注册socket身份凭证
  19. */
  20. registerSocket: function(){
  21. var self = this,
  22. uri = jsonApi.socketRegister;
  23. console.log('e');
  24. try {
  25. util.ajaxFn(uri, {}, function (data) {
  26.  
  27. self.initSocket(data);
  28. }, function () {
  29. setTimeout(function () {
  30. console.log("重新注册socket...");
  31. self.registerSocket();
  32. }, 5000);
  33. });
  34. } catch (e) {
  35. setTimeout(function () {
  36. console.log("重新注册socket...");
  37. self.registerSocket();
  38. }, 5000);
  39. }
  40. },
  41.  
  42. /**
  43. * 心跳事件
  44. */
  45. heartBeatEvent: function(socket, data) {
  46. window.setInterval(function () {
  47. console.log((new Date()).Format('yyyy-MM-dd hh:mm:ss') + "\t心跳事件....");
  48. if (socket) {
  49. data.dataType = 1000;
  50. socket.send(JSON.stringify(data));
  51. }
  52. }, 1000 * 60);
  53. },
  54.  
  55. /**
  56. * 初始化socket
  57. * @param data
  58. */
  59. initSocket: function(data) {
  60. var self = this;
  61. var data = data.data;
  62. var socket = new WebSocket('ws://192.168.10.111:9092/websocket');
  63. //var socket = new WebSocket('ws://192.168.10.19:9092/websocket');
  64.  
  65. //open socket
  66. socket.onopen = function (event) {
  67. data.dataType = 1;
  68.  
  69. //send a init msg
  70. socket.send(JSON.stringify(data));
  71.  
  72. //listen
  73. socket.onmessage = function (event) {
  74. var data = JSON.parse(event.data);
  75. console.log("onmessage -->> ", event);
  76. //self.msgHandle(JSON.parse(event.data));
  77. var notify = new Notify();
  78. notify.showMessage(JSON.parse(event.data));
  79. };
  80.  
  81. socket.onclose = function (event) {
  82. console.log("onclose -- >>>于" + new Date(), event);
  83. }
  84. }
  85. self.heartBeatEvent(socket, data);
  86. },
  87.  
  88. /**
  89. * 处理
  90. * @param data
  91. */
  92. msgHandle: function(data) {
  93. var self = this;
  94.  
  95. if (data.flag == 1) { // success
  96. switch (data.dataType) {
  97. case 1: //注册
  98. self.registerSocketEvent(data);
  99. break;
  100. case 2: // 支付
  101. self.paySocketEvent(data);
  102. break;
  103. case 3: // 需求
  104. self.needSocketEvent(data);
  105. break;
  106. case 4: // 下单
  107. self.orderSocketEvent(data);
  108. break;
  109. case 5: // 新用户审核
  110. self.userCheckSocketEvent(data);
  111. break;
  112. case 6: // 提现
  113. self.withDrawSocketEvent(data);
  114. break;
  115. case 7: // 退款
  116. self.refundSocketEvent(data);
  117. break;
  118. case 0: // default
  119. break;
  120. }
  121. }
  122. },
  123.  
  124. /**
  125. * 注册事件
  126. * @param data
  127. */
  128. registerSocketEvent: function (data) {
  129. console.log("恭喜,于" + (new Date()).Format('yyyy-MM-dd hh:mm:ss') + "注册成功...");
  130. },
  131.  
  132. /**
  133. * 支付事件
  134. * @param data
  135. */
  136. paySocketEvent: function (data) {
  137. console.log("您有新的订单已支付...");
  138. mallMenu.refreshShipStats(true);
  139. },
  140.  
  141. /**
  142. * 需求事件
  143. * @param data
  144. */
  145. needSocketEvent: function (data) {
  146. console.log("您有新的需求需要报价...");
  147. mallMenu.refreshNeedStats(true);
  148. },
  149.  
  150. /**
  151. * 下单事件
  152. * @param data
  153. */
  154. orderSocketEvent: function (data) {
  155. console.log("您有新的订单已生成");
  156. },
  157.  
  158. /**
  159. * 用户审核事件
  160. * @param data
  161. */
  162. userCheckSocketEvent: function (data) {
  163. console.log("你有新的用户需要审核...");
  164. // TODO: 根据不同的data跳转不同的列表页面
  165. mallMenu.refreshUserStats(true);
  166. },
  167.  
  168. /**
  169. * 提现申请事件
  170. * @param data
  171. */
  172. withDrawSocketEvent: function (data) {
  173. console.log("您有新的提现申请需要处理...");
  174. mallMenu.refreshFinance(true);
  175. },
  176.  
  177. /**
  178. * 退款申请事件
  179. * @param data
  180. */
  181. refundSocketEvent: function (data) {
  182. console.log("您有新的退款申请需要处理...");
  183. mallMenu.refreshFinanceStats(true);
  184.  
  185. }
  186.  
  187. };
  188.  
  189. module.exports = socketArea;
  190.  
  191. });

 

notify.js

  1. /**
  2. * Created by nuenfeng on 2016/9/20.
  3. */
  4.  
  5. define(function(require, exports, module) {
  6. function Notify(params, callback) {
  7. this.init();
  8. }
  9.  
  10. Notify.prototype.init = function () {
  11. console.log('notify init...')
  12. }
  13.  
  14. Notify.prototype.showMessage = function(data){
  15. var msg;
  16. if (data.dataType==1 || data.dataType==8) {
  17. //return;
  18. } else {
  19. msg = data.data.message;
  20. }
  21.  
  22. var html = '<div class="cont">';
  23. html += '<p>' + msg + '</p>';
  24. switch(data.dataType) {
  25. case 1:
  26. //html += '<a load="./main-pages/goods/goods-list.html" class="sui-btn btn-primary btn-radius btn-small" id="J_NoticeBtn">立即查看</a>';
  27. break;
  28. case 2:
  29. html += '<a href="/seller/father/orders.html?orderStatus=1" class="sui-btn btn-primary btn-radius btn-small" id="J_NotifyBtn">立即查看</a>';
  30. break;
  31. case 4:
  32. html += '<a href="/seller/father/orders.html?orderStatus=0" class="sui-btn btn-primary btn-radius btn-small" id="J_NotifyBtn">立即查看</a>';
  33. break;
  34. }
  35. html += '</div>';
  36. layer.open({
  37. type: 1,
  38. title: '通知',
  39. closeBtn: 1,
  40. shade: [0],
  41. area: ['340px', '215px'],
  42. offset: 'rb', //右下角弹出
  43. time: 5000, //5秒后自动关闭
  44. content: html,
  45. shift: 2,
  46. skin: 'notify-panel',
  47. move: false
  48. });
  49. voicePlay(data.dataType);
  50. }
  51.  
  52. var voicePlay = function(dataType){
  53. var audio = new Audio("/js/components/notify/voice-newmsg.mp3");
  54. audio.play();
  55. }
  56.  
  57. module.exports = Notify;
  58. });

  

websocket业务代码的更多相关文章

  1. Magicodes.WeiChat——ASP.NET Scaffolding生成增删改查、分页、搜索、删除确认、批量操作、批量删除等业务代码

    关于T4代码生成这块,我之前写过几篇帖子,如:<Magicodes.NET框架之路——让代码再飞一会(ASP.NET Scaffolding)>(http://www.cnblogs.co ...

  2. JVM 性能调优实战之:使用阿里开源工具 TProfiler 在海量业务代码中精确定位性能代码

    本文是<JVM 性能调优实战之:一次系统性能瓶颈的寻找过程> 的后续篇,该篇介绍了如何使用 JDK 自身提供的工具进行 JVM 调优将 TPS 由 2.5 提升到 20 (提升了 7 倍) ...

  3. 唱吧DevOps的落地,微服务CI/CD的范本技术解读----最大的难点并不是实际业务代码的编写,而是服务的监控和调试以及容器的编排

    1.业务架构:从单体式到微服务 K歌亭是唱吧的一条新业务线,旨在提供线下便捷的快餐式K歌方式,用户可以在一个电话亭大小的空间里完成K歌体验.K歌亭在客户端有VOD.微信和Web共三个交互入口,业务复杂 ...

  4. golang写业务代码,用全局函数还是成员函数

    在golang中,函数划分为全局函数和成员函数,在使用的时候,有种情况,会产生一些疑惑的,就是在写业务代码的时候,使用全局函数好像会比较方便,一般业务代码,都不会复用,都是针对特定的业务进行编程,要复 ...

  5. 朱晔的互联网架构实践心得S2E2:写业务代码最容易掉的10种坑

    我承认,本文的标题有一点标题党,特别是写业务代码,大家因为没有足够重视一些细节最容易调的坑(侧重Java,当然,本文说的这些点很多是不限制于语言的). 1.客户端的使用 我们在使用Redis.Elas ...

  6. 朱晔的互联网架构实践心得S2E1:业务代码究竟难不难写?

    注意,这是我的架构实践心得的第二季的系列文章,第一季有10篇你也可以回顾. 见https://www.cnblogs.com/lovecindywang/category/1296779.html 最 ...

  7. Serverless架构详解:开发者如何专注于业务代码本身?

    本文来自腾讯云技术沙龙,本次沙龙主题为Serverless架构开发与SCF部署实践 演讲嘉宾:黄文俊,曾负责企业级存储.企业级容器平台等产品的架构与开发,目前主要负责SCF腾讯无服务器云函数产品相关. ...

  8. 使用阿里开源工具 TProfiler 在海量业务代码中精确定位性能代码 (jvm性能调优)

    技术交流群:233513714 本文是<JVM 性能调优实战之:一次系统性能瓶颈的寻找过程> 的后续篇,该篇介绍了如何使用 JDK 自身提供的工具进行 JVM 调优将 TPS 由 2.5 ...

  9. CSDN日报20170413 ——《天天写业务代码的那些年,我们是怎样成长过来的》

    [程序人生]天天写业务代码的那些年,我们是怎样成长过来的 作者:Phodal 比起写业务代码更不幸的是,主要工作是修 Bug , bug , buG , bUg. [Java 编程]Springboo ...

随机推荐

  1. ant windows环境配置

    详见如下链接,小蚂蚁builder.xml--apache-ant的配置 http://blog.csdn.net/gaohuanjie/article/details/40142687

  2. 结构体内嵌函数指针实现C语言面向对象

    结构体内嵌函数指针 #include<stdio.h> void say(int age) { printf("我%d岁了\n",age); } struct stud ...

  3. UDP Server

    //UDP服务器端程序,可以接受广播,不可接受多播,多播需要join播地址@Override public void run() { while (true) { try { DatagramSock ...

  4. android studio 中移除module和恢复module

    一.移除Android Studio中module 在Android Studio中想要删除某个module时,在Android Studio中选中module,右键发现没有delete,如图: An ...

  5. 篇二:JSON解析

    前台以json形式的数据格式传到后台,代码如下: import net.sf.json.JSONObject; public class JsonUtility { /** * 解析JSON 对象为对 ...

  6. iOS-RunLoop

    简单的说run loop是事件驱动的一个大循环,如下代码所示int main(int argc, char * argv[]) {     //程序一直运行状态     while (AppIsRun ...

  7. adb工具获取appPackage和appActivity

    1,手机连接电脑,打开手机调试功能,并运行待测试APP,终端执行: adb shell 2,接着,执行: dumpsys window windows | grep -E 'mFocusedApp' ...

  8. ReactNative 告别CodePush,自建热更新版本升级环境

    微软的CodePush热更新非常难用大家都知道,速度跟被墙了没什么区别. 另外一方面,我们不希望把代码放到别人的服务器.自己写接口更新总归感觉安全一点. so,就来自己搞个React-Native A ...

  9. 解决NetBeans运行卡顿问题

    NetBeans安装目录下的此文件打开编辑 找到这一行,在后面添加最大的运行内存,这里我改成了900M(红色部分),重启NetBeans即可.netbeans_default_options=&quo ...

  10. 网页访问全过程剖析[转].md

    本文转载自:http://www.cnblogs.com/wenanry/archive/2010/02/25/1673368.html 原文翻译自:http://igoro.com/archive/ ...