Tutorials, Videos

Build a chat with Flex

60 Comments 30 September 2010

Build a chat with Flex

It’s always a challenge to develop a chat on the web. You need a real-time message broker in the backend, an architecture that can assume several thousands of concurrent users, a strong authentification layer, etc… Furthermore, if you want to add a video chat using participants webcams, then you need to take into account video codecs, encoding and streaming services… And if you want to be able to share your screen !.. then you start crying.

Now, if I tell you that you can build a chat with Flex in 10 minutes, share your webcam video feed and even share your screen… would you believe me? Well, you should because you must always trust the French guys. To build a chat, I’m using Flex plus LCCS, “LiveCycle Collaboration Service”. LCCS is a service managed and hosted by Adobe that enable collaborative Flex applications with chat, video, VoIP, white-board and screen sharing components. Here is the chat application I’ve developed with 80 lines of code, in 10 minutes. If I’m connected, then you should be able to chat with me and view my face:

Get Adobe Flash player

I’ve recorded a video to show the application in action. At the end you can view how I developed it.

Here is the source code of the client application:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="500" minHeight="500" xmlns:rtc="http://ns.adobe.com/rtc" width="550" height="550">
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
 
			protected function txtUsername_enterHandler(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
				connectRoom.login();
				labelUsername.visible = false;
				txtUsername.visible = false;
			}
 
			protected function btnZoomScreen_clickHandler(event:MouseEvent):void
			{
				// move screenShare
				if(btnZoomScreen.label == "zoom in"){
					moveEffect.targets = [scrShare,labelScreen];
					moveEffect.xTo = 10;
					moveEffect.yTo = 10;
					moveEffect.play();
 
					resizeEffect.target = scrShare;
					resizeEffect.widthTo = 520;
					resizeEffect.heightTo = 479;
					resizeEffect.play();
 
					btnZoomScreen.label = "zoom out";
 
					btnZoomScreen.y = 5;
				}else{
					moveEffect.targets = [scrShare,labelScreen];
					moveEffect.xTo = 294;
					moveEffect.yTo = 296;
					moveEffect.play();
 
					resizeEffect.target = scrShare;
					resizeEffect.widthTo = 250;
					resizeEffect.heightTo = 293;
					resizeEffect.play();
 
					btnZoomScreen.label = "zoom in";
 
					btnZoomScreen.y = 296;
				}
 
			}
 
		]]>
	</fx:Script>
	<fx:Declarations>
		<s:Move duration="500" id="moveEffect"/>
		<s:Resize duration="500" id="resizeEffect"/>
	</fx:Declarations>
 
	<mx:Image x="0" y="0" width="550" height="550" source="lccs_background.png"/>
	<rtc:ConnectSessionContainer horizontalScrollPolicy="off" verticalScrollPolicy="off" id="connectRoom" autoLogin="false"
								 roomURL="https://connectnow.acrobat.com/yourname/yourroom"
								 x="0" y="55" width="550" height="499">
		<rtc:authenticator>
			<rtc:AdobeHSAuthenticator userName="{txtUsername.text}"/>
		</rtc:authenticator>
		<rtc:SimpleChat  x="10" y="10"  width="274" height="479"/>
		<rtc:WebcamSubscriber x="292" y="23" displayUserBars="true"  width="250" height="250"/>
		<s:Label x="292" y="10" text="Michael's webcam" fontFamily="Verdana" fontSize="9" color="#CECECE"/>
		<rtc:ScreenShareSubscriber id="scrShare" width="250" height="193" x="294" y="296"/>
 
		<s:Label id="labelScreen" x="295" y="285" text="Michael's screen" fontFamily="Verdana" fontSize="9" color="#CECECE"/>
		<mx:LinkButton x="474" y="296" label="zoom in" fontFamily="Verdana" color="#93B864" id="btnZoomScreen" click="btnZoomScreen_clickHandler(event)"/>
 
	</rtc:ConnectSessionContainer>
	<s:Label id="labelUsername" x="165" y="191" text="Enter a username and press Enter:" color="#D8D8D8"/>
	<s:TextInput x="165" y="205" width="221" textAlign="center" id="txtUsername" enter="txtUsername_enterHandler(event)"/>
</s:Application>

And the source code of the application for the owner of the room who published his webcam and can share his screen.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
					   xmlns:s="library://ns.adobe.com/flex/spark"
					   xmlns:mx="library://ns.adobe.com/flex/mx" width="720" height="530" xmlns:rtc="http://ns.adobe.com/rtc">
 
	<fx:Script source="pass.as"/>
	<fx:Script>
		<![CDATA[
 
			protected function button1_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				scshare.publish();
			}
 
			protected function button2_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				scshare.stop();
 
			}
 
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<rtc:ConnectSessionContainer x="0" y="0" width="730" height="530" roomURL="https://connectnow.acrobat.com/yourname/yourroom">
		<rtc:authenticator>
			<rtc:AdobeHSAuthenticator userName="login@adobe.com" password="{thepass}"/>
		</rtc:authenticator>
		<rtc:Roster x="395" y="0" displaySelection="false" showMenuButtons="true"  width="295" height="362"/>
		<rtc:WebCamera x="395" y="370" width="127" height="126"/>
		<rtc:ScreenSharePublisher id="scshare"  width="421" height="309" left="484" y="207"/>
 
		<s:Button x="556" y="370" click="button1_clickHandler(event)" label="share screen" width="141" height="41"/>
		<s:Button x="556" y="416" click="button2_clickHandler(event)" label="stop screen sharing" width="141" height="41"/>
 
	</rtc:ConnectSessionContainer>
	<rtc:SimpleChat x="0" y="0"  sessionDependent="true" useExternalContextMenu="false" newMessageColor="0x000000" width="391" height="500"/>
</s:WindowedApplication>

Now, I invite you to develop your own collaborative applications with Flex and LCCS. First, visit this website and sign-up for a free developer account: https://collaboration.adobelivecycle.com Then download the SDK on your desktop, and import the LCCS.swc library in your Flex project to start playing with the LCCS components.

For those who helped me beta testing the chat, we identified a small bug with the Chat component (and its scrollbar). I must say that the LCCS team sent me a patch in the night! And that’s the opportunity for me to thank them. This is certainly the most responsive LiveCycle team ever.

To understand the business model of LCCS, read this article posted by my friend Tom: http://www.flashrealtime.com/livecycle-collaboration-service-pricing/

I plan to add few features to my chat. First, I’ll develop a widget that displays in real-time if I am online, and how many users are chatting in the room. Then I also plan to develop an Android version using AIR 2.5. More to come…

Post to Twitter

Your Comments

60 Comments so far

  1. Excellente démo.
    Merci de partager ça. Je vais tout de suite essayer pour l’un de mes clients.
    Gilles from the Gers in France

  2. Amit says:

    can we integrate this application with asp.net 4.0.

  3. Casey says:

    Hey I am still having issues with the pass.as file. I can’t figure it out. Any help would be greatly appreciated

    Casey

  4. hawkeye22 says:

    LCCS is not support for SDK 4.5.1 yet..
    I’ll be back for update library..

  5. Do you mind if I quote a couple of your posts as long as I provide credit and sources back to your site? My blog site is in the very same area of interest as yours and my users would really benefit from some of the information you present here. Keep up the fantastic works guys I’ve incorporated you guys to my own blogroll.

  6. Dilip Apte says:

    If I want to implement this on my website, how can I get a notification when someone tries to chat with me?

  7. samarth says:

    adobe LCCS is going to close its service by this December.
    if their is any other service that can be used for live video chatting??

  8. admin says:

    nothing but good news might happen for LCCS. We’re working on it. Stay tuned


Trackbacks/Pingbacks

  1. Swf.hu 2.0 – flash és webfejlesztés » Heti linkajánló – 2010/40 - October 4, 2010

    [...] Build a chat with Flex Chat alkalmazás készítése Flex-el és LCCS (LiveCycle Collaboration Service) segítségével. [...]

  2. My chat widget with PHP | RIAgora - October 4, 2010

    [...] the sidebar of this blog. I wanted to display in real-time the number of people registered in my chat room, and indicate if I’m in logged in or not. First, I tried using the UserManager AS3 class [...]

Share your view

Post a comment

Who am I ?

I'm Michaël CHAIZE, Adobe Flash Platform Evangelist based in Paris. I'm a big fan of Rich Internet Applications and I promote the Flash Platform in the Enterprise world.
You can follow me on twitter: http://twitter.com/mchaize

Magazine

Follow us on Facebook

© 2014 RIAgora. Powered by WordPress.

Daily Edition Theme by WooThemes - Premium WordPress Themes