Building Collaborative Applications with Flex Data Services and Flash Media Server
I presented a session called “Building Collaborative Applications with Flex Data Services and Flash Media Server” at MAX (the Adobe developer conference) last week. Beyond the basics of the Flex pub/sub messaging infrastructure, the session provided techniques to build real life collaborative applications. I started with a simple chatroom, and then incrementally added features to end up with an IM client supporting presence and videoconferencing.
Many people have asked me to make my code available. So here it is. If you didn’t attend MAX, I added a brief description for each version of the application.
To run these samples, you need to install the Flex Data Services. If you haven’t already done so, you can download the Flex Data Services here, and follow the installation instructions.
Install the samples
- Download flex-collaboration.zip here and expand it on your local file system
- Copy the flexchat directory in the context root of your web application
- Copy the WEB-INF\src and WEB-INF\classes directories in the corresponding directory structure of your web application
Install the flexchat database
Starting with chat3.mxml, you will need a MySQL database.
- Create a new MySQL database or use an existing one
- Import the flexchat database using the flexchat.sql script
- Make sure a MySQL JDBC driver is available to your web application
- Edit flexchat.properties in WEB-INF\classes, and make sure the connection properties match your configuration
Install Flash Media Server
chat6.mxml requires Flash Media Server to enable videoconferencing.
- Install the Flash Media Server: you can download a free developer edition here (click free developer edition)
- In C:\Program Files\Macromedia\Flash Media Server 2\applications, create a directory called flex_videoconference and copy the main.asc file in that directory
Samples Walkthrough
chat1.mxml
chat1.mxml is a minimal chat application showing how to use the pub/sub messaging capabilities of Flex with just a couple of lines of code.
In this version, messages posted to the “chat” destination go to all the clients who subscribed to it. This is appropriate for a multi-user chatroom use case, but not for instant messaging applications where you want private conversations with individual users.
To run this sample, define a “chat” destination in messaging-config.xml as follows:
<destination id="chat">
<properties>
<network>
<session-timeout>0</session-timeout>
</network>
<server>
<max-cache-size>1000</max-cache-size>
<message-time-to-live>0</message-time-to-live>
<durable>false</durable>
</server>
</properties>
<channels>
<channel ref="my-rtmp"/>
</channels>
</destination>
You may need to restart your server after modifying messaging-config.xml.
chat2.mxml
In this version, we use subtopics to enable private conversations between users. If you want to send a message to a user named Joe, you publish your message to the “Joe” subtopic of the chat destination (chat.Joe). Similarly, if Joe only needs to receive the messages that are sent to him, his client application can subscribe to the “Joe” subtopic.
Subtopics don’t need to be declared. All you need to do is configure your destination to support subtopics as shown below (allow-subtopics and subtopic-separator tags):
<destination id="chat">
<properties>
<network>
<session-timeout>0</session-timeout>
</network>
<server>
<max-cache-size>1000</max-cache-size>
<message-time-to-live>0</message-time-to-live>
<durable>false</durable>
<allow-subtopics>true</allow-subtopics>
<subtopic-separator>.</subtopic-separator>
</server>
</properties>
<channels>
<channel ref="my-rtmp"/>
</channels>
</destination>
chat3.mxml
In this version, we add a buddy list using a DataService. The buddy list is displayed after the user logs on. You need to install the MySQL database to run this application.
To run this sample, add a “chat-buddies” destination in data-management-config.xml as follows:
<destination id="chat-buddies">
<adapter ref="java-dao" />
<properties>
<source>flex.samples.chat.BuddyAssembler</source>
<scope>application</scope>
<metadata>
<identity property="userId"/>
<identity property="buddyId"/>
</metadata>
<network>
<session-timeout>20</session-timeout>
<paging enabled="false" pageSize="10" />
<throttle-inbound policy="ERROR" max-frequency="500"/>
<throttle-outbound policy="REPLACE" max-frequency="500"/>
</network>
</properties>
</destination>
chat4.mxml
In chat4.mxml, we add a custom adapter (ChatAdapter.java) to the chat destination to support basic presence information. ChatAdapter implements the FlexSessionListener interface and uses the sessionCreated and sessionDestroyed callback methods to keep track of when users connect and disconnect, and notify interested parties.
The client application uses separate consumers to subscribe to a “status” subtopic for each buddy in the buddy list (chat.status.jane, chat.status.eric, chat.status.susan, etc.). See the dsBuddiesResult() method for the implementation details.
To run this sample, add our simple ChatAdapter in the list of configured adapters in messaging-config.xml. Th list of configured adapters should look like this:
<adapters>
<adapter-definition id="actionscript" class="flex.messaging.services.messaging.adapters.ActionScriptAdapter" default="true" />
<adapter-definition id="jms" class="flex.messaging.services.messaging.adapters.JMSAdapter"/>
<adapter-definition id="chat" class="flex.samples.chat.ChatAdapter"/>
</adapters>
Next, specify that you want to use the chat adapter in the chat destination by adding the adapter reference as follows:
<destination id="chat">
<properties>
<network>
<session-timeout>0</session-timeout>
</network>
<server>
<max-cache-size>1000</max-cache-size>
<message-time-to-live>0</message-time-to-live>
<durable>false</durable>
<allow-subtopics>true</allow-subtopics>
<subtopic-separator>.</subtopic-separator>
</server>
</properties>
<channels>
<channel ref="my-rtmp"/>
</channels>
<adapter ref="chat"/>
</destination>
The unresolved issue in this version is that when you log on, you still don’t know which of your buddies are *already* online, and what their status is.
chat5.mxml
In this version, we use a DataService (”chat-sessions”) to keep track of the active user sessions along with presence information. Just like we did in ChatAdaper, the UserSessionAssembler class implements the FlexSessionListener interface and uses the sessionCreated and sessionDestroyed callback methods to create and remove user sessions. Using a DataService to keep track of presence information is convenient because changes (i.e. status information) are automatically pushed to all interested clients.
To run this sample, add a “chat-sessions” destination in data-management-config.xml as follows:
<destination id="chat-sessions">
<adapter ref="java-dao" />
<properties>
<source>flex.samples.chat.UserSessionAssembler</source>
<scope>application</scope>
<metadata>
<identity property="userId"/>
</metadata>
<network>
<session-timeout>20</session-timeout>
<paging enabled="false" pageSize="10" />
<throttle-inbound policy="ERROR" max-frequency="500"/>
<throttle-outbound policy="REPLACE" max-frequency="500"/>
</network>
</properties>
</destination>
chat6.mxml
This version is the same as chat5.mxml with the addition of videoconferencing features enabled by Flash Media Server. Start your webcam in one session. in the buddy list of another session, click the name of the user who is broadcasting to see the video feed.
Comments
77 Responses to “Building Collaborative Applications with Flex Data Services and Flash Media Server”
Leave a Reply
[...] That was a fantastic lecture by the way, and it’s awesome to see the code up. It’s all here [...]
Increible!!!!!. Cuando publicaras un libro de FDS?
I get the following errors:
ArgumentError: Error #2126: NetConnection object must be connected.
at flash.net::NetStream$iinit()
at fms/::publish()
at fms/___Button2_click()
Error #2044: Unhandled NetStatusEvent:. level=error, code=NetConnection.Connect.Failed
at fms/::publish()
at fms/___Button2_click()
are you using JRun for this example?
Gustavo - Technically, yes it’s JRun. But he’s just using the crippled version that comes with FDS2.
Christophe - Any chance you can point me in the right direction on how to accomplish what you’ve written in Java (specifically the flexSessionStart and flexSessionEnd) in CF instead? Is it even possible?
Any examples using durable subscribers and JMS Adapter ? I tried using ActiveMQ and providing unique ids when the consumers subscribed. But don’t seem to have any luck: when one durable client goes away and then returns it doesn’t get any of the messages it “missed”. Thanks
hihi
Thanks so very much for taking your time to create this very useful and informative site. I have learned a lot from your site. Thanks!!
When I enter the chat3.mxml “chat-buddies” destination in my data-management-config.xml file, Flex Builder 2 generates an error “Destination ‘chat-buddies’ must specify at least one channel.”
I am using Tomcat 5.5. Any guidance on how to solve this problem?
Great application!
trish stratus porn
http://myblog.es/trish-stratus
Hi, very much a fan of yours.
How can I contact you to inquire your assistance, please, for a web Flex / Flash application.
Please advise.
Cordially,
Jon Alexander
Hello,
Does the cam video example REQUIRE FDS or can Flash Communication Media Services be used?, which we already have on our host server.
Please advise.
Thank you.
Cordially,
Jon Alexander
very cool, I am working a lot with Flex and FMS recently but I haven’t touched FDS yet - in fact I would have probably built the chat with FMS :-)
Nice job - but oh boy, what a learning curve for anyone new to Flex, FMS and FDS…
when I use “ChatAdapter” class ,It don’t invoke function “pushStatus” ，why？
Nice site. good work
I wonder , were to find boyfriend to my sister? Joke:)
My online friends propose this link to use -TOP10 - As for me, I think life is now!!!
When I enter the chat3.mxml “chat-buddies” destination in my data-management-config.xml file, Flex Builder 2 generates an error “Destination ‘chat-buddies’ must specify at least one channel.”
I am using Tomcat 5.5. Any guidance on how to solve this problem?
the same problem.please help me.
Thanks for this nice Tut. everything worked unless chat6…. all what i recieve is an empty page. please advice..
chat3.mxml buddies does not work.
When we hit logon we get this error:
[RPC Fault faultString="Send failed" faultCode="Client.Error.MessageSend" faultDetail="Channel.Connect.Failed error undefined url:'rtmp://myHost:2037'"]
at mx.data::ConcreteDataService/http://www.adobe.com/2006/flex/mx/internal::dispatchFaultEvent()
at ::DataListRequestResponder/fault()
at mx.rpc::AsyncRequest/fault()
at mx.messaging::ChannelSet/::faultPendingSends()
at mx.messaging::ChannelSet/channelFaultHandler()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
http://19.xxxsexygirl24h.info x
[...] If you’re looking for an example application (with code) to help you get a better handle on how Flex2 can leverage Flash Media Server and LiveCycle Data Services, then you’ll find Christopher Coenraets article (named link) a very enlightening read Building Collaborative Applications with Flex Data Services and Flash Media Server . [...]
If you’re following this example and are using the new LiveCycle Data Services ES make sure you download the hotfix for Flex Builder 2.01, it fixes mapping issues that caused errors because of differences between FDS and LCDS. You can get it at adobe here: http://kb.adobe.com/selfservice/viewContent.do?externalId=kb402000&slice
deposit free bonus casino
see to signature…
popular free ringtones
http://www.thehotstop.info
signature…
Can I use FDS o LCDS in Flash Application?
I am just trying to work on a sample application using Eclipse,Flex Builder Plugin,LCDS 2.5 and Tomcat using MYSQL as database.
Can anyone provide a PDF or Link which can guide me through steps
David
david.wilfred@gft.com
Thanks for your great tutorial!!
Those of you who are getting the error “Destination ‘chat-buddies’ must specify at least one channel.” on chat3.mxml just need to add:
… after the tag but before the tag in data-management-config.xml
i am getting these “you must specify at least one channel”, when starting jrun. what do i need to add in the data-management-config.xml?
I guess the tags I wrote in my previous post from October 7th didn’t show up. I’ll leave out the angle brackets and hopefully then they will show up. The part you need to add is the
channels
channel ref=”my-rtmp”/
/channels
before the final destination tag.
i am pretty new to adobe products… any idea how to make the IM client….
[MessagingError message='Destination 'chat-sessions' has no channels defined and the application does not define any default channels.']
at mx.messaging.config::ServerConfig$/::internalGetChannelSet()
at mx.messaging.config::ServerConfig$/getChannelSet()
at mx.messaging::MessageAgent/mx.messaging:MessageAgent::initChannelSet()
at mx.messaging::MessageAgent/mx.messaging:MessageAgent::internalSend()
at mx.messaging::Producer/mx.messaging:Producer::internalSend()
at mx.messaging::AbstractProducer/connect()
at mx.data::DataStore/http://www.adobe.com/2006/flex/mx/internal::initialize()
at mx.data::ConcreteDataService/createItem()
at mx.data.mxml::DataService/createItem()
at chat6/::logon()
at chat6/___Button1_click()
HI, very nice site with a lot of useful information concerning AIR, Flex and FCS(2).
I would like you tell us what do you think about the open source red5 (see http://osflash.org/red5) instead of proprietary Adobe’s Flash Communication Server 2 (FCS2). Have you experience with red5, what is it all about - is scalable, how many transactions can handle, etc?
Regards
man
What is the Dejа vu? What is this fleeting imprinted in the memory?
P.S. Please administrator coenraets.org. If the thread is not to be in category этот, I ask you to move my thread to the correct category.
Hello, I try the chat1.mxml and I get the follow error:
VerifyError: Error #1053: Sustitución no válida de subtopic en mx.messaging.Consumer.
at flash.display::MovieClip/nextFrame()
at mx.managers::SystemManager/deferredNextFrame()
at mx.managers::SystemManager/preloader_initProgressHandler()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.preloaders::Preloader/timerHandler()
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()
Can you hel me please?
great post.thanx.
can tell me how to use H264 codec to develop a video chat application in flex & FMS 3
I didn’t work this program.Can you plese tell how to run this program..?i put the source files in lcds folder but i didn’t get the out put…please tell me the solution for that….
I am curious up to how many users can this chat take?
Thank you! It’s really interesting and information is very helpful! Cool!
When I tried to compile the Java files BuddyAssembler I got an error Class not found. All the other files are compiles. I think is it is due to the package flex.data.assembler.AbstractAssembler
What should I do then? Also Abstract class is a build in class in flex right? Then why this error is occuring? When I went to this path I haven’t find any such class. What should I do?
Please help me…
I am not leaving a reply and I hope you don’t mind. I have gained quite a lot reading the questions and answers.
I wss thinking about incorporating a multi-functional online chat utility into our charity website but not as good as this one made in Flex and powered by FDS.
I am not a programmer, just an elementary web builder. I was wondering if there was someone out there in the cyberspace who would be kind enough to spare some time to help us embed the coding in our site. He or she could either do it for us or perhaps guid us through. Thanks a lot. Please help us as it is for humanitarian work - promoting socio-economic development in the least developed countries. my contact number is 00919810036363 as I am currently working in India trying to learn Flex in order to weave an RIA web application.
I am trying to compile the chat adapter (mostly because I wanted to repackage it). I am getting an error with the line:
MessageService msgService = (MessageService) service;
Error message is “service cannot be resolved”
I have all the packages reference for the import statements. Any idea what is causing this error?
@Mike you need to replace service with getDestination().getService().
Adrian.
Since I am completely to all this, I was hoping that you might have a dummy proof version of a step by step tutorial. I have installed Flex and Flesh Media Server. Since I have been only using Wamp, I am a little confused where to extract flex-collaboration.zip files since I couldn’t find WEB-INF. I would greatly appreciate any help.
how can i run this application with tomcat 5.5 please help me.
[MessagingError message='Destination 'chat' either does not exist or the destination has no channels defined (and the application does not define any default channels.)']
at mx.messaging.config::ServerConfig$/internalGetChannelSet()[E:\dev\3.0.x\frameworks\projects\rpc\src\mx\messaging\config\ServerConfig.as:624]
at mx.messaging.config::ServerConfig$/getChannelSet()[E:\dev\3.0.x\frameworks\projects\rpc\src\mx\messaging\config\ServerConfig.as:255]
at mx.messaging::MessageAgent/initChannelSet()[E:\dev\3.0.x\frameworks\projects\rpc\src\mx\messaging\MessageAgent.as:1083]
at mx.messaging::MessageAgent/internalSend()[E:\dev\3.0.x\frameworks\projects\rpc\src\mx\messaging\MessageAgent.as:1059]
at mx.messaging::Consumer/internalSend()[E:\dev\3.0.x\frameworks\projects\rpc\src\mx\messaging\Consumer.as:224]
at mx.messaging::AbstractConsumer/subscribe()[E:\dev\3.0.x\frameworks\projects\rpc\src\mx\messaging\AbstractConsumer.as:624]
at chat1/logon()[E:\FlexProject\ChatApplication\FMSChat\src\chat1.mxml:12]
at chat1/___chat1_Button1_click()[E:\FlexProject\ChatApplication\FMSChat\src\chat1.mxml:42]
when i run chat1.mxml it gives above error please advise me where i copy messaging-config.xml file
how can i run this application with tomcat 5.5 please help me..
I can’t resolve the AbstractAssembler and DataServiceTransaction classes. What do I use in replacement of these?
Great tutorial. I have been building my own Instant messenger with Flex Data Service but am struggling to see how to add a buddy where it sends a request for the recipient to accept this. I can only see how to do this with XMPP. Does flex data services lack this functionality? If anyone knows could you leave a quote on where to find some documentation on this or an example.
Does anyone know in an instant messeneger how to. If i want to view cam with another user online to send a request for the user to accept this so there is some kind of security instead of just plain streaming.