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. Tix says:

    Thanks!

  2. Ozren says:

    As usual, great !!

  3. This is great technology, thanks for sharing!

  4. Nigel says:

    Hey, we got a real URL (finally) : https://collaboration.adobelivecycle.com. No more of this afcs business (although it still works).

  5. admin says:

    Oh thanks :) It must be an old account. I’m an early adopter of LCCS, that’s why. I need to update my bookmarks. Let me update the post.

  6. admin says:

    I updated the post. Thx Nigel

  7. Nigel says:

    Very cool stuff, btw!

  8. Aks says:

    I am getting the following error on my FlashBuilder when I add a ConnectSessionContainer to the mxml file.

    My spec: FB on mac, flex 4.1, flash player 10.1 swc used:

    1046: Type was not found or was not a compile-time constant: GroupSpecifier.Unknown Flex Problem

    1046: Type was not found or was not a compile-time constant: NetGroup. Unknown Flex Problem

  9. Aks says:

    Following up on the error I mentioned, interestingly it happens only when I create the flex project as a web application. If I convert it to a AIR app, I have no compilation issues as mentioned.

  10. admin says:

    Yes, because you’re trying to use Flash Player 10.1 features (for P2P). Two options. First you open the properties of your project and say in the Flex Compiler tab that you target a specific version of the Flash Player, 10.1.0.
    Or, import the lccs.swc file for Flash Player 10 users only.

  11. Aks says:

    Thx! that fixed the problem. Used the specific flash version.

  12. Hi Michaël great application 80 lines of code and 10 min wow!! i try to made the same application with BlazeDS and Red5, not all the functionality but it’s ok. But i think LCCS is the way to go.
    Here is what i made.

    http://jdesconectado.blogspot.com/2010/10/red5-blazeds-realtime-video-chat.html

    Thanks for sharing and for another great demonstration.

  13. Ian bennett says:

    Why does the project keep displaying the Warning “Design mode could not load lccs.swc. It may be incompatible with this SDK or invalid.”
    I have set the Flex Compiler to use Flash 10.1 but cannot get around this problem. Any help anyone?
    Ian

  14. Ian bennett says:

    The screenshare example is missing the source actionscript so I can’t get it to work, does anyone have a complete example to help me build this?

  15. nicky says:

    hi,
    im developing similar appln with client in web appln and owner in air appln, and im streaming the live webcam video through red5 server.but the problem is in web appln the video freezes in few secs. in air appln the video is runnning. as the content from appliaction sandbox is not accessed by the web appln. need help in resolving this issue. im running it locally but in flex builder3.

  16. admin says:

    Hi Nicky,
    I don’t think it’s due to the Flash Player. Can you try on another computer, with different browsers ?
    Can you try just to display the webcam without the connection to RED5 ?
    Thanks

  17. nicky says:

    hey thanks for ur quick reply, if i open a web appln window from air using navigateToURL(“http://localhost/air.html”) for owner chat window from air application. now between client and owner can communicate in web browsers then i can stream both videos. but if i open a native window in air and trying to publish video its publishing but not able to view it in web appln. thts my problem. im unable to view airuser’s video as it is installed in the application sandbox.

  18. admin says:

    You don’t test it on the same computer right? If so, you cannot use the webcam twice. Just one instance of Flash Player can use it.

  19. nicky says:

    im actually testing in 2 different computers with 2 webcams. in one system im running air and in another im running web appln. i m able to view web user’s video in air. air users video just appears as image in web appln. do i have to use any bridging for this. just advice me or provide any link for help. manythanks to u in advance

  20. Rahul says:

    Hi sir….
    This is Rahul from India i have some problem this chat program is not working in my Win-xp and i have flash player10 but its not working properly coz SWC is loaded but when i selected any component, Flex is closed…..can u help me…..and when u will be online….

  21. James says:

    I am trying to develop a website that serves as a resource center for a game I play. I’m sort of new to flex but I want to add in a live chat area to the flex website I am making. I am wondering if this chat program of yours can be easily done for someone who knows little about flex and if it can be done without webcam. Screen capture cam “micheal’s screen” would also be a good thing for when I want to do technical support and show them what I’m doing or how to do something.

  22. admin says:

    James. This is exactly why we created LCCS. It’s very easy to learn, and the case you describe in your post is perfect for LCCS. Try to follow my video tutorial. Let me know if it works on your side.

  23. Alex says:

    Hi, thanks for sharing this project, it looks great. Do you know if it’s possible to build something like this on Flex without using an Air component, so that the clients can chat using only their browsers?

  24. admin says:

    You can use both on the client side, Flash in the browser or AIR on the desktop. At the end, it’s exactly the same code.

  25. Rahul Mani says:

    Hi sir….
    This is Rahul from India i have some problem this chat program is not working in my Win-xp and i have flash player10 but its not working properly coz SWC is loaded but when i selected any component, Flex is closed…..can u help me…..and when u will be online….

  26. Brandon says:

    Its about time someone showed the world how to use AFCS in flex in a Video Tutorial.

    Looks fun and easy!
    Thank You for this great tutorial!

  27. hawkeye22 says:

    How a Great Chat App.. b(“,)d

  28. Asif Bilal says:

    Hello, running Air application while sending a message, I got a debugg Error:
    Error – insufficient permissions to create a new CollectionNode. You must be an OWNER of the room to add new multi-user features to it. Log in with developer credentials in order to do so.

    Although i have passed my username and password by which i uses to login to adobe account.Please get me out of it. Thanks

  29. admin says:

    If you use your login/password to enter the room, and that it’s actually a room that you created (with the URL provided in your administration console), you shouldn’t get this message… Double-check the URL and the login/password… I don’t have any other clue. Sorry

  30. Asif Bilal says:

    Thanks Michaël for your quick response. I made it.

  31. Asif Bilal says:

    Hello Michael, In Air Application Clicking on the start Publish Screen Button, it neither publish nor display any option for publishing as you described in video. What would be the problem? Let me know, Please.

  32. Umair Aamir says:

    Hello Micheal! I have built an application for chatting using Cirrus. It is giving exception some PCs of Class flash.net::GroupSpecifier could not be found, some PCs simply held and some PCs works properly….what could be the reason….is there some error in flashplayer version?

  33. Mado says:

    Hello admin, first you do a great work, thanks too much for share, i would ask im using flex builder 3 i didn’t have a good basic about flex im learn still now so could you say to me what the tool i need to use your code because i try use your code by flex builder 3 but always give me error and also flex builder 3 i think not support <s:Application xmlns:fx and
    <s:WindowedApplication xmlns:fx.
    thanks admin, waiting answer.

  34. admin says:

    Check your SDK version. I’m using Flex SDK 4 (and not 3) in my samples.

  35. Mado says:

    Thanks admin to you fast answer, i do like you say but have other problem in code on part that is flsh builder give error message say “problem finding external file:pass.as” i dont know how i solve this could you explain to me where is wrong.
    Thanks too much admin, waiting answer.

  36. Mado says:

    Hello admin, i tried solve the problem about “problem finding external file:pass.as” but didn’t find solution right now, please some help.
    thanks,waiting answer

  37. hawkeye22 says:

    Hi Mado..
    I used to get the same problem.
    but I’m not fully remember it.
    can you tell which part of your problem?
    for a simple hint is
    try to build different project, copy and paste your old code to a new project.
    btw, in this sample chat is need to specify about lccs.swc version and flashplayer version.
    then the owner room must create sharedID and the first who create the node before guest.

  38. admin says:

    For the pass.as issue, it’s just a file that defines a password variable with my password. That’s why it’s not in the package. Just use your own Adobe account password.

  39. Mado says:

    Hello admin,
    I understand, i can create action script file user name, password and pass.as in the platform, nice form that you create thanks to share.

  40. Troy says:

    Hey, this looks awesome. I have 2 questions though, first off when i run the application it is just a blank window that shows up without any components, second question is would it be possible to just send pictures through this or just video?

  41. admin says:

    @Troy
    If you have a blank window, it means that you have a connection error. Run it in debug mode to check the messages. Use your admin account as a username password into your room. You can also share pictures. Check my blog post “LCCS tablet showcase”. It contains a sample to share a picture.

  42. Prince ATTOBLA says:

    Hello Admin,
    that’s a great tutorial. Is it possible to customize LCCS Components? To put all button Label in French.

  43. admin says:

    @Prince Yes the components are open source. Excellent nouvelle non ?

  44. Prince ATTOBLA says:

    Oui c’est une excellente nouvelle. J’ai testé ton tuto et il marche super bien. Thanks.

  45. Prince ATTOBLA says:

    Hi M. CHAIZE, when I try to compile the src file after modifying simplechat.as I get this error message. This is the command I used:

    compc -include-sources “src” -output “lccs.swc” -strict -optimize

    C:\Program Files\Adobe\Adobe Flash Builder 4 Plug-in\sdks\4.0.0\bin\src\com\adob
    e\rtc\styles\metadata\TextStyles.as(204): col: 1: Erreur: [Style] doit annoter u
    ne classe.

  46. Cesar says:

    Hi,
    I want a videochat module for my dating site. Somethink lika a speeddate chat vith video/audio/text. Can you make this project for me, and how much it cost?
    Please replay me to my email adress.
    Thank you.

  47. Jim says:

    Great video,
    I am suing Flex 4.5. When i try adding the awc file as show at time index 4:58 i get this error.

    C:\X\libs\player10.1\lccs.swc- DesignAssetLoader.CompleteTimeoutSWC file failed to load. Any component dependent on this SWC file will not be displayed in the Design Mode.The SWC may have failed to load because of: * Incompatible definitions caused by usage of a different SDK version * Missing referred class definitions

  48. 712011m4n says:

    Nice app but the pass.as credentials are a bit confusing.

    So far I have created a pass.as and the contents are as stated:

    // ActionScript file
    public var thepass:String;
    public var username:String;

    var thepass = “mypass”;

    What else is needed? The solution to this question may solve many other peoples issues so I figured I would throw this out there for you all.

    Thanks admin for kickass app btw.

    -712011m4n


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

© 2018 RIAgora. Powered by WordPress.

Daily Edition Theme by WooThemes - Premium WordPress Themes