XSockets.NET TeamBlog

News, updates and other information from Team XSockets.NET

Here Team XSockets provide the latest information about the framework.
You will also find videos and stuff produced by us (and others).

If you have done something with XSockets.NET, tell us and we might post about it here!

 

Meet Faiz from 10pearls

Wednesday, February 25, 2015 12:34 PM 0

From time to time we interview some of our users to learn more about what people like about XSockets.NET, but ofcourse aso to learn about what we can improve. In this interview we talked with Faiz ul Haque from Karachi, Pakistan.


Meet Faiz ul Haque a astute person from Karachi, Pakistan.
He is working as a senior software engineer at http://10pearls.com. A company, specializing in Mobile Applications, Enterprise Software, Web, and Gamification.

About 10pearls:
Founded in 2004, the management of 10Pearls has the experience, expertise, and passion to succeed. The management has managed highly scalable technology projects and implementations across Fortune 500 companies and start-up ventures, including: AOL, Time Warner, NVR, Spacenet, MicroStrategy, Paxfire, and the Asian Pacific Institute of Technology. The principals of the company are committed to innovation, and helping solve customer challenges through out-of-the-box thinking and disciplined, rapid execution.


XSockets:
Great that you take your time answering a few questions. First of all tell us more about your self? We are very curious about the person, who is Faiz
Faiz:
:) always feel in unusual position when describing my self, well i am self motivated, love to learn new tech, team player. worked on many technologies like .net, nodejs, android, python, js frameworks (angular, ember, knockout, etc) etc. Mostly spend my free time (obviously) development of two player games. Smart and optimized code is the thing i like most.

XSockets:
Where did you first hear about XSockets.NET?
Faiz:
well the answer is google of course, :),
In mid of 2013 i guess, i have on some of project involving real time data transfer, so i start digging to find out can we transfer video stream same like skype doing, so found the webrtc and XSocket.NET

XSockets:
What did you find (most) interesting at the first look at XSockets.NET?
Faiz:
Frankly the implementation or integration with existing application is damn easy peasy like eating cake. Especially the WebRTC part (either self hosted or other).

XSockets:
Did you compare us to other frameworks?
Faiz:
Ya, i did, well it’s not actually a comparison thing, as i said, i found XSocket.NET while Googling, found other too like apprtc, easyrtc some other too, but i could say frankly Xsockets implementation of Webrtc is always on my priority first.

XSockets:
Okey, so you compared us with others? What made you choose XSockets.NET?
Faiz:
The implementation or integration part, it’s feel like plug and play.

XSockets:
Were there more people involved in the development process, or did you work alone?
Faiz:
I am alone in this particular project.

XSockets:
What components of XSockets did you use?
Faiz:
Mostly Webrtc.

XSockets:
So, what was (and is) the best thing with XSockets?
Faiz:
well, Xsockets is pretty straight forward, simple in integration and implementation. Just inherit the actual class (like ConfigurationSetting) to extend or override as per you need, that what i like most.

XSockets:
What problems did you encounter along the way?
Faiz:
Mostly with SSL implementation, but i don’t want to mention it as problem .

XSockets:
How did the Team of XSockets.NET help you out? What is your thoughts about our support? Be frank!
Faiz:
Documentation and guide are already available, so i didn’t required to contact any Xsockets team members, so i can’t say anything on that point.

XSockets:
In addition to what you just said what can we do differently?
Faiz:
I think, you guys should start PaaS for XSocket features.

XSockets:
When XSockets.NET went from being free to not free, what were your thoughts?
Faiz:
Well, i am still using developer license (free), i like open Source stuff, but unfortunately you guys did really hard work to code it and also maintain it. so would say it’s OK for me.

XSockets:
What where the main programming challanges when using XSockets.NET?
Faiz:
Well i didn’t find any challenges expect configuration of SSL/TLS.

XSockets:
Is there any particular use-case, scenarios where you can see that XSockets.NET would be perfect to use?
Faiz:
As i said, i mostly utilize the WebRTC feature of XSockets, i utilized it in to make conference call between doctor and patient. So i believe telemedicine would be perfect scenario.

XSockets:
Do you plan to use XSockets.NET again? Maybe you have used it several time already?
Faiz:
Basically it’s depends on work, but i would if i got the opportunity.

XSockets:
Would you recommend others to use XSockets.NET?
Faiz:
My dev circle knowns XSockets.NET via me.

XSockets:
Oki doki, thanks for answering our questions, is there something else on your mind that you feel to share?
Faiz:
Just one thing for other developers , if you guys need some thing real time just plugin with XSockets.NET.

XSockets:
Thank you very much!
Faiz:
Thanks

The importance of state in realtime platforms

Wednesday, March 19, 2014 9:13 AM 0

Having state is crucial in real-time platforms. State is what helps us knowing what clients to send to (the subscribers), and state will also help us finding/sending-to a subset of subscribers...

Why is this important?

First of all we should NEVER broadcast data... A client that is not subscribing for a topic should never get a message about it. Second. If you have 1000 subscribers, but you only want to target 5 of them you have to be able to do so. The other 995 clients should NOT get the message and it should be EASY for you to find these 5 client as a subset from the 1000 subscribers.

An example...

Lets say that you have a chat (yeah I know it's always a chat). You have a lot of clients in the chat so you have to filter where to send the messages. To keep things simple we only have Name, City, Status and Hobby as criterias in the chat. So that the client can say "I'm James. A single person in Boston and my hobby is JavaScript".

We will now know the city, status and hobby of all the clients. What you do with this knowledge is up to you, but lets say that we want to send a message to all people having the same profile as the sender. What would that look like?

The controller

public class MyChat : XSocketController
{
    public string Name { get; set; }
    public string City { get; set; }
    public string Status { get; set; }
    public string Hobby { get; set; }

public void OnChatMessage(string message)
    {
        //This is all it takes to target the clients!
        this.SendTo(p => p.City == this.City && p.Status == this.Status && p.Hobby == this.Hobby
        , this.Name + " - " + message, "onChatMessage");
    }
    //Explanation:
    //Above e use the extension SendTo(Func<T,bool>, object o, string topic);
    //First parameters let you filter with intellisense
    //Second is the object to send (anything that can be serialized)
    //Third is the topic (subscription)
}

Thats it... And it is easy to set the properties on the controller from javascript if you do not want to pass them in with the connection (or write a method that handles the get/set stuff).

Bulding a UI for the MyChat controller could in its simplest form look something like:

The everybody is named 'Glen' chat

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
        <h3>The everybody is named 'Glen' chat</h3>
        <select id="cities">
            <option value="New York">New York</option>
            <option value="Boston">Boston</option>
            <option value="Phoenix">Phoenix</option>
        </select><hr />
        <select id="status">
            <option value="Single">Single</option>
            <option value="Relationship">Relationship</option>
        </select><hr />
        <select id="hobby">
            <option value="JavaScript">JavaScript</option>
            <option value="CSharp">CSharp</option>
        </select><hr />
        <input type="text" id="input-message" value="Goo LR" />
        <button id="btn-send">send</button>
        <div id="messages"></div>
    <script src="Scripts/jquery-2.0.3.js"></script>
    <script src="Scripts/XSockets.latest.js"></script>

<script>
        var conn = null;
        $(function () {
            //Create a connection
            conn = new XSockets.WebSocket('ws://localhost:4502/MyChat');
conn.onopen = function () {
                //Connected, set the C# properties (faking for demo purpose)
                conn.publish('set_City', { value: 'New York' });
                conn.publish('set_Hobby', { value: 'JavaScript' });
                conn.publish('set_Status', { value: 'Single' });
                conn.publish('set_Name', { value: 'Glen' });
//Subscribe for onchatmessage, but I will only get messages within the same city, hobby & status
                conn.on('onchatmessage', function (d) {
                    $('#messages').prepend($('<div>').text(d));
                });
            };
//When the button is clicked
            $('#btn-send').on('click', function () {
                conn.publish('onchatmessage', { message: $('#input-message').val() });
            });
            //When city is changed
            $('#cities').on('change', function () {
                conn.publish('set_City', { value: $(this).val() });
            });
            //When status is changed
            $('#status').on('change', function () {
                conn.publish('set_Status', { value: $(this).val() });
            });
            //When hobby is changed
            $('#hobby').on('change', function () {
                conn.publish('set_Hobby', { value: $(this).val() });
            });
        });
    </script>
    </body>
</html>

Custom Protocols in XSockets.NET

Sunday, February 9, 2014 2:50 PM 2

To follow this sample you have to use XSockets 3.0.4 +

One of many unique features in XSockets is how easy it is to add custom protocols. Since the protocols (as most things in XSockets) is a plugin you can add them by just creating a class.

The cool part is that XSockets supports cross-protocol communication. That means that if you connect for example a Arduino that talks a very simple protocol it will still be able to communicate with clients connected to for example RFC6455 (the websocket protocol).

This is huge strength since you within minutes can connect devices/things to participate in full duplex real-time communication.

Why are custom protocols & cross protocol communication important? WebSockets is not the only transport for real-time communication. You might wanna connect devices/things that do not have the capability to talk RFC6455. It may be a micro-controller or a raw socket client. Neither way you do not want to reinvent the wheel. You might also wanna implement your custom subprotocol such as http://wamp.ws/ and use that instead of our default RFC6455 protocol. The choice is yours!

Doing it from scratch

We will install XSockets into a console application and then add a web-application and create a very simple chat. Then we will create a custom (very simple) protocol so that we can connect from Putty and have a real-time chat between putty and the browser.

Step 1

Create a new ConsoleApplication and name it MyRealTimeServer, then open up the package manager console and install XSockets by typing Install-Package XSockets and hit enter.

When the package is installed you will see some sample code. paste that in the main method of the program.

using (var server = XSockets.Plugin.Framework.Composable.GetExport<IXSocketServerContainer>())
{
    server.StartServers();
    Console.WriteLine("Started, hit enter to quit");
    Console.ReadLine();
    server.StopServers();
}

You now have a real-time server, lets use it :)

Step2

Add another project, this time choose a web-project. I will use MVC but it really does not matter since we only will be writing javascript in it.

When the project is created open up the package manager console and install XSockets JavaScript API by typing Install-Package XSockets.JsApi and hit enter.

The install jQuery by typing Install-Package jQuery and hit enter.

Step 3

Add a new html file, I will call it index.html.

Then just paste in the simple chat you see below.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-2.1.0.js"></script>
    <script src="Scripts/XSockets.latest.js"></script>
</head>
<body>
    <div id="chat">
        <input type="text" id="message" placeholder="hit enter to send..."/>
    </div>
    <div id="messages">
        
    </div>
    <script>
        var conn = null;
        $(function() {
            conn = new XSockets.WebSocket('ws://127.0.0.1:4502/Generic');
            conn.onopen = function () {
                //Subscribe to 'onmessage'
                conn.on('onmessage', function(data) {
                    $('#messages').prepend($('<div>').text(data));
                });
            };
            //When enter is hit, send text..
            $('#message').on('keydown', function(e) {                
                if (e.keyCode == 13) {
                    var text = $(this).val();
                    if (text.length == 0) return;
                    conn.publish('onmessage', text);
                    $(this).val('').focus();
                }
            });
        });
    </script>
</body>
</html>

Step 4

If you start the console application and then the web you will not have a very simple chat!

But we want to include Putty in the chat! So download Putty if you do not have it installed.

Step 5

We need the custom protocol to be able to connect putty, since putty does not use RFC6455 (websocketsprotocol).

In the console application choose "add new item" and navigate to the XSockets templates (installed when xsockets was installed). Name the class "TextProtocol"

Step 6

We now have a protocol, but this will expect JSON since that is the default behaviour of the base protocol. So we have to override the methods for incoming and outgoing data and tranforms/parse the data.

We also have to take care of publish/subscribe since the putty client want to subscribe to the "onmessage" event.

So... We just override the two methods OnIncomingTextFrame and OnOutgoingTextFrame

 

public override ITextArgs OnIncomingTextFrame(List<byte> payload)
{
    var data = Encoding.UTF8.GetString(payload.ToArray()).Replace("\r\n", string.Empty);
    if (data.Length == 0) return null;
    ITextArgs ta;
    if (data.Contains(":"))
    {
        ta = ConvertToTextArgs(data);
    }
    else
    {
        ta = new TextArgs(data, "OnMessage");
    }
    return ta;
}
private ITextArgs ConvertToTextArgs(string s)
{
    var topic = s.Split(':')[0].ToLower().Trim();
    var content = s.Split(':')[1];
    if (topic == "subscribe")
    {
        return GetPubSub(content, Constants.Events.PubSub.Subscribe);
    }
    if (topic == "unsubscribe")
    {
        return GetPubSub(content, Constants.Events.PubSub.Unsubscribe);
    }
    return new TextArgs(content, topic);
}
private ITextArgs GetPubSub(string topic, string pubsub)
{
    var subscription = new XSubscriptions {Event = topic};
    var json = this.Controller.JsonSerializer.SerializeToString(subscription);
    return new TextArgs(json, pubsub);
}
public override byte[] OnOutgoingTextFrame(ITextArgs args)
{
    return Encoding.UTF8.GetBytes(args.@event + ":" + args.data + "\r\n");
}

We are done.. Try it out

So start the console application again and open up the browsers again...

Then open putty, and type in the ip and port of the XSockets server. Remember to use RAW

To connect to our protocol we send the controller to connect to as well as the protocol handshake.

We want to use the Generic controller and the handshake is very simple in our demo protocol... So just type"Generic TextProtocol" and hit enter.

If everything is ok XSockets will return the HostResponse.

Now send in "subscribe:onmessage" to subscribe to messages in the chat.

Now just send messages between putty and the browser :)

Note: There are obviously stuff missing, such as security masking data etc. But it shows that you can connect anything very easy with xsockets and use the power of publish/subscribe between clients with different capabilities!

Hopefully you realize the power and possibilities in this!

Now create something awesome and tell us about it :)

Regards

Uffe, Team XSockets.NET