- 浏览: 234253 次
- 性别:
- 来自: 沈阳
文章分类
最新评论
-
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即时通讯系统的四种实现"中,我们讨论了如何使用flash/actionscript,来实现socket/tcp,并使用开源的haxe来编译。而本文将介绍如何使用javascript调用编译出的flash来进行通讯。
加载flash
我使用swfobject.js来加载我们编译出的flash文件——socket_bridge.swf。
swfobject.js是一种易用的、符合标准的在网页中嵌入flash对象的方法,你只需要在网页中引用一个小巧的js文件。你在网上可以很容易下载到它。
初始化flash
我们可以调用swfobject.js里提供的方法,来编写跨浏览器的加载flash的代码。
function initialFlash(){ var so = new SWFObject("socket_bridge.swf", "socketBridge", "800", "300", "9", "#ffffff"); so.addParam("allowscriptaccess", "always"); so.addVariable("scope", "socket"); so.write("flashcontainer"); }
这段代码的意义是,将socket_bridge.swf下载到浏览器端,并在id为flashcontainer的html元素下。并将对象名为socket的对象暴露给flash。
考虑到这里使用到了flashcontainer这个html元素,我们需要在这个html元素已经存在于dom以后才可以执行这段代码,比如在window.onload事件里。
onload=function(){ initialFlash(); }
封装flash socket
我们需要在initialFlash执行前声明一个对象名为socket的对象。
var socket = { config :{ ip:"127.0.0.1", port:4502, flashcontainer:"flashcontainer", auto:true }, connect : function() { socket.flash.log("begin connect to session server"); socket.flash.connect(socket.config.ip, socket.config.port); }, send : function(msg) { if(socket.isConnected >= 1){ socket.flash.send(msg); } }, loaded : function() { socket.flash = document.getElementById("socketBridge"); socket.isConnected = 0; if(socket.config.auto){ socket.connect(); } }, connected : function() { socket.isConnected = 1; socket.flash.log("connected to session server"); }, close : function() { socket.flash.close(); socket.isConnected = 0; socket.flash.log("close connection"); }, disconnected : function() { socket.isConnected = 0; socket.flash.log("disconnected"); }, ioError: function(msg) { socket.flash.log(msg); socket.isConnected = 0; }, securityError: function(msg) { socket.flash.log(msg); socket.isConnected = 0; }, receive: function(msg) { //callback } };
这里有几处需要注意:
socket.config.auto为true时,flash文件socket_bridge.swf加载完毕时,自动调用socket.flash.connect连接本地的4502端口。
socket.flash.log为对flash的trace函数的封装,可以调用它向flash控制台写入一些调试信息。
socket.isConnected为socket连接的状态量,实际上在真实的聊天室里,连接完以后还需要登录和验证的一系列过程,所以用此变量来表示这些自定义状态。
操作flash socket
有了这个socket对象,我们便可以在javascript里操作flash socket了。比如说:
socket.send("hello socket")
效果演示
完整代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="js/swfobject.js"></script> <script> var socket = { config :{ ip:"127.0.0.1", port:4502, flashcontainer:"flashcontainer", auto:true }, connect : function() { socket.flash.log("begin connect to session server"); socket.flash.connect(socket.config.ip, socket.config.port); }, send : function(msg) { if(socket.isConnected >= 1){ socket.flash.send(msg); } }, loaded : function() { socket.flash = document.getElementById("socketBridge"); socket.isConnected = 0; if(socket.config.auto){ socket.connect(); } }, connected : function() { socket.isConnected = 1; socket.flash.log("connected to session server"); }, close : function() { socket.flash.close(); socket.isConnected = 0; socket.flash.log("close connection"); }, disconnected : function() { socket.isConnected = 0; socket.flash.log("disconnected"); }, ioError: function(msg) { socket.flash.log(msg); socket.isConnected = 0; }, securityError: function(msg) { socket.flash.log(msg); socket.isConnected = 0; }, receive: function(msg) { //callback } }; function initialFlash(){ var so = new SWFObject("socket_bridge.swf", "socketBridge", "800", "300", "9", "#ffffff"); so.addParam("allowscriptaccess", "always"); so.addVariable("scope", "socket"); so.write(socket.config.flashcontainer); } onload=function(){ initialFlash(); } </script> </head> <body> <textarea id="cmd" style="width: 400px; height: 300px;">socket.send("")</textarea> <input type="button" value="exec" onclick="eval(document.getElementById('cmd').value);" /> <div id="flashcontainer"></div> </body> </html>
发表评论
-
用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页面 面对不同分辨率的 ... -
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是什 ... -
Websocket出现的错误
2016-04-06 10:49 6828前端使用sockjs,后台使用spring的websocke ... -
移动平台的meta标签-----神奇的功效
2016-02-18 10:51 414对于桌面平台web布局中大家对meta标签再熟悉不过了,它永 ... -
掌握Tiles 框架---Tiles入门和Tiles 框架和体系结构
2016-01-05 19:25 717入门 本教程所讲述的 ... -
GPS坐标互转:WGS-84(GPS)、GCJ-02(Google地图)、BD-09(百度地图)
2015-10-26 17:34 1079WGS-84:是国际标准,GPS坐标(Google Eart ... -
Modernizr.js入门指南
2015-05-26 17:52 612Modernizr.js入门指南 ... -
智能机浏览器版本信息
2015-05-12 01:06 508/* * 智能机浏览器版 ...
相关推荐
引导自己从头开始编写一个操作系统, 一本自学的书
这不是一个预先构建的 Linux 发行版,而是您从头构建发行版。虽然在不同目标系统上安装 Linux 的过程在细节上有差异,但总的原则是相同的。 本教程帮助您构建(如果您有一个合适的目标系统)一个有效的 Linux 系统...
DIY-Deep-Learning-Workstation, 从头开始构建一个深入学习工作站 DIY-Deep-Learning-Workstation从头构建一个深度学习工作站。 本文档是为 14.04编写的,但大多数步骤也应适用于其他Ubuntu版本和leanring框架。具有...
从头开始构建数据库的一个artisan命令
mini-arm-os, 从头开始构建 ARM Cortex M 系列的最小多任务操作系统内核 构建最小的多任务操作系统内核先决条件带有STM32微控制器实现的 QEMU 。生成说明./configure --disable-werror --enable-debug --target-list...
使用AngularJS从头开始构建Web应用程序 基于构建Web-App-From-Scratch-With-AngularJS
从头构建一个现代JavaScript技术栈的一步一步教程
从头开始搭建AppDemo,更多请参考博客
scoutfs是一个集群内核Linux文件系统,从头开始设计和构建,用于支持大型归档系统
角滚动间谍从头开始构建的简单,轻量级的scroll-spy伪指令。 它在元素滚动到视图或视图之外时广播事件。用法在要为其接收滚动事件的元素上添加scroll-spy属性和id 。 当元素首次滚动到视图中时,会触发一次'...
使用JavaScript从头开始构建汽车驾驶游戏 Packt发布的使用JavaScript从头开始构建汽车驾驶游戏的代码库 使用JavaScript从头开始构建汽车驾驶游戏 这是发行的的代码库。 它包含从头到尾完成视频课程所需的所有支持...
这是我在React Rally 2016中发表的一个演讲,在那里我通过一个简化的React实现来解释它是如何工作的。 这种简化的实现被称为Dilithium。
通过12个章节和项目来读者从头开始,本书逐步地构建一个基本的硬件平台和现代软件阶层体系。在这个过程中,读者能够获得关于硬件体系结构、操作系统、编程语言、编译器、数据结构、算法以及软件工程的详实知识。...
app-datepicker, 使用聚合物从头开始构建的元件 应用程序 datepicker ( 以前为 jv-datepicker ) 有关详细信息...一个自定义的聚合物元素,从头开始提供一个基于谷歌设计的更具吸引力和丰富性的。实时更新( )高兴宣布 ap
《Java Web 服务:构建与运行(影印版)》提供了对Java的API的一个全面介绍,包括针对XML Web服务的JAX-WS和针对RESTful Web服务的JAX-RS。《Java Web服务:构建与运行》通过提供混合架构概述、完整的工作代码示例...
整个Essential JS 2框架是从头开始构建的,是轻量级和模块化的。 通过仅包含应用程序所需的特定组件和功能,可以进一步减少其占用空间。 模块化架构 所有组件都已构建为模块以启用选择性引用,因此应用程序中仅包含...
用于构建Linux从头开始系统的Docker配置
从头开始构建前端Web应用程序是一个Codecademy Pro Intensive程序,涵盖了专业人员使用React开发Web应用程序所使用的技能。 目录 扫雷车 一个基于控制台的扫雷游戏。 要添加的功能 添加验证以确保电路板尺寸合理。 ...
javascript-978-1-8388-2244-6 练习 JavaScript - 从头开始构建 5 个交互式迷你应用程序 [视频]
github-user-finder:使用Bootstrap和Vanilla Javascript从头开始构建