当前位置:   article > 正文

jQuery版本的websocket插件_jquery websocket插件

jquery websocket插件
  • 支持断线重连
  • 支持自动ping
  • 支持json自动转换

源码:

  1. // AMD support
  2. (function (factory) {
  3. "use strict";
  4. if (typeof define === 'function' && define.amd) {
  5. // using AMD; register as anon module
  6. define(['jquery'], factory);
  7. } else {
  8. // no AMD; invoke directly
  9. factory((typeof (jQuery) != 'undefined') ? jQuery : window.Zepto);
  10. }
  11. }
  12. (function ($) {
  13. "use strict";
  14. /*
  15. For example
  16. -----------
  17. var ws = $.websocket({
  18. url: 'ws://websocket/',
  19. message: function (data) {
  20. console.log(data);
  21. }
  22. });
  23. ws.send('test');
  24. */
  25. $.websocket = function (options) {
  26. var defaults = {
  27. //各种参数、各种属性
  28. timeout: 15000, //ping的间隔时间
  29. ping: true, //是否ping
  30. debug: false, //是否调试状态
  31. reconnect: true, //是否自动重连
  32. open: function () { },
  33. close: function () { },
  34. error: function (e) { },
  35. message: function () { }
  36. };
  37. var tt;
  38. var pingObj;
  39. var lockReconnect = false;//避免重复连接
  40. var opt = $.extend(defaults, options);
  41. function init() {
  42. var ws;
  43. try {
  44. ws = new WebSocket(opt.url);
  45. } catch (ee) {
  46. ws = { send: function (m) { return false }, close: function () { } };
  47. }
  48. $(ws)
  49. .bind('open', open)
  50. .bind('close', function () {
  51. console.log('close');
  52. if (opt.reconnect) {
  53. retry(opt.url);
  54. }
  55. opt.close();
  56. })
  57. .bind('error', function (e) {
  58. console.log('error:' + JSON.stringify(e));
  59. if (opt.reconnect) {
  60. retry(opt.url);
  61. }
  62. opt.error(e);
  63. })
  64. .bind('message', message);
  65. ws.dosend = ws.send;
  66. ws.send = function (o) {
  67. if (opt.debug) {
  68. console.log('send:' + o);
  69. }
  70. this.dosend(o);
  71. }
  72. return ws;
  73. }
  74. var ws = init();
  75. function open() {
  76. if (opt.ping) {
  77. console.log('ping start');
  78. pingObj = setInterval(function () {
  79. try {
  80. console.log('ping');
  81. ws.send(0);
  82. } catch (e) {
  83. console.log('ping error', JSON.stringify(e));
  84. clearTimeout(pingObj);
  85. if (opt.reconnect) {
  86. retry();
  87. }
  88. }
  89. }, opt.timeout);
  90. }
  91. opt.open();
  92. }
  93. function message(e) {
  94. if (opt.debug) {
  95. console.log('message:' + e.originalEvent.data);
  96. }
  97. var o = e.originalEvent.data;
  98. if (typeof o == 'string') {
  99. try {
  100. var obj = JSON.parse(o);
  101. if (typeof obj == 'object' && obj) {
  102. opt.message(obj);
  103. } else {
  104. opt.message(o);
  105. }
  106. } catch (e) {
  107. opt.message(o);
  108. }
  109. } else {
  110. opt.message(o);
  111. }
  112. }
  113. function retry() {
  114. if (lockReconnect) {
  115. return;
  116. };
  117. lockReconnect = true;
  118. //没连接上会一直重连,设置延迟避免请求过多
  119. tt && clearTimeout(tt);
  120. if (opt.ping && pingObj != null) {
  121. clearTimeout(pingObj);
  122. }
  123. tt = setTimeout(function () {
  124. console.log('retry');
  125. ws = init();
  126. lockReconnect = false;
  127. }, 5000);
  128. }
  129. $(window).on('unload', (function () {
  130. console.log('unload');
  131. opt.reconnect = false;
  132. if (opt.ping && pingObj != null) {
  133. clearTimeout(pingObj);
  134. }
  135. ws.close();
  136. ws = null
  137. }));
  138. return ws;
  139. };
  140. }));

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小惠珠哦/article/detail/1003946
推荐阅读