让ie6 7 8 9支持html5 websocket
结果：
从github上的 web-socket-js (socket.io好像也是用这个做的他们的flash替代传输方式)改过来的。不过值得注意的是里面的flash websocket代理文件,文件实在是很大，有174k
很好奇，就反编译看下，
是flex做的，这点很不喜欢，因为我没有flex builder也不想因为去改代码重新装一个，然后mx包下面的是flex的组件，com包下是adobe封装的socket和两个加密包 .
最下面那个包才是最主要的，代码不是很复杂，就是利用actionscript3的socket,与那边服务端socket握手，传递消息，不过区别是，在connect的时候要把header封装成websocket的样子
这也是flash模拟websocket的原理。事实上，直接用flash的socket就可以完成与服务端的双向信息传递，不过缺点是需要在服务端的socket代码写很多其他的代码，比如多线程，信息解析等，直接用websocket就不用写那些多余的代码了。
我花了点时间把源码里面和加密有关的代码都注释掉，加密的代码都是和wss（类似于https）有关的，用flash编译了一下，主要就是把mx包加到flash编译里面，flex是臃肿版的flash，结果大小只有20k!原来加密让文件大太多了！
websocket.js
define("websocket", function() {
(function() {
if (window.WEB_SOCKET_FORCE_FLASH) {
// Keeps going.
}
else if (window.WebSocket) {
return;
} else if (window.MozWebSocket) {
// Firefox.
window.WebSocket = MozWebSocket;
return;
}
var logger;
if (window.WEB_SOCKET_LOGGER) {
logger = WEB_SOCKET_LOGGER;
} else if (window.console && window.console.log && window.console.error) {
logger = window.console;
} else {
logger = {log: function(){ }, error: function(){ }};
}
window.WebSocket = function(url, protocols, proxyHost, proxyPort, headers) {
var self = this;
self.__id = WebSocket.__nextId++;
WebSocket.__instances[self.__id] = self;
self.readyState = WebSocket.CONNECTING;
self.bufferedAmount = 0;
self.__events = {};
if (!protocols) {
protocols = [];
} else if (typeof protocols == "string") {
protocols = [protocols];
}
self.__createTask = setTimeout(function() {
WebSocket.__addTask(function() {
self.__createTask = null;
WebSocket.__flash.create(
self.__id, url, protocols, proxyHost || null, proxyPort || 0, headers || null);
});
}, 0);
};
WebSocket.prototype.send = function(data) {
if (this.readyState == WebSocket.CONNECTING) {
throw "INVALID_STATE_ERR: Web Socket connection has not been established";
}
var result = WebSocket.__flash.send(this.__id, encodeURIComponent(data));
if (result < 0) { // success
return true;
} else {
this.bufferedAmount += result;
return false;
}
};
WebSocket.prototype.close = function() {
if (this.__createTask) {
clearTimeout(this.__createTask);
this.__createTask = null;
this.readyState = WebSocket.CLOSED;
return;
}
if (this.readyState == WebSocket.CLOSED || this.readyState == WebSocket.CLOSING) {
return;
}
this.readyState = WebSocket.CLOSING;
WebSocket.__flash.close(this.__id);
};
WebSocket.prototype.dispatchEvent = function(event) {
var events = this.__events[event.type] || [];
for (var i = 0; i < events.length; ++i) {
events[i](event);
}
var handler = this["on" + event.type];
if (handler) handler.apply(this, [event]);
};
WebSocket.prototype.__handleEvent = function(flashEvent) {
if ("readyState" in flashEvent) {
this.readyState = flashEvent.readyState;
}
if ("protocol" in flashEvent) {
this.protocol = flashEvent.protocol;
}
var jsEvent;
if (flashEvent.type == "open" || flashEvent.type == "error") {
jsEvent = this.__createSimpleEvent(flashEvent.type);
} else if (flashEvent.type == "close") {
jsEvent = this.__createSimpleEvent("close");
jsEvent.wasClean = flashEvent.wasClean ? true : false;
jsEvent.code = flashEvent.code;
jsEvent.reason = flashEvent.reason;
} else if (flashEvent.type == "message") {
var data = decodeURIComponent(flashEvent.message);
jsEvent = this.__createMessageEvent("message", data);
} else {
throw "unknown event type: " + flashEvent.type;
}
this.dispatchEvent(jsEvent);
};
WebSocket.prototype.__createSimpleEvent = function(type) {
if (document.createEvent && window.Event) {
var event = document.createEvent("Event");
event.initEvent(type, false, false);
return event;
} else {
return {type: type, bubbles: false, cancelable: false};
}
};
WebSocket.prototype.__createMessageEvent = function(type, data) {
if (window.MessageEvent && typeof(MessageEvent) == "function" && !window.opera) {
return new MessageEvent("message", {
"view": window,
"bubbles": false,
"cancelable": false,
"data": data
});
} else if (document.createEvent && window.MessageEvent && !window.opera) {
var event = document.createEvent("MessageEvent");
event.initMessageEvent("message", false, false, data, null, null, window, null);
return event;
} else {
return {type: type, data: data, bubbles: false, cancelable: false};
}
};
WebSocket.CONNECTING = 0;
WebSocket.OPEN = 1;
WebSocket.CLOSING = 2;
WebSocket.CLOSED = 3;
WebSocket.__isFlashImplementation = true;
WebSocket.__initialized = false;
WebSocket.__flash = null;
WebSocket.__instances = {};
WebSocket.__tasks = [];
WebSocket.__nextId = 0;
WebSocket.loadFlashPolicyFile = function(url){
WebSocket.__addTask(function() {
WebSocket.__flash.loadManualPolicyFile(url);
});
};
WebSocket.__initialize = function() {
if (WebSocket.__initialized) return;
WebSocket.__initialized = true;
if (WebSocket.__swfLocation) {
window.WEB_SOCKET_SWF_LOCATION = WebSocket.__swfLocation;
}
};
WebSocket.__onFlashInitialized = function() {
setTimeout(function() {
WebSocket.__flash =main.get_flash_obj("webSocketFlash");
WebSocket.__flash.setCallerUrl(location.href);
WebSocket.__flash.setDebug(!!window.WEB_SOCKET_DEBUG);
for (var i = 0; i < WebSocket.__tasks.length; ++i) {
WebSocket.__tasks[i]();
}
WebSocket.__tasks = [];
}, 0);
};
WebSocket.__onFlashEvent = function() {
setTimeout(function() {
try {
var events = WebSocket.__flash.receiveEvents();
for (var i = 0; i < events.length; ++i) {
WebSocket.__instances[events[i].webSocketId].__handleEvent(events[i]);
}
} catch (e) {
logger.error(e);
}
}, 0);
return true;
};
WebSocket.__log = function(message) {
logger.log(decodeURIComponent(message));
};
WebSocket.__error = function(message) {
logger.error(decodeURIComponent(message));
};
WebSocket.__addTask = function(task) {
if (WebSocket.__flash) {
task();
} else {
WebSocket.__tasks.push(task);
}
};
})();
return WebSocket;
});
websocket_main.js
require(['html5/websocket','avalon-min'],function(WebSocket,avalon){
var $=function(id){
return document.getElementById(id);
};
WEB_SOCKET_DEBUG = true;
var ws;
ws = new WebSocket("ws://localhost:8888/new-msg/socket");
ws.onopen = function() {
output("onopen");
};
ws.onmessage = function(e) {
output("onmessage: " + e.data);
};
ws.onclose = function() {
output("onclose");
};
ws.onerror = function() {
output("onerror");
};
avalon.bind($('send'),'click',function(){
var input = $("input1");
ws.send(input.value);
output("send: " + input.value);
input.value = "";
input.focus();
});
avalon.bind($('close'),'click',function(){
ws.close();
});
function output(str) {
var log = document.getElementById("log");
var escaped = str.replace(/&/, "&").replace(/</, "<")
.replace(/>/, ">").replace(/"/, """); // "
log.innerHTML = escaped + "<br>" + log.innerHTML;
}
}); HTML：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://localhost/twitter/js/libs/seed-min.js"></script>
<script type="text/javascript" src="http://localhost/twitter/js/libs/flash_embed.js"></script>
<script src="http://localhost/twitter/js/main.js" type="text/javascript"></script>
</head>
<body>
<input type="text" id="input1">
<input type="submit" value="Send" id='send'>
<button id='close'>close</button>
<div id="log"></div>
<div id='a' style='width: 1px; height: 1px;'></div>
<script type="text/javascript">
flash_object.embedSWF('http://localhost:8888/swf/WebSocketMain.swf', 'a', 'webSocketFlash', '100%', '100%');
</script>
<script type="text/javascript" src='http://localhost/twitter/js/libs/html5/websocket_main.js'></script>
</body>
</html>
下面很重要，在运行前一定要开启服务端(python)的socket
import socket
import time
from threading import Thread
class returnCrossDomain(Thread):
def __init__(self,connection):
Thread.__init__(self)
self.con = connection
def run(self):
clientData = self.con.recv(1024)
xmlData = '''<?xml version="1.0" encoding="utf-8"?>'''
xmlData += '''<cross-domain-policy><policy-file-request/>'''
xmlData += '''<allow-access-from domain="*" to-ports="*" />'''
xmlData += '''</cross-domain-policy>\0'''
try:
self.con.send(xmlData)
except Excepiton,e:
pass
self.con.close()
def main():
sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
sock.bind(('localhost',843))
sock.listen(10000000)
print 'socket'
while True:
try:
connection,address = sock.accept()
returnCrossDomain(connection).start()
except:
time.sleep(1)
if __name__=="__main__":
main()
服务端用python的tornado写的，也一样在运行前开启tornado
# -*- coding: utf-8 -*-
import base
import tornado.websocket
def send_message(message):
for handler in ChatSocketHandler.socket_handlers:
handler.write_message(message)
class ChatSocketHandler(tornado.websocket.WebSocketHandler):
socket_handlers = set()
def open(self):
ChatSocketHandler.socket_handlers.add(self)
print 'websocket'
send_message('A new user has entered the chat room.')
def on_close(self):
ChatSocketHandler.socket_handlers.remove(self)
print 'websocket close'
send_message('A user has left the chat room.')
def on_message(self, message):
print 'message:'+message
send_message(message)
tornado很好的封装了websocket，用起来很简单，加上flash模拟websocket兼容不支持websocket的浏览器，这样可以完美的利用高效的websocket.
如果嫌弃flash的话，还是用ajax长连接，tornado很好的支持ajax长连接，性能很好.
socket.io也是个不错的选择，提供了多种传输方案。
WebSocketMain.swf文件及源码见附件
-
本文附件下载:
- flash_websocket.zip (320.1 KB)
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
- —软件人才免语言低担保 赴美带薪读研！—