Deployment & Integration

Web Project

To start using features of MangoChat.net you will have to add reference of MangoChat.net binaries in your project. The steps for adding reference are:

1. Right click on References folder in your web project and click Add Reference as shown in below image.
   
   
2. Select all the binaries from binaries folder as shown in image below and click OK. Now your project is ready to use features of MangoChat.net.
   
   

Web.config

MangoChat.net requires registration of httpHandlers in Web.config. These settings can vary from deployment on IIS 6 to IIS 7 web server:

IIS 6 Configuration:

In <httpHandlers> section under <system.web> add:

IIS 7 Configuration:

In <system.webServer> section add:

Global.asax.cs

These set of steps in Global.asax.cs starts the MangoChat.net service and instructs it from where to get the chat user details. We have also added comments in code for better understanding:

1. In Application_Start add following code:
   
   
   protected void Application_Start(object sender, EventArgs e) {
        // Starts MangoChat.net service
        ChatService.Start();
   
        // Register delegates for retrieving chat user details
        ChatService.OnUserInfoRequired += new Action<OnUserInfoRequiredEventArgs>
                        (ChatService_OnUserInfoRequired);
   }
   
    
2. This delegate method will be used by MangoChat.net control for retrieving chat user details. We have used FakeDAL over here just to give an overview how it will look like. You can use your own code for retrieving user details here.
   
   
   void ChatService_OnUserInfoRequired(OnUserInfoRequiredEventArgs obj)
   {
        var dbUser = DAL.FakeDAL.GetUserById(Convert.ToInt32(obj.UserId));
        var user = new User { UserId = dbUser.UserId.ToString(),  
              Username = dbUser.DisplayName};
        obj.User = user;
   }

Master Page

Below lines of JavaScript will initialize MangoChat.net resources and render MangoChat.net control on page. It’s generally recommended that a Master Page should be used but theses lines can also be added for any other page where you want to show MangoChat.net control:

Login-In Page

Add below code where you want to start user chat session. In most scenarios a website will like to start user chat session whenever a user is logged in system. Therefore the best practice will be to add below snippet where the user’s logged in website. We have added comments in below code to aid in better understanding:

Log-Out Page

Add below code snippet when you want to log out user chat session. Best practice will be to add this code snippet whenever a user logs out from website:

Finally MangoChat.net is ready to show its magic. Run the application in two different browsers (e.g. Chrome and Firefox) to try it out.

Contact List

Generally different websites will like to have different logic for chat mechanism depending on their nature of business. For example a Social Networking site will like to allow a user to chat to his friends only whereas in a technical support website a customer will only be allowed to chat to technical support representatives. To cater this with MangoChat.net is really easy. All you have to do is to do following changes in Global.asax.cs:

1. In Application_Start register a delegate for retrieving contact list:
   
   
   protected void Application_Start(object sender, EventArgs e)
   {
        // Starts MangoChat.net service
        ChatService.Start();
   
        // Register delegates for retrieving chat user details
        ChatService.OnUserInfoRequired += new Action<OnUserInfoRequiredEventArgs>
                   (ChatService_OnUserInfoRequired);
   
        // Register delegates for retrieving contact details
        ChatService.OnContactsRequired += new Action<OnContactsRequiredEventArgs>
                   (ChatService_OnContactsRequired);
   }
   
    
2. Delegate method for retrieving contact list of logged in user. We have used FakeDAL over here just to give an overview how it will look like. You can use your own code for retrieving user details here.
   
   
   void ChatService_OnContactsRequired(OnContactsRequiredEventArgs obj)
   {
        var users = DAL.FakeDAL
             .GetAllContacts(Convert.ToInt32(obj.User.UserId)).ToList();
   
         foreach (DAL.User dbUser in users)
         {
              var user = new Contact
              {
                   UserId = dbUser.UserId.ToString(),
                   Username = dbUser.DisplayName,
                   ImageUrl = VirtualPathUtility.ToAbsolute(dbUser.ImageUrl)
              };
              obj.Contacts.Add(user);
         }
   }
   
    

Data Providers

Built in Data Providers

MangoChat.net provides you with two chat data storage options out of the box.

• In-Memory
• Microsoft SQL Server

In-Memory is the default option for MangoChat.net. Converting it to Microsoft SQL Server storage mode is really simple. All you have to do is to follow these steps.

1. MangoChat.net makes use of tables in SQL Server to execute in SQL Server storage mode. Schema.sql (included in package) will be needed to execute on your database
    
2. In Web.config add connection string under <connectionStrings> of your database, for example:
   
   
   <connectionStrings>
   <add name="MangoService.SQLStorage.Properties.Settings.MangoDBConnectionString"
           connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=MangoDB;
           User ID=sa;Password=xxx" providerName="System.Data.SqlClient" /> </connectionStrings>
   
    
3. In Global.asax.cs add one line in Application_Start to initialize IStorageProvider property i.e. Storage of Service:
   
   
   protected void Application_Start(object sender, EventArgs e)
   {
        // Initialize SQL server storage provider
        Service.Instance.Storage = new SQLServerStorageProvider();
   
        // Starts MangoChat.net service
        ChatService.Start();
   
        // Register delegates for retrieving chat user details
        ChatService.OnUserInfoRequired += new Action<OnUserInfoRequiredEventArgs>
                          ChatService_OnUserInfoRequired);
   
        // Register delegates for retrieving contact details
        ChatService.OnContactsRequired += new Action<OnContactsRequiredEventArgs>
                         (ChatService_OnContactsRequired);
   }

Now MangoChat.net control is ready to execute in SQL Server storage mode. You can check it by checking rows in MangoChat.net tables that you created before on your database.

Custom Data Providers

MangoChat.net also has the option of working with other data providers i.e. Oracle, MySql etc. All you have to do is to implement the IStorageProvider interface and initialize Service.Instance.Storage with your implementation in Application_Start. An example of its implementation can be found in demos.

Themes

MangoChat.net uses the jQuery UI CSS Framework to style itself. jQuery is the most used java script library due to its wide array for plug-in and exceptional ease of use. jQuery UI is the official set of UI widgets provider by the jQuery team.

What this means is that if you already use jQuery UI for your UI components, MangoChat.net can automatically use the theme that you are using for your application. If not you can design a custom theme using the brilliant ‘ThemeRoller’ tool provided by jQuery UI. You can find it at
http://jqueryui.com/themeroller/. Once you have designed your theme just presses download and you’ll get a zip file containing all the required css and image files.

Once you’ve imported the css files into your pages, you just need to add one line in JavaScript before MangoChat.netClient is initialized and started i.e.

Grouping

Grouping can be enabled on MangoChat.net by following steps:

1. Add a single line in JavaScript before MangoChat.netClient is initialized and started i.e.
   
   
   <script type="text/javascript"> 
       // Enables grouping feature in chat controls 
       MangoChatConfig.GroupsEnabled = true; 
       
       // Change css folder path of chat control for changing theme 
       MangoChatConfig.Stylesheets.ThemeStylesheetUrl = 
       '<%= ResolveUrl("~/css/redmond/jquery-ui-1.8.18.custom.css") %>'; 
       
       jq(function() 
       { 
           mcClient = new MangoChatClient(); 
           mcClient.start(); 
       }); 
   </script>
   
    
2. Specify contact group when contact users are retreived Global.asax.cs i.e.
   
   
   void ChatService_OnContactsRequired(OnContactsRequiredEventArgs obj) 
   { 
       var users = DAL.FakeDAL 
           .GetAllContacts(Convert.ToInt32(obj.User.UserId)).ToList();
       foreach (DAL.User dbUser in users) 
       {
           var user = new Contact 
           { 
               UserId = dbUser.UserId.ToString(),
               Username = dbUser.DisplayName,
               ImageUrl = VirtualPathUtility.ToAbsolute(dbUser.ImageUrl),
               // Users are grouped on the basis of first character in display name 
               ContactGroup = dbUser.DisplayName.Substring(0,1) 
           }; 
           obj.Contacts.Add(user); 
       } 
   }

Localization

MangoChat.net makes it really easy to localize text. All you have to is to set properties of MangoChatConfig.Literals object in JavaScript e.g.

Time Stamp Format

Changing time stamp format in MangoChat.net is really easy. All you have to do is to set MangoChatConfig.TimestampFormat property in JavaScript. The patterns for setting date and time stamp format are:

For example MangoChatConfig.TimestampFormat = "hh:mm:ss" will show time stamp format like 02:39:03 (two hours thirty nine minutes and three seconds).