JSON-RPC websockets example
#1
It's more of a first draft, and could certainly do with some rough edges being sanded off, but here's a working example of websockets - it will display details of the current video being played. You can just put this in a html file and open it in your browser. Make sure you change the LAN address of your XBMC player in the code (mine is 192.168.0.140), enable websockets in the XBMC settings, and use a modern enough browser - mine is Firefox 21, although it should work from FF 6 onwards. The main catch is that websockets aren't supported on IE 9.

Hope this is useful for someone. Improvement suggestions more than welcome. Many thanks to the XBMC devs for implementing such a cool feature.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>XBMC Websockets</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<script language="javascript" type="text/javascript">
    var ws = new WebSocket('ws://192.168.0.140:9090/jsonrpc');
    ws.onopen = function (event) {
        send_message("Player.GetActivePlayers");
        }

    ws.onmessage = function (event) {
        var j = JSON.parse(event.data);

        if (j.id) // response
            {
            switch(j.id) {
                case "Player.GetActivePlayers":
                    var r = j.result[0];
                    if (r.type == 'video') {
                        send_message("Player.GetItem", {
                                "properties": ["file", "streamdetails"],
                                "playerid": r.playerid,
                                });
                        }
                    break;
                case "Player.GetItem":
                    //alert(event.data);
                    var r = j.result.item;
                    document.getElementById("name").innerHTML = r.label;
                    document.getElementById("file").innerHTML = r.file;
                    var v = r.streamdetails.video[0];
                    document.getElementById("details").innerHTML = v.width + 'x' + v.height + ', ' + v.duration + 's';
                    break;
                default:
                    //alert(event.data);
                }
            }
        else // notification
            {
            switch(j.method) {
                case "Player.OnPlay":
                    send_message("Player.GetActivePlayers");
                    break;
                case "Player.OnStop":
                    document.getElementById("name").innerHTML = "VIDEO PLAYER STOPPED";
                    document.getElementById("file").innerHTML = "";
                    document.getElementById("details").innerHTML = "";
                    break;
                default:
                    //alert(event.data);
                }
            }
        }

    function send_message(method, params) {
        var msg = {
            "jsonrpc": "2.0",
            "method": method,
            "id": method
        };
        if (params) {
            msg.params = params;
        }
        ws.send(JSON.stringify(msg));
    }
</script>

<div id="name"></div>
<div id="file"></div>
<div id="details"></div>

</body>
</html>
Reply
#2
Personally I only use websockets for notifications. Makes life easier Wink

https://github.com/frolick/AWX-Eden/blob...c.js#L3476
Image
AWXi - Ajax web interface. Wiki
Reply
#3
I am using websockets in Safari mobile, but it seems to crash unexpectively...

Anyone came across this problem
Reply
#4
Hi.

I was looking for one such example to get things going and this one suited me fine. Thanks!

I was just surprised that there was an error the first time I tried loading this, since I has no video running in Kodi... This can be a bit confusing for newcomers.

I have thus slightly modified the code to avoid this error, maybe this way is easier to understand...

Best regards, Luís

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- from https://forum.kodi.tv/showthread.php?tid=165814 -->
<html>
<head>
<title>XBMC Websockets</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<script language="javascript" type="text/javascript">
var ws = new WebSocket('ws://localhost:9090/jsonrpc');
ws.onopen = function (event) {
send_message("Player.GetActivePlayers");
}

ws.onmessage = function (event) {
var j = JSON.parse(event.data);

if (j.id) // response
{
switch(j.id) {
case "Player.GetActivePlayers":
if(j.result[0]==undefined){ // No result, thus no video playing...
document.getElementById("name").innerHTML = "VIDEO PLAYER STOPPED";
document.getElementById("file").innerHTML = "";
document.getElementById("details").innerHTML = "";
}
else{
var r = j.result[0];
if (r.type == 'video') {
send_message("Player.GetItem", {
"properties": ["file", "streamdetails"],
"playerid": r.playerid,
});
}
}
break;
case "Player.GetItem":
//alert(event.data);
var r = j.result.item;
document.getElementById("name").innerHTML = r.label;
document.getElementById("file").innerHTML = r.file;
var v = r.streamdetails.video[0];
document.getElementById("details").innerHTML = v.width + 'x' + v.height + ', ' + v.duration + 's';
break;
default:
//alert(event.data);
}
}
else // notification
{
switch(j.method) {
case "Player.OnPlay":
send_message("Player.GetActivePlayers");
break;
case "Player.OnStop":
document.getElementById("name").innerHTML = "VIDEO PLAYER STOPPED";
document.getElementById("file").innerHTML = "";
document.getElementById("details").innerHTML = "";
break;
default:
//alert(event.data);
}
}
}

function send_message(method, params) {
var msg = {
"jsonrpc": "2.0",
"method": method,
"id": method
};
if (params) {
msg.params = params;
}
ws.send(JSON.stringify(msg));
}
</script>

<div id="name"></div>
<div id="file"></div>
<div id="details"></div>

</body>
</html>
Reply

Logout Mark Read Team Forum Stats Members Help
JSON-RPC websockets example1