jquery的websocket插件

最新推荐文章于 2024-09-20 17:38:49 发布

lcy930822

最新推荐文章于 2024-09-20 17:38:49 发布

阅读量1.6w

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/lcy930822/article/details/8716231

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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函数并不会被执行到。

闲话不多说直接上代码：

/*
 * jQuery Web Sockets Plugin v0.0.1
 * http://code.google.com/p/jquery-websocket/
 *
 * This document is licensed as free software under the terms of the
 * MIT License: http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright (c) 2010 by shootaroo (Shotaro Tsubouchi).
 */
(function($){
$.extend({
	websocketSettings: {
		open: function(){},
		close: function(){},
		message: function(){},
		options: {},
		events: {}
	},
	websocket: function(url, s) {
		var ws = WebSocket ? new WebSocket( url ) : {
			send: function(m){ return false },
			close: function(){}
		};
		//关键修改
		ws._settings = $.extend($.websocketSettings, s);
		$(ws)
			.bind('open', $.websocketSettings.open)
			.bind('close', $.websocketSettings.close)
			.bind('message', $.websocketSettings.message)
			.bind('message', function(e){
				var m = $.evalJSON(e.originalEvent.data);
				//如果没有json插件就使用下面这行
				//var m = eval("(" + (e.originalEvent.data) + ")");
				var h = $.websocketSettings.events[m.type];
				if (h) h.call(this, m);
			});
		//关键修改
		//ws._settings = $.extend($.websocketSettings, s);
		ws._send = ws.send;
		ws.send = function(type, data) {
			var m = {type: type};
			m = $.extend(true, m, $.extend(true, {}, $.websocketSettings.options, m));
			if (data) m['data'] = data;
			return this._send($.toJSON(m));
			//如果没有json插件就使用下面这行
			//return this._send(JSON.stringify(m));
		}
		$(window).unload(function(){ ws.close(); ws = null });
		return ws;
	}
});
})(jQuery);

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

附一个官方example：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket Chat</title>
</head>
<body>
<h1>WebSocket Chat</h1>
<section id="content"></section>
<input id="message" type="text"/>
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.3")</script>
<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<script src="http://jquery-websocket.googlecode.com/files/jquery.websocket-0.0.1.js"></script>
<script>
var ws = $.websocket("ws://127.0.0.1:8080/", {
        events: {
                message: function(e) { $('#content').append(e.data + '<br>') }
        }
});
$('#message').change(function(){
  ws.send('message', this.value);
  this.value = '';
});
</script>
</body>
</html>