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.
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
[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
{
private WebBrowser wbMain;
public Main()
{
InitializeComponent();
wbMain = new WebBrowser();
wbMain.ObjectForScripting = this;
wbMain.DocumentText = "<html>" +
"<head>" +
"<script type='text/javascript'>" +
"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);
}
}
}
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>" +
"<script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>" +
"<script type='text/javascript'>" +
"var dataRef = new Firebase('https://qym1img70kf.firebaseio-demo.com/thang');" +
"dataRef.set({message: ''});" +
"dataRef.on('value', function(snapshot) {" +
"var data = snapshot.val();" +
"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
<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,...
