jquery的websocket插件
2018-12-05
WebSocket是HTML5一种新的协议。顾名思义,它在服务器和浏览器之间建立了全双工通信,避免了传统的轮询。它也由于ajex,无需发送请求,服务器可以主动传输数据给客户端。
jquery好像没有官方的插件,但可以从下到名为jQuery Web Sockets Plugin v0.0.1的插件。
要使用此插件你必须有jquery(废话),而该插件使用json做为数据传输格式故最好有jquery-json插件,附网址:。如果不想用json插件也可以通过修改代码使其正常工作(甚至使用自定义格式而非json)。
除此之外,这个文件在工作的时候出了点小问题,必须对其进行一定的修改才能正确的工作。主要的症状是自定义的open和close函数并不会被执行到。
闲话不多说直接上代码:
[javascript]
/*
* 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:
[html]
html>
WebSocket ChatWebSocket Chat
var ws = $.websocket("ws://127.0.0.1:8080/", {
events: {
message: function(e) { $("#content").append(e.data + "
") }
}
});
$("#message").change(function(){
ws.send("message", this.value);
this.value = "";
});
免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。
http://www.pinlue.com/style/images/nopic.gif