Remote window application by Javascript in realtime

Đinh Công Thắng

Rate me:

4.92/5 (4 votes)

13 Oct 2014CPOL2 min read

13.5K

136

If you know firebase, it very good to use to build realtime applications.

Introduction

When I create a window application, I want to know some way to send a message or control application from the internet, but I'm not found any approach to solve this problem. After some research in the internet I found the good resources to to this, it is a firebase and webbrowser. If you don't know how to control your window application using the the javascript please read the previous article I already published.

Download RemoteAppUsingFireBase.zip

Background

In this article I use some basic javascript and c# code to present the approach, and you will read the documents in the firebase website to understand more.

Using the code

First, you must create new window application, and then embed webbrowser control to your window application with some method you prepare to use to control your application.

Step 1: Create the new Windows Forms Application project

Step 2: Add [ComVisible(true)] attribute before your class

// This nested class must be ComVisible for the JavaScript to be able to call it.
[ComVisible(true)]
public partial class frmMain : Form
{

}

Step 3: Add web browser with your method you need and hide it in your application. In this code I was created the instance of WebBrowser and create a function to show message when you call showMessage('test'); it will execute and callback to displaymessage(string msg).

namespace RemoteAppUsingFireBase
{
    [ComVisible(true)]
    public partial class Main : Form
    {
        //Declare your embed browser in your app
        private WebBrowser wbMain;

        public Main()
        {
            InitializeComponent();

            //Create new instance
            wbMain = new WebBrowser();
            //Using this code will be make callback from the javascript
            wbMain.ObjectForScripting = this;
            //Declare function to callback when javascript execute
            wbMain.DocumentText = "<html>" +
                                    "<head>" +
                                        "<script type='text/javascript'>" +
                                            "function showMessage(msg)" +
                                            "{" +
                                                "window.external.displayMessage(msg);" +
                                            "}"+
                                        "</script>" + 
                                    "</head>" + 
                                    "<body>" + 
                                    "</body>" + 
                                  "</html>";
            //Hide web browser
            wbMain.Visible = false;
            //Add web browser to windows application
            this.Controls.Add(wbMain);
        }

        //This function will be fire when showMessage function execute
        public void displayMessage(string msg)
        {
            if (!string.IsNullOrEmpty(msg))
                MessageBox.Show(msg);
        }
    }
}

Step 4: Reference firebase script, in the head tag and init the data when application start.

namespace RemoteAppUsingFireBase
{
    [ComVisible(true)]
    public partial class Main : Form
    {
        private WebBrowser wbMain;
        public Main()
        {
            InitializeComponent();
            wbMain = new WebBrowser();
            wbMain.ObjectForScripting = this;
            wbMain.DocumentText = "<html>" +
                                    "<head>" +
                                        //Refence firebase script
                                        "<script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>" +
                                        "<script type='text/javascript'>" +
                                            //Create new object to work with firebase database
                                            "var dataRef = new Firebase('https://qym1img70kf.firebaseio-demo.com/thang');" +
                                            //Set empty value to node 'thang' with property value in message property
                                            "dataRef.set({message: ''});" +
                                            //subscribe event when data in message was changed
                                            "dataRef.on('value', function(snapshot) {" +
                                                "var data = snapshot.val();" +
                                                //Execute callback C# function
                                                "showMessage(data.message);" + 
                                            "});" +
                                            "function showMessage(msg)" +
                                            "{" +
                                                "window.external.displayMessage(msg);" +
                                            "}"+
                                        "</script>" + 
                                    "</head>" + 
                                    "<body>" + 
                                    "</body>" + 
                                  "</html>";
            wbMain.Visible = false;
            this.Controls.Add(wbMain);
        }
        public void displayMessage(string msg)
        {
            if (!string.IsNullOrEmpty(msg))
                MessageBox.Show(msg);
        }
    }
}

On line 25, this is the script of firebase you must reference to you some function of firebase

C++

<script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>

Next line 27, the link 'https://qym1img70kf.firebaseio-demo.com/' is a database in your firebase, replace it with your database, thang after the link https://qym1img70kf.firebaseio-demo.com/ is a node in the database. If you open this link you will see the data in it.

Line 28, when application start I will set reset the data with empty value, and my data only have one property value is message

Line 29 to line 32, this is the event we subcribe when the data on message change, I will get the data and execute the function showMessage. In this function will display the message data we modifiy in firebase database.

Step 3: In your testing, you open multiple application and change the data in the message you will see the message display in all application you already opened before.

Step 4: Create your html file to change the message and see how it interaction with your application.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>FireBase Demo</title>
    <script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>
</head>
<body>
    <input id="tbxMessage" type="text" /><input onclick="sendMessage();" value="Update" type="button" />
    <script type='text/javascript'>
        var dataRef = new Firebase('https://qym1img70kf.firebaseio-demo.com/thang');
        function sendMessage() {
            dataRef.set({ message: document.getElementById('tbxMessage').value });
        }
    </script>
</body>
</html>

Step 5: Open your application and then open your html.

In your html file enter text and click button 'Submit'
See the result in your application, it will show the message with your input in the html file.

Points of Interest

By advantage of webbrowser and firebase you can do a lot of thing like: update new application when new application already published or send announcement to all user are using your application, control some function of application in the realtime, using mobile phone to control your application,...

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Đinh Công Thắng

Software Developer CSC Viet Nam

Vietnam

I worked on Phoenix Software and CSC Viet Nam.
I have knowledge in C#, ASP.NET, Javascript, Jquery, Ajax, SQL Server, MVC 3.

My purpose is to apply what I've learned into real world, create utility so that it can help another person to not repeat their work day by day, of course it's not easy but I'm gonna try and hope the best happen.

Website: http://www.thangdc.com
Twitter: http://www.twitter.com/thangdc
Facebook: http://www.facebook.com/tinhyeu24h

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Remote window application by Javascript in realtime

Introduction

Background

Using the code

License

Comments and Discussions