WebSocket兼容到低版本浏览器
就目前而言,WebSocket是最好的Web通信解决方案了。但是IE从10才开始兼容它,对于目前大量IE8存在的市场,原生的WebSocket显然不太实用,我们需要低版本兼容的解决方案。于是我模拟WebSocket在浏览器上的行为,用AS3写了个兼容的版本。
内容有点多,这篇只把演示给搞定,至于AS的源码就丢到下一篇了。下面是效果图:
演示下载地址: WebSocket兼容到低版本浏览器(演示实例)
页面代码比较简单,用法和正常的WebSocket基本一样,只是引用了WebSocket.js这个文件来兼容低版本浏览器。当然还有个WebSocket.swf需要放在与页面相同的目录下。 <script src="WebSocket.js"></script>
服务器程序使用NodeJS代码,随手写的聊天室功能,仅仅为了实现功能而已,作为演示代码不要吐槽考虑的不够周全。里面的 decodeDataFrame 和 encodeDataFrame 在之前的文章中有出现过,这里就不贴出来了。由于需要兼容AS版,所以服务器程序需要比普通的WebSocket多一个AS的域安全验证的步骤。这是关键所在,如果使用现成的WebSocket库之类的东西可能得稍微修改源码才能兼容AS版。
<script>
onload=function(){
var ws=new WebSocket("ws://127.0.0.1:8000");
ws.onopen=function(){
//握手成功
send.removeAttribute("disabled");
send.value="发送";
};
ws.onmessage=function(e){
//收到消息,放到页面上
var dl,dt,dd,o=eval("("+e.data+")");
dl=document.createElement("dl");
dt=document.createElement("dt");
dd=document.createElement("dd");
dt.innerHTML=o.client;
dd.appendChild(document.createTextNode(o.content));
dl.appendChild(dt);
dl.appendChild(dd);
wall.appendChild(dl);
wall.scrollTop=1E8; //滚动条移到底部
};
send.onclick=function(){
//发送消息
if(!message.value)return alert("请输入内容");
ws.send(message.value);
message.value="";
};
};
</script>
<style>
dl {margin:3px 10px;font:14px/20px Consolas,微软雅黑;}
dt {color:blue;}
#wall {
border:1px solid #CCC;width:200px;height:200px;
overflow-y:auto;margin-bottom:10px;
}
</style>
<div id="wall"></div>
<input id="message" />
<input type="button" value="连接中···" id="send" disabled />var crypto=require('crypto');
var fs=require('fs');
var WS='258EAFA5-E914-47DA-95CA-C5AB0DC85B11';
var pool=[]; //连接池
require('net').createServer(function(o){
var key;
o.on('data',function(e){
if(!key){
var data=e.toString();
//Flash握手
if(data=='<policy-file-request/>\0')
return fs.readFile('policy.txt',function(err,data){
o.write(data+'\0');
});
//WebSocket握手
if(key=data.match(/Sec-WebSocket-Key: (.+)|$/)[1])
key=crypto.createHash('sha1').update(key+WS).digest('base64'),
o.write([
'HTTP/1.1 101 Switching Protocols',
'Upgrade: websocket',
'Connection: Upgrade',
'Sec-WebSocket-Accept: '+key
].join('\r\n')+'\r\n\r\n');
}else{
//解析数据
var frame=decodeDataFrame(e);
//文本帧
if(frame.Opcode==1){
//转义数据
var content=frame.PayloadData.replace(/\W/g,function(e){
e=e.charCodeAt(0).toString(16);
if(e.length==3)e='0'+e;
return '\\'+(e.length>2?'u':'x')+e;
}),client=o.remoteAddress+":"+o.remotePort,buffer;
//包装成JSON格式,并做成一个数据帧
buffer=encodeDataFrame({
FIN:1,Opcode:1,
PayloadData:'{"client":"'+client+'","content":"'+content+'"}'
});
//对所有连接广播数据
for(i=0;i<pool.length;i++)pool[i].write(buffer);
};
};
});
//断开时从连接池中移除
o.on("close",function(){
for(i=0;i<pool.length;i++)if(pool[i]==o)pool.splice(i,1);
});
//放入连接池中
pool.push(o);
}).listen(8000); Flash握手就是AS的域安全验证,这个在之前的文章“ 使用AS直接与服务器TCP通信 ”中有详细的说过,其实就是加载一个策略文件给它。把这个过程嵌入到WebSocket的握手之前就行。
WebSocket.js的代码就不贴出来说明了。它负责构造一个类似原生WebSocket的接口的功能,里面会对不兼容WebSocket的浏览器加载WebSocket.swf来使之兼容。
这个程序也是最近刚写的,存在漏洞在所难免,如果实用的话以后将慢慢完善它。
WebSocket兼容到低版本浏览器的更多相关文章
- AngularJS开发指南7:AngularJS本地化,国际化,以及兼容IE低版本浏览器
AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...
- 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现,兼容ie低版本浏览器
项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...
- 从 ie10浏览器下Symbol 未定义的问题 探索vue项目如何兼容ie低版本浏览器(ie9, ie10, ie 11 )
问题: vue项目在ie11下一片空白并报Symbol 未定义的错 原因: ie10浏览器解析不了es6的语法,需要我们使用babel(Babel是一种工具链,主要用于将ECMAScr ...
- Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案
Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev ...
- React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案
虽然过了兼容IE6的噩梦时代,IE依旧阴魂不散,因为你可能还要兼容IE9.在ES6已经普及的今天,用ES6写react已经成了标配.但是babel编译的js语法,由于某些不规范的写法,可能在IE9下不 ...
- 使用html5兼容低版本浏览器
因为html5 新出的一些语义化的标签,在低版本浏览器下不能识别,举个例子,比如你写了一个 header 标签中,写了一段文本,在低版本浏览器下,肯定是能看到的,但是,那是他是不认识 header标签 ...
- webpack 兼容低版本浏览器,转换ES6 ES7语法
ES6,ES7真的太棒了,async +await+Promise,让我阅读代码的时候不用再从左拉到右了(异步太多,一层套一层真的太头痛) 但是有个问题,打包后低版本浏览器运行不了,还有我用了一些混淆 ...
- 使用socket.io client 开发时兼容IE低版本的办法
使用socket.io client 开发时兼容IE低版本的办法 socket.io提供了针对各个版本浏览器的‘socket’功能的封转:websocket,长连接,流,flash什么的.给你格式化下 ...
- 低版本浏览器支持HTML5标签的方法
最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...
随机推荐
- HTTP 各种特性应用(三)
一. 数据协商 分类: 客户端请求: Accept: Accept:表明 我想要什么样的数据 Accept-Encoding:数据是什么样的编码方式 进行传输.主要限制 服务端怎样进行数据的压缩. A ...
- 玲珑学院 1010 - Alarm
1010 - Alarm Time Limit:1s Memory Limit:128MByte DESCRIPTION Given a number sequence [3,7,22,45,116, ...
- linux下支持托盘的邮件客户端Sylpheed
在网上搜索了很多客户端想支持系统托盘,发现一个很不错的邮件客户端Sylpheed.设置方式和foxmail很像,最为重要的是支持系统托盘,很方便,默认没有开启,简单设置下:配置->通用首选项-& ...
- CSUOJ 1651 Weirdo
1651: Weirdo Time Limit: 5 Sec Memory Limit: 128 MBSubmit: 40 Solved: 21[Submit][Status][Web Board ...
- qt程序实现打开文件夹
QString path=QDir::currentPath();//获取程序当前目录 path.replace("/","\\");//将地址中的" ...
- 47.Express文件上传
转自:http://www.runoob.com/nodejs/nodejs-express-framework.html 文件上传 以下我们创建一个用于上传文件的表单,使用 POST 方法,表单 e ...
- 关于vuex的项目中数据流动方式
vue的核心是数据驱动,所有数据变更的时机很重要,也就是watch的内容,一般是数据逻辑的操作.在使用vuex的项目中,我们在vuex中只是发请求.拿数据,在视图中来进行逻辑的操作.数据的更新. 1. ...
- 配置Lotus Domino集群视频详解
IBM Lotus Domino Server 有个最重要的高可用特新就是集群,它对于任何使用 Domino 服务器的组织,让用户能够持续访问它们的数据库,保证业务不间断运行.下面通过两个视频来学习如 ...
- C/C++(基础-常量,类型转换)
字符 char ascII码表 #include<stdio.h> int main() { unsigned char ch; for(ch = 0;ch < 128;ch++) ...
- 韦东山ARM裸机笔记(1)
1.一个嵌入式Linux系统的软件组成:单片机大全Bootloader-->Linux驱动-->Linux APP-->Linux GUI(Android/QT) 2.驱动程序=软件 ...