WEB页面通过Socket和服务器通讯（上）

最近空闲，整理一下上一个项目的部分资料。

由于需要web页面和服务器进行通讯，以前研究过Comet,听说过有那么几种方法可以实现服务器推。也没实际作过测试。

通过上次的项目也正好有个机会来研究下，测试研究了下网上的几种方法。觉得通过FLASH作为桥接和服务器通讯是一个不错的方法，一个是Flash Player的安装比较广泛，而且ActionScript3.0应该是一门全新的语言。更加的和Java比较接近，可以说已经是一门功能更加全面、面向对象的语言了。

本次实现的功能涉及到了以下技术或资料：

1.       ActionScript3.0

2.       JavaScript + Xml + XPath + HTML

3.       C#2.0 Socket

 

Flash 其实也有socket的实现，虽然功能有限，但也实现了基本的通讯功能。足够我们使用的了。本次使用的ActionScript3.0对 Socket也进行的进一步的扩展，增加了更底曾的数据处理方法，即字节数组的处理等。

 

好了，下面来点实际的。

本次需要在页面上和Socket服务器进行通讯，先来看看Web的部分代码。

首先需要在页面上嵌入一个名称为myflash 的Flash对象。

<object id="myflash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" style="width: 0px; height: 8px"> <param name="movie" value="flash.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <embed src="flash.swf" mce_src="flash.swf" quality="high" wmode="transparent" pluginspage=" http://www.macromedia.com/go/getflashplayer" name="myflash" swliveconnect="true" type="application/x-shockwave-flash" width="0" height="0"> </embed> </object>

然后用javascript获取当前的Flash对象，以和Flash进行交互。

//获取页面flash的js对象 function GetFlashObject(flashName) { if (navigator.appName.indexOf("Microsoft") != -1) { return window[flashName] } else { return document[flashName] } }

这段脚本网上有的是，这里不多说了。不明白的Google一下。

下面要通过javascript和Flash交互。

GetFlashObject("myflash").sendMsg(msg);

sendMsg(msg:String);是Flash里的方法，用来负责和负责把信息发送到服务器端。

function showMsg() {

//…接受并显示通过Flash传递过来的信息，本方法由Flash调用，随后会介绍。

}

 

现在来看看Flash里的脚本代码。

import flash.utils.ByteArray;

import flash.net.Socket;//这个类包含了socket的通讯的功能

import flash.net.XMLSocket;//

import flash.external.ExternalInterface;//导入 ExternalInterface 类，这个类负责和javascript通讯

//……

 

先介绍下Flash 和Socket服务器如何建立通讯，然后在说明如何和javascript进行通讯。

1.首先定义一个Socket类型的对象

var __Socket:Socket;

2.然后注册各种监听器

function ConfigureListeners() { __Socket = new Socket();//实力化一个Socket对象 __Socket.addEventListener(Event.CLOSE, OnClose); __Socket.addEventListener(Event.CONNECT, OnConnect);//首次连接时 __Socket.addEventListener(ProgressEvent.SOCKET_DATA,onDataReceived); __Socket.addEventListener(DataEvent.DATA, onDataEvent,false,0,true); __Socket.addEventListener(ProgressEvent.PROGRESS, onProgress); __Socket.addEventListener(IOErrorEvent.IO_ERROR, onIoError); __Socket.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onSecurityError); } 3.尝试连接服务器

function Contect () {   

         ConfigureListeners();//注册监听器

         __Socket.connect("192.168.***.***",10000);

}

需要说明一下的是播放器升级到Flash Player 9以后，增加了一个安全限制。当播放器请求外部域资源时，需要一个安全策略文件。因此当首次和服务器连接成功后，服务器应该发送一个Xml字符串，以通知播放器有权进行访问。然后播放器将进行第二次的连接。关于服务器端如何发送安全策略文件我们将在下一节介绍。

所以我们要在连接服务器时，发送请求策略文件 OnConnect

4.请求策略文件

function RequestPolicyFile() {

         __Socket.writeUTFBytes(“PolicyFile”);

         __Socket.flush();

}

//连接成功的同时开始请求策略文件

function OnConnect(e:Event):void {

         RequestPolicyFile();

}

5.发送信息到服务器端 //js 调用此方法

function sendMsg(string:String) {

         if (! __Socket.connected) {

                  return;

         }

         __Socket.writeUTFBytes(string);

         __Socket.flush();

}

为了能够在页面上调用到sendMsg，我们必须在flash里面把此方法暴露给外面，用此方法声名

ExternalInterface.addCallback("sendMsg", sendMsg);

 

6.接受服务器端的信息

function onDataReceived(e:Event):void { var string:String=""; while (__Socket.bytesAvailable) { string+=__Socket.readUTFBytes(__Socket.bytesAvailable); } if (string=='') { return; } //是否是接收策略文件 if (string.indexOf("<cross-domain-policy>")==0&&string.indexOf("<NormalMsg>")<0) { return; } ExternalInterface.call("showMsg ",string);//调用页面js的showMsg方法 }   

关于ActionScript3.0大家可以参考下Adobe 的语言参考资料。

下篇将介绍服务器端的相关功能。