- 浏览: 234246 次
- 性别:
- 来自: 沈阳
文章分类
最新评论
-
Araxis:
也遇到了楼主的问题,我用的sockjs.0.3.4,升级版本到 ...
Websocket出现的错误 -
love_jun1314:
怎么进行转换成功并没有看到a.flv文件呢? 你把commen ...
java调用ffmpeg执行视频转换 -
枫林top:
不错,挺好的
看老外程序员如何向妻子解释设计模式 -
likj_sh:
太感谢了 ,困惑了好久
Struts2 + Spring + Hibernate + DWR 项目布署笔记 -
dhl004:
...
web.xml 通过contextConfigLocation配置spring 的方式
摘要
在上一篇"基础-web即时通讯系统的四种实现"中,我们讨论了socket/tcp相对于其他基于http的通讯方式的优越。本文则详细描述如何使用flash/actionscript,来实现socket/tcp,并使用开源的haxe来编译它。
flash中的socket
socket的构造
实例化一个socket对象,只需要一行代码:
static var socket = new flash.net.Socket();
主动方法和被动方法
而剩下的工作便是把这个对象包装成合适接口供javascript调用了。这时候主要有两类方法,一类是主动性方法,由客户端直接发起的便是主动方法,比如connect、send就是主动方法。
另一类是被动方法,也就是服务器端发起,然后在客户端触发事件,并被调用的回调方法,比如connected、receive就是被动方法。
主动方法和被动方法直接决定了代码的结构,决定了javascript和flash的互操作方式。
事件时序
我们从事件时序上来看一下flash中socket的可能的一个过程:
flash加载完毕
我们先注册一个回调,在flash加载完毕的时候,获得一个通知,以便为下面的连接做一些设置和准备。
flash.external.ExternalInterface.call("setTimeout", jsScope + "loaded()");
建立一个socket连接
接着我们便使用下面的方法来建立一个socket连接
static function connect(host : String, port : String) { trace("Connecting to socket server at " + host + ":" + port); socket.connect(host, Std.parseInt(port)); }
这里的两个形参:host为ip或者域名,port为通讯的端口。trace为输入到flash控制台的方法。
flash socket在端口上是有限制的,仅被允许访问4502-4534这个网段里的端口。
flash socket在执行socket.connect(host, Std.parseInt(port))时,无论如何,会先访问843端口,如果843端口被监听,并且在连接上后接收到一个policy-file.xml的话,才会断开与843端口的连接,并与调用方法时指定的端口连接。
如果flash没有正常得到这个policy-file.xml的话,从调用方法时指定的端口连接时刚连接上便获得这个policy-file.xml也是可以的。如果这两种情况下都没有获得policy-file.xml,那么通讯是不能继续的。这是flash特有的安全机制。
关于这个安全机制,以及提供这个policy-file.xml服务器程序policyserver,我会在稍后的教程里详细介绍。
连接失败
如果flash没有顺利连接上服务器,或者超时,我们可以注册一个回调来获得连接失败的通知,已准备重连。
socket.addEventListener(flash.events.SecurityErrorEvent.SECURITY_ERROR, function(e) : Void { trace("SECURITY ERROR : " + e.text); flash.external.ExternalInterface.call("setTimeout", jsScope + "securityError('" +e.text+ "')", 0); } );
连接成功
如果顺利连接上了,这时候,我们可以通过下面的代码来注册一个回调,得到连接状态更新的通知。
socket.addEventListener(flash.events.Event.CONNECT, function(e) : Void { trace("Connected to server"); flash.external.ExternalInterface.call("setTimeout", jsScope + "connected()", 0); } );
发送消息
下面我们便可以从flash发送消息给服务器了
static function send(msg) { if (socket.connected) { trace("Writing '" + msg + "' to server"); //socket.writeMultiByte(msg,"gb2312"); socket.writeUTFBytes(msg); socket.flush(); } else { trace("Cannot write to server because there is no connection!"); } }
我们可以看到,这段代码里,我注释掉了socket.writeMultiByte(msg,"gb2312");此句代码。从字面意思上也可以了解,这里是使用了"gb2312"的编码来发送消息。
flash socket提供了丰富的方法,在以后的教程里,我会详细描述flash.net.Socket的每一个方法。
获取消息
如果服务器发送消息给客户端,我们也可注册一个回调来获取消息的内容
socket.addEventListener(flash.events.ProgressEvent.SOCKET_DATA, function(e) : Void { //var msg = socket.readMultiByte(socket.bytesAvailable,"gb2312"); var msg = socket.readUTFBytes(socket.bytesAvailable); trace("Received : " + msg ); flash.external.ExternalInterface.call("setTimeout", jsScope + "receive('" + msg + "')", 0); } );
这里和发送消息类似,我们可以使用不同的编码标准来解码我们获得的字节流。
关闭连接
在完成通讯以后,如果我们需要关闭这个socket连接的话,可以使用下面的主动方法。
static function close() { if (socket.connected) { trace("Closing current connection"); socket.close(); } else { trace("Cannot disconnect to server because there is no connection!"); } }
连接断开
在socket连接断开以后,我们可以注册一个回调来获得通知
socket.addEventListener(flash.events.Event.CLOSE, function(e) : Void { trace("Disconnected from server"); flash.external.ExternalInterface.call("setTimeout", jsScope + "disconnected()", 0); } );
IO错误
在通信过程中,如果有错误发生的话,我们可以这样来获得通知
socket.addEventListener(flash.events.IOErrorEvent.IO_ERROR, function(e) : Void { trace("IOERROR : " + e.text); flash.external.ExternalInterface.call("setTimeout", jsScope + "ioError('" + e.text + "')" ,0); } );
完整的代码
//SocketBridge.hx class SocketBridge { static var socket = new flash.net.Socket(); static var jsScope; static function main() { if (flash.external.ExternalInterface.available) { jsScope = flash.Lib.current.loaderInfo.parameters.scope; if (jsScope == null) { jsScope = ""; } else { jsScope += "."; } /* Calls the javascript load method once the SWF has loaded */ flash.external.ExternalInterface.call("setTimeout", jsScope + "loaded()"); // Set event listeners for socket // CONNECT socket.addEventListener(flash.events.Event.CONNECT, function(e): Void { trace("Connected to server"); flash.external.ExternalInterface.call("setTimeout", jsScope + "connected()", 0); } // CLOSE socket.addEventListener(flash.events.Event.CLOSE, function(e): Void { trace("Disconnected from server"); flash.external.ExternalInterface.call("setTimeout", jsScope + "disconnected()", 0); } // IO ERROR socket.addEventListener(flash.events.IOErrorEvent.IO_ERROR, function(e): Void { trace("IOERROR : " + e.text); flash.external.ExternalInterface.call("setTimeout", jsScope + "ioError('" + e.text + "')", 0); } // SECURITY ERROR socket.addEventListener(flash.events.SecurityErrorEvent.SECURITY_ERROR, function(e): Void { trace("SECURITY ERROR : " + e.text); flash.external.ExternalInterface.call("setTimeout", jsScope + "securityError('" + e.text + "')", 0); } // SOCKET DATA socket.addEventListener(flash.events.ProgressEvent.SOCKET_DATA, function(e): Void { //var msg = socket.readMultiByte(socket.bytesAvailable,"gb2312"); var msg = socket.readUTFBytes(socket.bytesAvailable); trace("Received : " + msg); flash.external.ExternalInterface.call("setTimeout", jsScope + "receive('" + msg + "')", 0); } /* Set External Interface Callbacks */ // connect(host, port) flash.external.ExternalInterface.addCallback("connect", connect); // disconnect() flash.external.ExternalInterface.addCallback("close", close); // send() flash.external.ExternalInterface.addCallback("send", send); // log() flash.external.ExternalInterface.addCallback("log", log); } else { trace("Flash external interface not available"); } } /** * Connect to new socket server * @param host The host the socket server resides on * @param port The socket servers port */ static function connect(host: String, port: String) { trace("Connecting to socket server at " + host + ":" + port); socket.connect(host, Std.parseInt(port)); } /** * Disconnect the socket */ static function close() { if (socket.connected) { trace("Closing current connection"); socket.close(); } else { trace("Cannot disconnect to server because there is no connection!"); } } /** * Write string to the socket */ static function send(msg) { if (socket.connected) { trace("Writing '" + msg + "' to server"); //socket.writeMultiByte(msg,"gb2312"); socket.writeUTFBytes(msg); socket.flush(); } else { trace("Cannot write to server because there is no connection!"); } } /** * Log */ static function log(msg) { trace("log : " + msg); } }
编译
我使用了开源的haxe来编译,你也可以通过http://haxe.org/file/hxinst-win.exe获取它。
编写完SocketBridge.hx以后,你需要在同一个目录下建一个compile.hxml文本文件,它的内容是:
-swf socket_bridge.swf -swf-version 9 -main SocketBridge
在安装过haxe的情况下,只要你双击执行compile.hxml,便可以在同一目录下获得编译出的socket_bridge.swf 。
在下一篇教程"客户端-javascript和flash互操作"里,我们将了解如何使用socket_bridge.swf来操作javascript进行socket/tcp通讯。
发表评论
-
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2017-09-16 22:28 607系列简介 也许,三百 ... -
30分钟掌握ES6/ES2015核心内容
2017-01-09 11:21 346ECMAScript 6(以下简称ES6)是JavaSc ... -
requirejs、require方法冲突
2016-12-21 18:10 1438如果加载了多个requirejs脚本,每个requirejs ... -
谈谈使用 promise 时候的一些反模式
2016-11-25 15:20 351本文翻译自 We have a problem with ... -
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2016-11-23 12:11 583HTML5 Canvas中提供了 ... -
移动端H5页面高清多屏适配方案
2016-11-17 08:35 748背景 开发移动端H5页面 面对不同分辨率的 ... -
使用Flexible实现手淘H5页面的终端适配rem自适应布局-移动端自适应必备
2016-11-03 23:52 664曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时 ... -
CSS3的calc()使用
2016-11-03 21:51 604calc()对大家来说,或许很陌生,不太会相信calc()是 ... -
CSS3的REM设置字体大小
2016-11-03 21:50 616在Web中使用什么单位来定义页面的字体大小,至今天为止都还在 ... -
JavaScript Promises 相当酷
2016-09-02 18:53 456And when I promise some ... -
gulp使用小结
2016-05-22 19:02 604这篇文章不会介绍 gulp 的起源、发展;不会去一个个讲解 ... -
用gulp做一个略完整的前端打包工作
2016-05-22 18:59 2367我们的官网要改版,会从以前的单一产品变成 ... -
前端神器avalonJS入门
2016-05-19 19:32 553本章将介绍如何使用avalon来实现前端路由功能。 我们需 ... -
给Webstorm的HTML自动压缩插件
2016-05-07 14:20 1176前端代码的压缩 前端的js、css、html的压缩不仅会让 ... -
gulp教程之gulp中文API
2016-05-07 13:44 511http://www.ydcss.com/ ... -
gulp详细入门教程
2016-05-07 13:00 504简介: gulp是前端开发过程中对代码进行构建的工具, ... -
HTML5 Boilerplate - 让页面有个好的开始
2016-04-20 19:08 622一:HTML5 Boilerplate是什 ... -
来,让我们谈一谈 Normalize.css
2016-04-20 19:07 399本文译自Normalize.css官网: http:// ... -
Websocket出现的错误
2016-04-06 10:49 6828前端使用sockjs,后台使用spring的websocke ... -
移动平台的meta标签-----神奇的功效
2016-02-18 10:51 414对于桌面平台web布局中大家对meta标签再熟悉不过了,它永 ...
相关推荐
这不是一个预先构建的 Linux 发行版,而是您从头构建发行版。虽然在不同目标系统上安装 Linux 的过程在细节上有差异,但总的原则是相同的。 本教程帮助您构建(如果您有一个合适的目标系统)一个有效的 Linux 系统...
DIY-Deep-Learning-Workstation, 从头开始构建一个深入学习工作站 DIY-Deep-Learning-Workstation从头构建一个深度学习工作站。 本文档是为 14.04编写的,但大多数步骤也应适用于其他Ubuntu版本和leanring框架。具有...
引导自己从头开始编写一个操作系统, 一本自学的书
从头开始构建数据库的一个artisan命令
使用AngularJS从头开始构建Web应用程序 基于构建Web-App-From-Scratch-With-AngularJS
从头开始搭建AppDemo,更多请参考博客
mini-arm-os, 从头开始构建 ARM Cortex M 系列的最小多任务操作系统内核 构建最小的多任务操作系统内核先决条件带有STM32微控制器实现的 QEMU 。生成说明./configure --disable-werror --enable-debug --target-list...
scoutfs是一个集群内核Linux文件系统,从头开始设计和构建,用于支持大型归档系统
角滚动间谍从头开始构建的简单,轻量级的scroll-spy伪指令。 它在元素滚动到视图或视图之外时广播事件。用法在要为其接收滚动事件的元素上添加scroll-spy属性和id 。 当元素首次滚动到视图中时,会触发一次'...
app-datepicker, 使用聚合物从头开始构建的元件 应用程序 datepicker ( 以前为 jv-datepicker ) 有关详细信息,请参阅组件页 。一个自定义的聚合物元素,从头开始提供一个基于谷歌设计的更具吸引力和丰富性的。实时...
自己项目的一部分,从头开始搭的,注释很详细。 里面是一个C# Winform WiFi通讯 TCP协议 Socket通讯 上位机文件。
从头开始构建前端Web应用程序是一个Codecademy Pro Intensive程序,涵盖了专业人员使用React开发Web应用程序所使用的技能。 目录 扫雷车 一个基于控制台的扫雷游戏。 要添加的功能 添加验证以确保电路板尺寸合理。 ...
教程:如何从头开始构建Spring Boot Web应用程序 本教程使用Oracle JDK 8,Spring Boot,Spring Data,Thymeleaf构建。 如何使用它 ? 安装JDK 8: : 安装Maven: : 克隆存储库 mvn包 java -jar target / first...
用于构建Linux从头开始系统的Docker配置
本书作者认为,理解计算机工作原理的方法就是亲自动手,从零开始构建计算机系统。 通过12个章节和项目来读者从头开始,本书逐步地构建一个基本的硬件平台和现代软件阶层体系。在这个过程中,读者能够获得关于硬件...
从零开始React从头开始构建React Progressive Web App 该项目是在现代Web应用程序开发中尝试多种技术的游乐场。 但是,有意地,应用程序本身根本没有任何作用。 特别感谢Udacity / Google Web专家奖学金及其始终支持...
《Java Web 服务:构建与运行(影印版)》提供了对Java的API的一个全面介绍,包括针对XML Web服务的JAX-WS和针对RESTful Web服务的JAX-RS。《Java Web服务:构建与运行》通过提供混合架构概述、完整的工作代码示例...
投影仪:View Framework Build-Along 让我们从头开始构建一个 web 视图框架! 并在此过程中学到一些东西。 在查看站点。 有关 repo 的一些背景信息在。
使用epoll从头开始构建基于事件循环的微小http服务器
这是我在React Rally 2016中发表的一个演讲,在那里我通过一个简化的React实现来解释它是如何工作的。 这种简化的实现被称为Dilithium。