×
Namespaces

Variants
Actions
(Difference between revisions)

Facebook Chat Client for Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata)
hamishwillee (Talk | contribs)
m (Hamishwillee - Minor partial subedit)
Line 1: Line 1:
 
[[Category:Messaging on Windows Phone]][[Category:Web Services on Windows Phone]][[Category:Code Examples]][[Category:XAML]][[Category:Windows Phone 7.5]][[Category:Windows Phone 8]]
 
[[Category:Messaging on Windows Phone]][[Category:Web Services on Windows Phone]][[Category:Code Examples]][[Category:XAML]][[Category:Windows Phone 7.5]][[Category:Windows Phone 8]]
{{Abstract| This article demonstrate the use of Facebook Chat library to create a Facebook chat client application using X-FACEBOOK-PLATFORM SASL authentication mechanism. }}
+
{{Abstract|This article demonstrate the use of a Facebook Chat library to create a Facebook chat client application, and using the X-FACEBOOK-PLATFORM SASL authentication mechanism. }}
 
{{ArticleMetaData <!-- v1.3 -->
 
{{ArticleMetaData <!-- v1.3 -->
|sourcecode= [[Media: FacebookChat.zip]]
+
|sourcecode= [[Media:FacebookChat Library v1.1.zip]]
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|devices= Nokia Lumia 820,920 <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 
|devices= Nokia Lumia 820,920 <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
Line 22: Line 22:
  
 
==Introduction==
 
==Introduction==
Facebook Chat client used Jabber/XMPP service to connect with Facebook server.  You can authenticate Facebook Chat client using one of these two method : X-FACEBOOK-PLATFORM and DIGEST-MD5. In this example we will use X-FACEBOOK-PLATFORM mechanism to connect to Facebook Chat server. This process is recommended by Facebook and in order to connect using this mechanism, the user must first log in to the developed application and grant the {{Icode|xmpp_login}} extended permission. Follow the application authentication process to get an {{Icode|access_token}} with the {{Icode|xmpp_login}} extended permission. Once we have the {{Icode|access_token}} the application can log in to Facebook Chat via Jabber using the X-FACEBOOK-PLATFORM mechanism. For more details about Facebook Chat client authentication and implementation visit [https://developers.facebook.com/docs/chat/ Facebook Chat API].
+
Facebook Chat clients used a Jabber/XMPP service to connect with Facebook server.   
 +
 
 +
You can authenticate Facebook Chat client using either X-FACEBOOK-PLATFORM or DIGEST-MD5. In this example we will use the recommended X-FACEBOOK-PLATFORM mechanism to connect to the Facebook Chat server. In order to connect using this mechanism, the user must first log in to the developed application and grant the {{Icode|xmpp_login}} extended permission, then follow the application authentication process to get an {{Icode|access_token}} using the {{Icode|xmpp_login}} extended permission.  
 +
 
 +
Once we have the {{Icode|access_token}} the application can log in to Facebook Chat via Jabber using the X-FACEBOOK-PLATFORM mechanism. For more details about Facebook Chat client authentication and implementation visit [https://developers.facebook.com/docs/chat/ Facebook Chat API].
 +
 
 
<gallery widths=200px heights=350px>
 
<gallery widths=200px heights=350px>
 
File: wp_ss_20130917_0005.png|Instructions
 
File: wp_ss_20130917_0005.png|Instructions
Line 131: Line 136:
 
==Source Code==
 
==Source Code==
 
* The full source code of the example is available here: [[File: FacebookChat.zip]]
 
* The full source code of the example is available here: [[File: FacebookChat.zip]]
* Download Facebook Chat library [[File: FacebookChat Library.zip]]
+
* Download Facebook Chat library [[File: FacebookChat Library v1.1.zip]]
  
 
==New Release (version 1.1)==
 
==New Release (version 1.1)==
Line 140: Line 145:
 
* Download and replace the latest library in your project [[File: FacebookChat Library v1.1.zip]].
 
* Download and replace the latest library in your project [[File: FacebookChat Library v1.1.zip]].
  
==Know Issue==
+
==Known Issue==
 
{{Note| This issue has been addressed in the latest release of the library [[File: FacebookChat Library v1.1.zip]]}}
 
{{Note| This issue has been addressed in the latest release of the library [[File: FacebookChat Library v1.1.zip]]}}
  
Line 159: Line 164:
  
 
==History==  
 
==History==  
I started working on this library when I saw the [http://developer.nokia.com/Community/Discussion/showthread.php/238921-XMPP-Client-Lib?p=926632#post926632 DiBo] post. And took it as a challenge after it got [http://developer.nokia.com/Blogs/Community/2013/07/02/xmpp-client-lib-featured-dibo-post/#comment-14371 featured]. There are lots many areas of improvement in the library, so if you have any suggestion or find bugs while using this library please keep coming your feedback in the comment section to help me update the library. We will come up with source code of the Library in our next release.
+
I started working on this library when I saw the [http://developer.nokia.com/Community/Discussion/showthread.php/238921-XMPP-Client-Lib?p=926632#post926632 DiBo] post. And took it as a challenge after it got [http://developer.nokia.com/Blogs/Community/2013/07/02/xmpp-client-lib-featured-dibo-post/#comment-14371 featured]. There are many areas for improvement in the library, so if you have any suggestion or find bugs while using this library please keep coming your feedback in the comment section to help me update the library. We will come up with source code of the Library in our next release.

Revision as of 09:04, 7 October 2013

This article demonstrate the use of a Facebook Chat library to create a Facebook chat client application, and using the X-FACEBOOK-PLATFORM SASL authentication mechanism.

WP Metro Icon Messages.png
WP Metro Icon Web.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
Devices(s): Nokia Lumia 820,920
Compatibility
Dependencies: Facebook API
Platform Security
Capabilities: ID_CAP_NETWORKING
Article
Created: somnathbanik (19 Sep 2013)
Last edited: hamishwillee (07 Oct 2013)

Contents

Introduction

Facebook Chat clients used a Jabber/XMPP service to connect with Facebook server.

You can authenticate Facebook Chat client using either X-FACEBOOK-PLATFORM or DIGEST-MD5. In this example we will use the recommended X-FACEBOOK-PLATFORM mechanism to connect to the Facebook Chat server. In order to connect using this mechanism, the user must first log in to the developed application and grant the xmpp_login extended permission, then follow the application authentication process to get an access_token using the xmpp_login extended permission.

Once we have the access_token the application can log in to Facebook Chat via Jabber using the X-FACEBOOK-PLATFORM mechanism. For more details about Facebook Chat client authentication and implementation visit Facebook Chat API.

Implementation

Steps and Application flow

  • Create a standard Windows Phone project using Visual Studio
  • Download the library and add to your project reference
  • Authenticate your client application with xmpp_login extended permission. You can get the complete application authentication process in the example source code or follow the below articles for better understanding.
  • Get the access_token and save it for future use.
  • Follow the Code Behind section below to make use of the library.

Note.pngNote: The UI creation of the application is not discussed in this article as it’s not the main focus of this example. You can get a basic UI implementation in the example source code or create a beautiful UI of your choice.

Create a standard Windows Phone Project

Let’s create a standard Windows Phone Application Project

  • Launch Visual Studio
  • Click on File
  • Click on New Project
  • Select Windows Phone App (Visual C# Template)
  • Add Name and Location of the project
  • Click OK to create the project.

Code Behind

  • Once you are done adding the library in the project reference add the using statement to call the APIs.
using XFacebook.Chat.WindowsPhone.XFACEBOOK;
  • Create an instance of XFacebook class in App.xaml.cs file.
public static IXFacebook iXFacebook = new XFacebook.Chat.WindowsPhone.XFACEBOOK.XFacebook();
  • Call the event OnLoadedOnlineFriends to load all online Facebook friends and display on a list box.
App.iXFacebook.OnLoadedOnlineFriends += iXFacebook_OnLoadedOnlineFriends;
 
void iXFacebook_OnLoadedOnlineFriends(object sender, FriendsStatusItemsArgs e)
{
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
txt_OnlineFriends.Text = "Online Friends";
ListBoxFriends.ItemsSource = e.ListFriendsStatusItems;
});
}
  • Call Connect() method to start a session which takes Facebook Access Token and Facebook Key as parameters.
App. iXFacebook.Connect(Global.GAccessToken, Global.FacebokKey);
  • Event OnLoadedMessageReceived is called when you receive message from user.
App.iXFacebook.OnLoadedMessageReceived += iXFacebook_OnLoadedMessageReceived;
 
void iXFacebook_OnLoadedMessageReceived(object sender, NewMessageItemsArgs e)
{
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
if (e.iNewMessageItems.IsReceived)
{
MessagesViewModel viewModel = this.DataContext as MessagesViewModel;
CustomMessage customMessage = new CustomMessage(e.iNewMessageItems.Message, DateTime.Now.AddMinutes(1), ConversationViewMessageType.Incoming, viewModel.ConversationBuddy.PersonId);
viewModel.Messages.Add(customMessage);
}
});
}
  • SendMessage() method is used to send chat message, which takes user id and text message as parameter.
App.iXFacebook.SendMessage(originalMessage.Text, Global.GSelectedFriendId);
  • To get user conversation state changed call the event OnLoadedUserConversationStateChanged
App.iXFacebook.OnLoadedUserConversationStateChanged += iXFacebook_OnLoadedUserConversationStateChanged; 
 
void iXFacebook_OnLoadedUserConversationStateChanged(object sender, ConversationStateItemsArgs e)
{
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
txt_ConversationState.Text = e.iConversationStateItems.State;
});
}
  • Before you run the application make sure to add your Facebook Key and Secret in Global.cs file in project folder.
  public const string FacebokKey = "<YourKey>";
public const string FacebokSecret = "<YourSecret>";

Usage of APIs used in this library

  • OnLoadedFriendList : Returns Facebook friend list
  • OnLoadedMessageReceived : Returns with Chat message from user
  • OnLoadedOnlineFriends : Returns list of online friends
  • OnLoadedUserConnected : Returns user connected status
  • OnLoadedUserConversationStateChanged : Returns user conversation state
  • OnLoadedUserDisconnected : Called when user is disconnected
  • OnLoadedUserStateChanged : Returns user session state changed
  • Connect() : Create a chat session
  • SendMessage() : Send message to user

Reference

During the course of the development of this library I went through many XMPP libraries for .Net and C++. Though I liked few but either those are paid or doesn’t support X-FACEBOOK Chat implementation. The most helpful for me was XMPP/Media library for .Net and Windows Phone 7.5 which saved much of my time implementing a complete XMPP stack.

Source Code

New Release (version 1.1)

In this release we have taken care of

  • Displaying both Online/Offline friend list
  • Added INotifyPropertyChanged interface to update the UI

Known Issue

Note.pngNote: This issue has been addressed in the latest release of the library File:FacebookChat Library v1.1.zip

Sometimes you might come across to a situation where you don't see friend list on the screen. This is not because of any issue in the library but the application list box which doesn't update when item gets added in the list. For verification call the event OnLoadedOnlineFriends and see what you get in the response.

 void iXFacebook_OnLoadedOnlineFriends(object sender, FriendsStatusItemsArgs e)
{
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
 
txt_OnlineFriends.Text = "Online Friends";
ListBoxFriends.ItemsSource = e.ListFriendsStatusItems;
 
});
}

Use ObservableCollection or some other way to get better notified when there are changes in the list items.

History

I started working on this library when I saw the DiBo post. And took it as a challenge after it got featured. There are many areas for improvement in the library, so if you have any suggestion or find bugs while using this library please keep coming your feedback in the comment section to help me update the library. We will come up with source code of the Library in our next release.

617 page views in the last 30 days.