Tom Krcha's FlashRealtime

Hey amigo! These are my notes. I'm Platform Evangelist with Adobe.

Simple chat with P2P NetGroup in FP 10.1

February 9th, 2010

Watch videotutorial of creating P2P Chat with NetGroup in FP 10.1

afcs_logoThis tutorial explains total basics of using P2P/RTMFP Groups in Flash Player 10.1. We are going to build simple multi-user chat using RTMFP Posting - all data will be transferred over P2P! For this purpose we use recently updated (22 Jan 2010) Adobe Stratus - rendezvous service.

Updated: 4:37 PM Feb 9 2010

Final demo: Try (run in few browsers) | Download source

Prerequsities:
- Flash Player 10.1
- UDP enabled network (you can’t be behind firewall, which blocks UDP)
- Flash Builder 4
- Stratus developer key - Get one here if don’t have already. You have to login using your Adobe credentials to get it.
- playerglobal.swc for Flash Player 10.1

Step 1: Create new Flex 4 project
File -> New -> Flex Project
Link new playerglobal.swc (FP10.1 API) to your project in Project Properties and set compiler version in Flex Compiler to 10.1.0

p2pgroups-compiler

Step 2: Connect to Stratus
First of all we need to setup NetConnection to Adobe Stratus. That’s easy part.

private const SERVER:String = "rtmfp://stratus.adobe.com/";
private const DEVKEY:String = "YOUR-STRATUS-DEVELOPER-KEY";
private var nc:NetConnection;
 
private function connect():void{
	nc = new NetConnection();
	nc.addEventListener(NetStatusEvent.NET_STATUS,netStatus);
	nc.connect(SERVER+DEVKEY);	
}

Step 3: Setup NetGroup
We need to setup P2P group and connect to it. GroupSpecifier is a class, which let’s you to define all the parameters of the group. First you give it a name - in this case “myGroup/g1″. Then you set it to use serverChannel, to let it communicate with Stratus. Finally we enable Posting. That’s all you have to do to define the P2P Group.
Then we have to define the actual NetGroup. groupspecWithAuthorizations() returns String - it’s a group identifier. Now you probably ask, what’s the difference between groupspecWithoutAuthorizations() and groupspecWithAuthorizations(). If you set a posting or multicast password, the one “with” can post or multicast, the one “without” is receive-only.

private function setupGroup():void{
	var groupspec:GroupSpecifier = new GroupSpecifier("myGroup/g1");
	groupspec.serverChannelEnabled = true;
	groupspec.postingEnabled = true;
 
	netGroup = new NetGroup(nc,groupspec.groupspecWithAuthorizations());
	netGroup.addEventListener(NetStatusEvent.NET_STATUS,netStatus);
 
 
	user = "user"+Math.round(Math.random()*10000);
}

Step 4: Handle NetStatusEvent
We are going to handle at this step just three events. When we connect to Stratus we setup a group. When we connect to NetGroup we reflect it to UI and and when we receive a Posting message we show it in chat history.

private function netStatus(event:NetStatusEvent):void{
	trace(event.info.code);
 
	switch(event.info.code){
		case "NetConnection.Connect.Success":
			setupGroup();
			break;
 
		case "NetGroup.Connect.Success":
			connected = true;
 
			break;
 
		case "NetGroup.Posting.Notify":
			receiveMessage(event.info.message);
			break;
	}
}

Step 5: Sending and receiving message
We have to put together a message object, which handles text, user name, sender ID. Sender ID is useful to have for direct posting. And we also convert NetConnection PeerID to GroupAddress - participant address in the group. When we post() message to a NetGroup, we just distribute it/broadcast it, but it does not come back to us. So that’s why we need to call receiveMessage as well - to display it in history text field.

private function sendMessage():void{
	var message:Object = new Object();
	message.sender = netGroup.convertPeerIDToGroupAddress(nc.nearID);
	message.user = txtUser.text;
	message.text = txtMessage.text;
 
 
	netGroup.post(message);
	receiveMessage(message);
 
	txtMessage.text = "";
}
 
private function receiveMessage(message:Object):void{
	write(message.user+": "+message.text);
}
 
private function write(txt:String):void{
	txtHistory.text += txt+"\n";
}

Step 6: Create UI

<s:TextArea left="10" right="10" top="10" bottom="40" id="txtHistory"/>
<s:TextInput x="10" id="txtUser" text="{user}" bottom="10"/>
<s:TextInput left="145" right="88" id="txtMessage" bottom="10" enter="sendMessage()"/>
<s:Button label="Send" click="sendMessage()" enabled="{connected}" bottom="10" right="10"/>

Step 7: Run it

Tags: , , , , ,
Posted in Tutorial |

Facebook comments:

44 Comments »

  1. 我正在想nc.nearID和p_e.info.neighbor怎么不相等呢。。。
    原来是要用 netGroup.convertPeerIDToGroupAddress(nc.nearID)这个啊！

    不错哦，解决我的问题啦

    Comment by cooerson — February 9, 2010 @ 5:33 pm

  2. Good stuff mate, have you seen lord seantron’s UDP experiments?

    Word up and thanks.

    elliotrock

    Comment by Elliot Rock — February 12, 2010 @ 4:27 am

  3. Hai Sir,

    I am a beginner in the use of flex and stratus.We are doing p2p application as our project.I copied your code but,showing some errors.I can’t identify it.I am using Flash player 10.

    This is my code:-

    Reply Soon….Itz Important then only we can move further..

    Advanced thanx

    Comment by Satheesh — February 12, 2010 @ 12:03 pm

  4. @Satheesh: Have you switched your project to use Flash Player 10.1?

    Comment by tom — February 14, 2010 @ 12:49 pm

  5. @Elliot: Nope, Do you have link?

    Comment by tom — February 14, 2010 @ 12:58 pm

  6. Hai sir,
    I got your reply.I decided to change to FP 10.1
    Any other requirements…

    I am using flex 3 and SDK 3.2

    Hope u comment soon

    Thank U

    Comment by Satheesh — February 18, 2010 @ 12:34 pm

  7. @Sathees: that’s all you need. Just use playerglobal.mwc for Flash Player 10.1 and set Flex compiler to 10.1

    Comment by tom — February 25, 2010 @ 2:47 pm

  8. Tom, will you present also P2P groups without connecting to server? Currently docs are pretty cryptic on that (3rd option for NetConnection.connect with “rtmfp:” parameter).

    Comment by maliboo — March 3, 2010 @ 12:51 pm

  9. [...] you’ve tried my tutorial on creating simple chat using P2P NetGroup in Flash Player 10.1, you might have been wondering what the other parameters you can set-up [...]

    Pingback by P2P GroupSpecifier Class Explained In Details Part 1 — FlashRealtime.com — March 11, 2010 @ 6:25 pm

  10. @maliboo Absolutely - this will be available once the future FMS is out.

    Comment by tom — March 13, 2010 @ 11:36 am

  11. the example didn’t work?

    Comment by cooerson — March 14, 2010 @ 9:37 am

  12. if I open the example in 2 broswers,it will work!!

    but I can not chat with my friends???

    Comment by cooerson — March 14, 2010 @ 9:42 am

  13. @cooerson do you have UDP enabled network? Do you have more details on what does not work? Sending messages from one browser to another? What it writes when you open it two browsers.

    Comment by tom — March 14, 2010 @ 2:29 pm

  14. Tom, but is there any chance to get connected without any assistance? I was hoping that GroupSpecifier.addBootstrapPeer will do the serverless magic :(

    Comment by maliboo — March 15, 2010 @ 1:07 am

  15. [...] Simple chat with P2P NetGroup in FP 10.1 — FlashRealtime.com : 開発環境のセットアップとサンプルコード。 [...]

    Pingback by jp.ferv.blog » Blog Archive » Stratus2 でチャットアプリ — March 15, 2010 @ 3:19 am

  16. @tom ,Of course, the UDP is enabled.And when I open it in 2 broswers,it works very well.but,but,I can’t use it to speak to anyone in other places.In china,my friends all have met this problem,Whether he is in Beijing or Shanghai,he only can speak to himself in his 2 broswers. :(

    Comment by cooerson — March 15, 2010 @ 4:45 am

  17. @cooerson - that’s pretty weird - can you try playing this game with your friend http://nestor.cz/mill/ - it’s P2P Mill. You log in, get URL - send it to your friend and it should be connected. There might be also some blocking in the network. In Europe it works pretty well.

    Comment by tom — March 15, 2010 @ 11:26 am

  18. @maliboo Future version of FMS will enable connecting peers, so you won’t have to use Stratus. addBootstrapPeer is the manual way of adding peers to the group, so they can communicate. serverChannelEnabled=true says that you want to use auto-bootstrapping, thus connect peers automatically. http://www.flashrealtime.com/p2p-groupspecifier-explained-1/

    Comment by tom — March 15, 2010 @ 11:28 am

  19. Hai Sir,

    I did a chat application using stratus 1.0 & FP 10.
    Now i want to do it using stratus 2.0.when i copied a code in flex 3,errors are showing in the line where netgroup is coded.I’m using flex SDK 3.2.

    Can i use Flex builder 3,right?

    Comment by Satheesh — March 15, 2010 @ 2:14 pm

  20. @Satheesh yes you can, but you need to use new playerglobal.swc, set Flex Compiler to 10.1 and use Flex SDK 3.5

    Comment by tom — March 16, 2010 @ 2:31 pm

  21. @tom I made a stupid mistake，the udp is not enabled。but Why Adobe does not let it open automatically?

    Comment by cooerson — March 17, 2010 @ 1:33 pm

  22. @cooerson it’s because we don’t want to behave like Skype. We want to let users to choice and open UDP for Flash Player or not. Still you can enable RTMPTURNProxy in you FP configuration: read more here: http://forums.adobe.com/thread/418763

    Comment by tom — March 17, 2010 @ 4:56 pm

  23. Sound really great! Did you know the Flex application on http://www.facebookchatroulette.com ? I am using exactly the same stuff to allow user to video chat with other Facebook users …

    I have a question for another project, do you think its possible to use this to build a p2p CDN network? I explain:

    - User A publish a video
    - User B, User C connect to A NetStream
    - B and C publish the same video than A
    - User D can connect to B to play the A video

    Someone has understood (I am good on explain …) ?!?

    Comment by Tom — March 28, 2010 @ 9:40 pm

  24. Hai sir,

    How to stream the video in the group.how can we embedd the video code in netgroup?

    Comment by Satheesh — April 16, 2010 @ 3:54 pm

  25. Hi, I followed exactly the steps you mentioned, replace playerglobal.swc by the last one on Adobe web site, but still get the error 1079 (Verify Error …) …

    I am using the last playerglobal.swf (released on 5 April I believed), is anyone got a similar problem ?

    Cheers

    Comment by Tom — April 20, 2010 @ 6:28 pm

  26. Hi Sir,I’m doing UDP file transfer(Asynchronous) application in Flash Builder 4. My back end applications are being done in C++ . Can u please guide me How to do for better performance.

    Comment by Naveen kumar — May 8, 2010 @ 11:02 am

  27. The [b]dosage of prednisone in dogs[/b] of tilt and pyrrolidine is immensely vaginal but must centralize held as someitmes in each light warrant.

    Comment by any feeds back on acomplia — May 10, 2010 @ 3:18 am

  28. hi,
    I just created a p2p chat application. it’s working. when any user joined in this group, immediately I want to get neighborCount from “NetGroup.Connect.Success” event triger. is it possible to get this from “NetGroup.Connect.Success” event?

    Comment by jdeepa — May 11, 2010 @ 11:29 am

  29. Not recommended in affects with ccr harder than 30 ml/min.

    Comment by buy acomplia no prescription — May 17, 2010 @ 1:15 am


  30. Comment by cheap acomplia no prescription buy — May 18, 2010 @ 10:41 am

  31. how about adding video for one publisher?

    Comment by tuiliu — May 21, 2010 @ 4:40 pm

  32. Hi sir!

    i finally manage to make it work but how can we manage to put a previous next button to navigate from x user to another.

    thank you

    Comment by mike1 — June 12, 2010 @ 10:19 am

  33. I have recently tested this code with Flash CS5, and with a bit of messing around I have been getting 500ms response times between the messages, is it something on my end that is causing this huge gap, or is it something within the code?

    Comment by Michael — June 23, 2010 @ 2:44 pm

  34. hi Michael, it depends - if you are in Dubai and sending message to Alaska - it might happen, but normally not. It should be much less.

    Comment by tom — June 25, 2010 @ 8:01 pm

  35. 2 tuiliu
    You can read about adding video here

    http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/flash/net/NetGroup.html

    (see bottom)

    Comment by Vova — June 29, 2010 @ 5:40 pm

  36. 2 Tom

    It seems to me that the delay time of connecting to NetStream publishing video is nearly twice longer when you connect using GroupSpecifier and other Stratus-2 stuff against Stratus-1 style of p2p connecting.

    Is it just me or p2p multycast is really slower?

    I’ve tested two video enabled application (one sending\ one recving) running on the same PC.

    PS THanks for your great tuts, Tom :)

    Comment by Vova — June 29, 2010 @ 5:49 pm

  37. [...] Once you get connected to Stratus or FMS. You need to setup the NetStream - same way like NetGroup (check Simple Chat using NetGroup tutorial). [...]

    Pingback by Multicast Explained in Flash 10.1 P2P — FlashRealtime.com — July 1, 2010 @ 9:42 am

  38. [...] This videotutorial is a follow-up of my tutorial Simple chat with P2P NetGroup in FP 10.1. [...]

    Pingback by P2P Chat with NetGroup in Flash Player 10.1 — FlashRealtime.com — July 8, 2010 @ 12:50 pm

  39. [...] Replication is the most low-level P2P access available in Flash Player 10.1 (next to Multicast, Posting and Directed Routing) It basically enables you to send chunks of between peers. Object Replication [...]

    Pingback by File Sharing over P2P in Flash with Object Replication — FlashRealtime.com — July 14, 2010 @ 9:50 pm

  40. [...] - File Sharing over P2P in Flash Player 10.1 with Object Replication - P2P GroupSpecifier Class Explained In Details Part 1 - Multicast Explained in Flash 10.1 P2P - Directed Routing Explained in Flash 10.1 P2P - Simple chat with P2P NetGroup in FP 10.1 [...]

    Pingback by Video-on-Demand over P2P in Flash Player 10.1 with Object Replication — FlashRealtime.com — July 28, 2010 @ 8:00 pm

  41. [...] Simple chat with P2P NetGroup in FP 10.1 [...]

    Pingback by The next big thing: Adobe Flash P2P « Flash Video Technology and Optimizations — July 30, 2010 @ 8:05 pm

  42. [...]       Flash Player10.1对直接路由的解释•        在Flash Player10.1里通过点对点网络小组进行简单对话Flex和服务器端技术•        Christophe Coenraets写的关于用Flex和LiveCycle Data [...]

    Pingback by 有助于Flash平台开发提速的50个学习资源 – 新闻资讯 – 9RIA.com天地会 – 论坛 | 谱曲 — August 8, 2010 @ 3:48 pm

  43. How would I go on about creating multiple rooms?

    Comment by Ryan C — August 20, 2010 @ 1:22 pm

  44. Just solved my own question. All I did is rename “myGroup/g1″ by using query strings.

    Comment by Ryan C — August 20, 2010 @ 1:44 pm

RSS feed for comments on this post. / TrackBack URL

Leave a comment