让ie6 7 8 9支持html5 websocket

标签: ie6 html5 websocket | 发表时间:2016-12-23 20:52 | 作者:wdmsyf
出处:http://www.iteye.com

结果:



 


 

 

  从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(/&/, "&amp;").replace(/</, "&lt;")
                .replace(/>/, "&gt;").replace(/"/, "&quot;"); // "
        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文件及源码见附件

 





已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [ie6 html5 websocket] 推荐:

让ie6 7 8 9支持html5 websocket

- - Web前端 - ITeye博客
  从github上的  web-socket-js (socket.io好像也是用这个做的他们的flash替代传输方式)改过来的. 不过值得注意的是里面的flash websocket代理文件,文件实在是很大,有174k. 是flex做的,这点很不喜欢,因为我没有flex builder也不想因为去改代码重新装一个,然后mx包下面的是flex的组件,com包下是adobe封装的socket和两个加密包 ..

【转载】认识HTML5的WebSocket

- - HTML5研究小组
在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API. WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术. 这个新的API提供了一个方法,从客户端使用简单的语法 有效地推动消息到服务器. 让我们看一看HTML5的WebSocket API:它可用于客户端、服务器端.

【转载】使用 HTML5 WebSocket 构建实时 Web 应用

- - HTML5研究小组
作为下一代的 Web 标准,HTML5 拥有许多引人注目的新特性,如 Canvas、本地存储、多媒体编程接口、WebSocket 等等. 这其中有“Web 的 TCP ”之称的 WebSocket 格外吸引开发人员的注意. WebSocket 的出现使得浏览器提供对 Socket 的支持成为可能,从而在浏览器和服务器之间提供了一个基于 TCP 连接的双向通道.

应用 HTML5 的 WebSocket 实现 BiDirection 数据交换

- - IBM developerWorks 中国 : 文档库
HTML5 是新一代的 Web 标准. 虽然 HTML5 标准还没有最终确定但是它已然成为主流,各大厂商都开始提前实现其草案中的功能. HTML5 提供了很多新特征,比如 Canvas、离线存储、多线程、视频标签等等. 其中一个很重要的特征是 WebSocket,它提供了一种双向全双工的服务器和客户端通信的功能.

使用 HTML5 WebSocket 构建实时 Web 应用

- - IBM developerWorks 中国 : 文档库
本文主要介绍了 HTML5 WebSocket 的原理以及它给实时 Web 开发带来的革命性的创新,并通过一个 WebSocket 服务器和客户端的案例来充分展示 WebSocket 的强大和易用.

IE6 的 !important

- 蓝精灵 - 幸福收藏夹
从开始要学解决 CSS 兼容问题时候起,就经常听 important 有各种坏处,不要使用,并且 IE6 下不能生效. 所以一下没有用 !important. 直到昨天给新人讲 CSS 的时候,这个问题才被提起. 早上旁边的小姑娘又问起,我说写个测试. 由此我们可以得出的结论是:IE6 下是可以使用 !important 的,但相同选择器内如果 !important 不是写在最后,则 !important 失效.

WebSocket实战

- - 新浪UED
互联网发展到现在,早已超越了原始的初衷,人类从来没有像现在这样依赖过他;也正是这种依赖,促进了互联网技术的飞速发展. 而终端设备的创新与发展,更加速了互联网的进化;. WebSocket的前世今生. 为什么使用WebSocket. 搭建WebSocket服务器. 以上六点分为两大块,前3点侧重理论,主要让大家明白WebSocket是什么,而后3点则结合代码实战,加深对WebSocket的认知.

tomcat7之websocket

- - ITeye博客
从tomcat7.0.26之后开始支持websocket,建议大家使用tomcat7.0.30,期间版本的接口有一些改动. chrome默认支持websocket. 其他浏览器可能由于安全原因,默认是关闭的. // 与7.0.27不同的,Tomcat改变了createWebSocketInbound方法的定义,增加了一个HttpServletRequest参数.

基于Tomcat的WebSocket

- - ITeye博客
之前大概的看过WebSocket,当时Tomcat还不支持WebSocket,所以当时写了一篇基于Jetty的WebSocket实现,地址如下:. 现在Tomcat7.0.27发布了,从这个版本开始Tomcat就支持WebSocket了. Tomcat的WebSocket和Jetty的大致上差不多,大同小异,这里就简单的贴两个类吧:.

IE6: 不死心还在

- Titian - 帕兰映像
在刚发布的WordPress 3.2功能一览里面,我认为wordpress 3.2真正的革新是更高的服务器环境要求和不再支持IE6. 其中不支持IE6这一条,勾起了我常久以来想长篇大论一下IE6的冲动. 正好最近循环播放信乐团的一首歌“不死心还在”,该歌名很适合说明当下IE6在中国的状况. 我每次去帮不同的朋友解决电脑问题的时候,他们都在用着IE6.