html5 websocket插件,jquery的websocket插件

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 Chat

WebSocket 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