jquery的websocket插件

最新推荐文章于 2024-07-26 20:16:22 发布

曾经沧海难为水-除却巫山不是云

最新推荐文章于 2024-07-26 20:16:22 发布

阅读量6k

点赞数 1

分类专栏： html5 jQuery 文章标签： jquery websocket

本文链接：https://blog.csdn.net/cengjingcanghai123/article/details/43481949

版权

html5 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

jQuery

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

闲话不多说直接上代码：

[javascript] view plain copy

/*
* 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
*
*/
(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(){}
};
//关键修改
<span style="color:#ff0000;">ws._settings = $.extend($.websocketSettings, s);
</span> $(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);
});
//关键修改
<span style="color:#ff0000;">//ws._settings = $.extend($.websocketSettings, s);
</span> 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] view plain copy

<!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>