XSockets (Azure) & Wijmo

Took @bannon ´s demo from aspconf and added XSockets.

by erick

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Wijmo MVVM Support</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <!-- Wijmo CSS and script -->
    <link type="text/css" href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" title="metro-jqueryui" />
    <link type="text/css" href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.css" rel="stylesheet" />
    <script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.1.0.min.js"></script>
    <script type="text/javascript" src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.js"></script>
    <!-- KnockoutJS for MVVM-->
    <script type="text/javascript" src="http://cdn.wijmo.com/external/knockout-2.0.0.js"></script>
    <script type="text/javascript" src="http://cdn.wijmo.com/external/knockout.wijmo.js"></script>
    <!-- JXSOCKETS JS //-->    
    <script src="http://live.xsockets.net/Scripts/jXSockets.1.0.6.beta.js" type="text/javascript"></script>
</head>
<body>
    <h3>Edit the table below to see realtime changes...</h3>
    <div class="container">
        <div id="dataChart" data-bind="wijbarchart: { dataSource: list, seriesList: [{ label: 'Sales', data: { x: { bind: 'Name' }, y: { bind: 'Sales'} } }] }" style="width:600px; height:300px;">
        </div> 
        <table id="dataGrid" data-bind="wijgrid: { afterCellEdit: sendChanges , data: list, allowEditing: true, columns: [{},{},{},{ dataType: 'number' }] }" style="width:600px;">
        </table>
    </div>
</body>
</html>

CSS

body
        {
            font-size: 13px;
        }

JavaScript

//XSockets API-Key Example
var xsLiveAccount = {
    apikey: '73ddd261-2e21-455d-9b94-89d6bdc8ad1c'
};
var ws = null;

// when document loads, create ViewModel, and apply bindings
//Person class

function Person(data) {
    this.ID = ko.observable(data.ID);
    this.Company = ko.observable(data.Company);
    this.Name = ko.observable(data.Name);
    this.Sales = ko.observable(data.Sales);
};

var viewModel = {
    list: ko.observableArray([
        new Person({
        ID: "ANATR",
        Company: "Ana Trujillo Emparedados y helados",
        Name: "Ana Trujillo",
        Sales: 8900
    }),
        new Person({
        ID: "ANTON",
        Company: "Antonio Moreno Taqueria",
        Name: "Antonio Moreno",
        Sales: 4500
    }),
        new Person({
        ID: "AROUT",
        Company: "Around the Horn",
        Name: "Thomas Hardy",
        Sales: 7600
    }),
        new Person({
        ID: "BERGS",
        Company: "Berglunds snabbkop",
        Name: "Christina Berglund",
        Sales: 3200
    })
        ]),
    sendChanges: function() {
        ws.trigger('salesChanged', ko.toJSON(viewModel.list()));
    }
};

//Bind ViewModel
$(document).ready(function() {

    // Setup config for Wijmo Handler
    var xHandler = "XSockets.Live.Realtime.API";
    var wsUri = "ws://xsocketslive.cloudapp.net:10101/" + xHandler;

    // Create an instance of the Generic Live WebSocket Handler of XSockets.NET
    ws = new XSockets.WebSocket(wsUri, xHandler, xsLiveAccount);
    ws.bind(XSockets.Events.open, function() {
        //Listen for changes in the viewmodel (may come from anywhere)
        ws.bind('salesChanged', function(data) {
            viewModel.list(JSON.parse(data));
        });
    });
    ko.applyBindings(viewModel);
});