Seb Lee-Delisle

Menu

ElectroServer Flex simple chat

I’ve just converted the code from the Simple Chat Tutorial on the ElectroServer wiki into Flex and I thought it may be useful to someone.

Here’s what it looks like, and it’s connecting to an ES4 install with only 20 connections so forgive me if you can’t connect :

[content no longer available, sorry]

Here’s the source:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()" width="450" height="365">
 
<mx:Script>
	<![CDATA[
		import mx.utils.URLUtil;
		import com.electrotank.electroserver4.message.event.PublicMessageEvent;
		import com.electrotank.electroserver4.message.request.PublicMessageRequest;
		import com.electrotank.electroserver4.user.User;
		import com.electrotank.electroserver4.message.request.LoginRequest;
		import com.electrotank.electroserver4.room.Room;
		import com.electrotank.electroserver4.message.event.JoinRoomEvent;
		import com.electrotank.electroserver4.message.event.UserListUpdateEvent;
		import com.electrotank.electroserver4.message.request.CreateRoomRequest;
		import com.electrotank.electroserver4.message.response.LoginResponse;
		import com.electrotank.electroserver4.message.event.ConnectionEvent;
		import com.electrotank.electroserver4.message.MessageType;
		import com.electrotank.electroserver4.ElectroServer;
		import mx.rpc.events.FaultEvent;
		import mx.rpc.events.ResultEvent;
		import mx.controls.Alert;
 
		private var es : ElectroServer; 
		private var serverInfo : Object; 
		private var myRoom : Room; 
		[Bindable]
		private var users : Array; 
 
		public function init():void
		{
			// There MUST be a better way of getting the app's path than this! suggestions welcome. 
 
			var pathelements: Array = Application.application.url.split("/"); 
			pathelements[pathelements.length-1] = settings.url; 
			settings.url = pathelements.join("/"); 
 
			settings.send(); 
			users = []; 
		}
		public function sendMessage() : void
		{
 
			var msg:String = msg_text.text;
	  		if (msg != "") {
	  			msg_text.text = ""; 
				msg_text.setFocus(); 
 
	  			//create the request
	  			var pmr:PublicMessageRequest =new PublicMessageRequest();
	  			pmr.setRoomId(myRoom.getRoomId());
	  			pmr.setZoneId(myRoom.getZone().getZoneId());
	  			pmr.setMessage(msg);
 
	  			//send it
	  			es.send(pmr);
	  		}
 
 
 
		}
 
		public function onPublicMessageEvent(e:PublicMessageEvent):void 
	  	{
	  		var from:String = e.getUserName();
	  		var msg:String = e.getMessage();
 
	  		output(from+": "+msg);
 
	  	}		
 
		public function xmlLoaded(e : ResultEvent) : void
		{
 
			es = new ElectroServer(); 
			serverInfo = []; 
			for each (var lis:XML in e.result.Listener) {
				var protocol:String = lis.@protocol;
				var ip:String = lis.@ip;
				var port:Number = Number(lis.@port);
				serverInfo[protocol] = new Object();
				serverInfo[protocol].ip = ip;
				serverInfo[protocol].port = port;
			}
 
			es.addEventListener(MessageType.ConnectionEvent, "onConnectionEvent", this);
			es.addEventListener(MessageType.LoginResponse, "onLoginResponse", this);
			es.addEventListener(MessageType.JoinRoomEvent, "onJoinRoomEvent", this);
			es.addEventListener(MessageType.PublicMessageEvent, "onPublicMessageEvent", this);
			es.addEventListener(MessageType.UserListUpdateEvent, "onUserListUpdateEvent", this);
 
			//Create the connection
			output("Attempting connection with this ip/port combo: "+serverInfo.text.ip+":"+serverInfo.text.port);
			es.createConnection(serverInfo.text.ip, serverInfo.text.port);
 
		}
 
 
		public function onConnectionEvent(e:ConnectionEvent):void 
		{
			if (e.getAccepted()) {
				output("Connection accepted");
				var name:String = "user"+Math.round(10000*Math.random());
				output("Attempting to login as: "+name);
				//Build the LoginRequest and populate it
				var lr:LoginRequest = new LoginRequest();
				lr.setUserName(name);
				//send it
				es.send(lr);
			} else {
				output("Connection failed: "+e.getEsError().getDescription());
			}
		}
	 	public function onLoginResponse(e:LoginResponse):void 
	  	{
	  		if (e.getAccepted()) {
	  			output("Login accepted.");
	  			output("You are logged in as: "+e.getUserName());
	  			joinRoom();
	  		} else {
	  			output("Login failed: "+e.getEsError().getDescription());
	  		}
		}			
 
		private function joinRoom():void 
		{
		  	//tries to create a room. if it already exists, then you join that room
		  	//create the request
			var crr:CreateRoomRequest = new CreateRoomRequest();
			crr.setRoomName("MyRoom");
			crr.setZoneName("ZoneName");
			//send it
			es.send(crr);
		}	
 
		public function onJoinRoomEvent(e:JoinRoomEvent):void 
		{
			myRoom = e.room;
			showUserList();
		}
		public function onUserListUpdateEvent(e:UserListUpdateEvent) : void
  		{
  			showUserList();
  		}
 
		public function showUserList() : void
		{
			var userobjs : Array = myRoom.getUsers(); 
			users = [];
 
			for each(var user : User in userobjs)
			{
				users.push(user.getUserName()); 
			}
 
		}
 
		public function xmlLoadFailed(e : FaultEvent) : void
		{
			trace("failed"); 
		}
 
		public function output(msg : String) : void
		{
			chat_text.text += msg+"n"; 
			chat_text.verticalScrollPosition = chat_text.maxVerticalScrollPosition;
		}
	]]>
</mx:Script>
 
	<mx:HTTPService 
	id="settings"
	url="./ServerSettings.xml" 
	resultFormat="e4x"
	result="xmlLoaded(event);"
	fault="xmlLoadFailed(event);"
	/>
 
	<mx:Model id="users_model">
      <users>
 
      </users>
    </mx:Model>
 
	<mx:Button x="386" y="333" label="Send" id="send_button" click="sendMessage()"/>
	<mx:TextInput x="10" y="333" width="368" id="msg_text" enter="sendMessage()"/>
	<mx:TextArea x="10" y="10" width="302" height="316" id="chat_text"/>
	<mx:List x="320" y="8" width="120" id="user_list" dataProvider="{users}" height="318"></mx:List>
 
</mx:Application>

This example also requires a ServerSettings.xml file that contains the server details, which if you’re running ElectroServer locally, should be :

 <Listeners>
       <Listener ip="127.0.0.1" port="9898" protocol="text" />
       <Listener ip="127.0.0.1" port="1935" protocol="rtmp" />
 </Listeners>

Download the MXML source code for the ElectroServer Flex Simple Chat [sorry no longer available]

I very rarely use Flex so please feel free to comment with improvements!

Particularly with how to load a file with a relative path in an HTTPService. It seems ridiculous that I have to specify a full path name, and the hack I’ve employed to extract the local path from the application URL is equally ridiculous. There must be a simpler method?

This entry was posted in ElectroServer, Flash, Multi-user, Obsolete. Bookmark the permalink.

2 Responses to ElectroServer Flex simple chat