devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

jquery的websocket插件_jquery websocket

作者：从前慢现在也慢 | 2024-08-19 22:23:40

赞

踩

jquery websocket

WebSocket是HTML5一种新的协议。顾名思义，它在服务器和浏览器之间建立了全双工通信，避免了传统的轮询。它也由于ajex，无需发送请求，服务器可以主动传输数据给客户端。

jquery好像没有官方的插件，但可以从http://code.google.com/p/jquery-websocket/下到名为jQuery Web Sockets Plugin v0.0.1的插件。

要使用此插件你必须有jquery（废话），而该插件使用json做为数据传输格式故最好有jquery-json插件，附网址：http://code.google.com/p/jquery-json/。如果不想用json插件也可以通过修改代码使其正常工作（甚至使用自定义格式而非json）。

 

除此之外，这个文件在工作的时候出了点小问题，必须对其进行一定的修改才能正确的工作。主要的症状是自定义的open和close函数并不会被执行到。

闲话不多说直接上代码：

  1. /*
  2.  * jQuery Web Sockets Plugin v0.0.1
  3.  * http://code.google.com/p/jquery-websocket/
  4.  *
  5.  * This document is licensed as free software under the terms of the
  6.  * MIT License: http://www.opensource.org/licenses/mit-license.php
  7.  * 
  8.  * Copyright (c) 2010 by shootaroo (Shotaro Tsubouchi).
  9.  */
  10. (function($){
  11. $.extend({
  12. 	websocketSettings: {
  13. 		open: function(){},
  14. 		close: function(){},
  15. 		message: function(){},
  16. 		options: {},
  17. 		events: {}
  18. 	},
  19. 	websocket: function(url, s) {
  20. 		var ws = WebSocket ? new WebSocket( url ) : {
  21. 			send: function(m){ return false },
  22. 			close: function(){}
  23. 		};
  24. 		//关键修改
  25. 		ws._settings = $.extend($.websocketSettings, s);
  26. 		$(ws)
  27. 			.bind('open', $.websocketSettings.open)
  28. 			.bind('close', $.websocketSettings.close)
  29. 			.bind('message', $.websocketSettings.message)
  30. 			.bind('message', function(e){
  31. 				var m = $.evalJSON(e.originalEvent.data);
  32. 				//如果没有json插件就使用下面这行
  33. 				//var m = eval("(" + (e.originalEvent.data) + ")");
  34. 				var h = $.websocketSettings.events[m.type];
  35. 				if (h) h.call(this, m);
  36. 			});
  37. 		//关键修改
  38. 		//ws._settings = $.extend($.websocketSettings, s);
  39. 		ws._send = ws.send;
  40. 		ws.send = function(type, data) {
  41. 			var m = {type: type};
  42. 			m = $.extend(true, m, $.extend(true, {}, $.websocketSettings.options, m));
  43. 			if (data) m['data'] = data;
  44. 			return this._send($.toJSON(m));
  45. 			//如果没有json插件就使用下面这行
  46. 			//return this._send(JSON.stringify(m));
  47. 		}
  48. 		$(window).unload(function(){ ws.close(); ws = null });
  49. 		return ws;
  50. 	}
  51. });
  52. })(jQuery);

我们看到源代码中有websocket和websocketsettings两个类，ws._settings = $.extend($.websocketSettings, s);这句话是把用户自定义的函数bind到websocketsettings上，再通过一系列$(ws).bind将其bind到真正使用的websocket上，而按照原有的执行顺序，websocket的open和close均执行websocketSettings中的空函数而非自定义的函数。通过调整顺序即可避免这种情况发生。

 

附一个官方example：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>WebSocket Chat</title>
  6. </head>
  7. <body>
  8. <h1>WebSocket Chat</h1>
  9. <section id="content"></section>
  10. <input id="message" type="text"/>
  11. <script src="http://www.google.com/jsapi"></script>
  12. <script>google.load("jquery", "1.3")</script>
  13. <script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
  14. <script src="http://jquery-websocket.googlecode.com/files/jquery.websocket-0.0.1.js"></script>
  15. <script>
  16. var ws = $.websocket("ws://127.0.0.1:8080/", {
  17.         events: {
  18.                 message: function(e) { $('#content').append(e.data + '<br>') }
  19.         }
  20. });
  21. $('#message').change(function(){
  22.   ws.send('message', this.value);
  23.   this.value = '';
  24. });
  25. </script>
  26. </body>
  27. </html>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/1003932
推荐阅读