VMware {code} Community
VMwareUser216
Contributor
Contributor

VMware HTML Console SDK

 

Hello.  We are trying to create a custom solution to launch VMs for our own homegrown Hands on Labs project.  We would like to display a page with available labs and that once clicked on, will launch a VM inside a browser window.

 

We have got things working with our old approach but we have to utilize ActiveX with a RDP client on the webpage but this is of course limited to just the Internet Explorer browser.  We are trying to use the new HTML Console SDK to open this up to multiple browsers.

 

We have been trying to create a new solution using the VMware HTML Console SDK with this documentation: https://www.vmware.com/support/developer/html-console/html-console-sdk-100-programmer-guide.pdf

 

Current Environment:

VMware vCloud Director: 5.5.5.3153714

 

We are trying to construct the WebSocket URL so we can run the wmks.Connect method.  Can anyone explain this part of the documentation from page 6:  “<ws | wss> :// <host:port>/ <path> /? <authentication info>”    Where do the parts come from to build this URL?  Our main issue right now is to first get the connection setup. 

 

If you have any further insight into how this needs to be setup at the most basic level, or have any further documentation/examples that can help us out, it would be greatly appreciated.

Tags (3)
28 Replies
kowap
Contributor
Contributor

I also encountered this problem. You have already decided it?

Reply
0 Kudos
VMwareUser216
Contributor
Contributor

Unfortunately, I am still having trouble with this.  I have not been able to find any further examples online or anymore SDK information.  I have been looking into getting the actual SDK Customer Support from VMware since it seems I am hitting a wall with all that I currently have.

I don't know how to fully construct the WebSocket URL or where all the pieces needed for that come from. 

Reply
0 Kudos
juanfont
Contributor
Contributor

Hi guys,

you have to query POST /vApp/{id}/screen/action/acquireMksTicket vCloud API operation. That will answer you a MksTicket like this:

<MksTicket xmlns="http://www.vmware.com/vcloud/v1.5">

    <Host> xs:string </Host>

    <Vmx> xs:string </Vmx>

    <Ticket> xs:string </Ticket>

    <Port> xs:int </Port>

</MksTicket>

The URL is in the form:

wss://host/port;ticket

Use Vmx content when creating the wmks var in js:

var wmks = WMKS.createWMKS("wmksContainer",

{

enableUint8Utf8: true,

VCDProxyHandshakeVmxPath: "VMX_GOES_HERE",

});

Hope it helps.

anaccs
Contributor
Contributor

Hello, after some research we have found the following about the url:

(wss|ws)://host:port/console/authd?vmId=vm-number&vmName=name&host=hostwithoutport&sessionTicket=sessionticket&thumbprint=thumbprint

So everything in red you have to change, if you choose wss the port is 7343 and ws 7341 (I'm not 100% sure I always use wss).


How to get the sessionTicket well with Java using Yavijava GitHub - yavijava/yavijava: Yet Another vijava. A fork of vijava http://sourceforge.net/p/vijava/


ServiceInstance si = new ServiceInstance(new URL(host), user, password, true);

      si.getServerConnection();

     

      String ticket =si.getSessionManager().acquireCloneTicket();

        

      System.out.println("ticket=" + ticket);

      Thread.sleep(30*60*1000);

     

      si.getServerConnection().logout();

OR

Here there is a Pearl code

How to generate a pre-authenticated HTML5 VM console link in vSphere 5.5 that works on all OSes! | v...

And if you don't have the thumbprint it is the last part of the ticket --tp-THUMBPRINT

I hope this helps.

Greetings!

juanfont
Contributor
Contributor

If you are using Python and libcloud to access vCloud Director 5.5, I've recently added support for MksAcquireTicket in the vCloud driver:

Added method to access the console of a running VM. · apache/libcloud@da6fac8 · GitHub

Reply
0 Kudos
VMwareUser216
Contributor
Contributor

Thank you everyone for the continued help with this!

I have a much better understanding of what is needed to build the WebSocket now.

I am having some issues now and I think it might be with the version of JQuery that I am using.

Per the SDK Documentation here: https://www.vmware.com/support/developer/html-console/html-console-sdk-100-programmer-guide.pdf

I am using version 1.8.3 of JQuery and version 1.8.16 of JQuery UI.

I am getting these errors now (In the 'wmks.js' file):

Capture3.GIF

This line is bringing back NULLs:

Capture.GIF

My 'Immediate Window' shows them as NULL, which is blowing up the rest of the code:

Capture2.GIF

I am calling the 'createWMKS' function on my .aspx page like this:

Capture4.GIF

I tried the most recent version of JQuery but that didn't help.  Any notes on this issue would be greatly appreciated.

Thanks again.

Reply
0 Kudos
anaccs
Contributor
Contributor

Hello,

Yes, I had the same problem. First I'm using the latest jquey js without problem. The problem here is that the example is horrible:

<link rel="stylesheet" type="text/css" href="wmks-all.css" />

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="jquery-ui.1.8.16.min.js"></script>

<script type="text/javascript" src="wmks.js" type="text/javascript"></script>

<script>

var wmks = WMKS.createWMKS("wmksContainer",{})

.register(WMKS.CONST.Events.CONNECTION_STATE_CHANGE, function(event,data){

if(data.state == cons.ConnectionState.CONNECTED)

{

console.log("connection state change : connected");

}

});

wmks.connect(“ws://127.0.0.1:8080”);

</script >

<div id=”wmksContainer” style=”position:absolute;width:100%;height:100%”></div>

WRONG!!!!!!!

The core is trying to create the canvas into the <div id=”wmksContainer” style=”position:absolute;width:100%;height:100%”></div> but when the script is being processed this div hasn't been created yet so...

you have to move the div before  the script like this:


<link rel="stylesheet" type="text/css" href="wmks-all.css" />

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="jquery-ui.1.8.16.min.js"></script>

<script type="text/javascript" src="wmks.js" type="text/javascript"></script>

<div id=”wmksContainer” style=”position:absolute;width:100%;height:100%”></div>

<script>

var wmks = WMKS.createWMKS("wmksContainer",{})

.register(WMKS.CONST.Events.CONNECTION_STATE_CHANGE, function(event,data){

if(data.state == cons.ConnectionState.CONNECTED)

{

console.log("connection state change : connected");

}

});

wmks.connect(“ws://127.0.0.1:8080”);

</script >

GOOOD!!!!

Now you are going to have another error with cons "if(data.state == cons.ConnectionState.CONNECTED)" cons doesn't exist.... great... so you can erase all the if or you can change cons.ConnectionState.CONNECTED  to WMKS.CONST.ConnectionState.CONNECTED

I hope this helps!!!

Good luck!!!

VMwareUser216
Contributor
Contributor

Thank you so much for the reply!  This was the issue I was having.  Glad to see I wasn't alone in thinking that the documentation is lacking...

I'll keep this post open and running while I continue to work on this project.

Reply
0 Kudos
juanfont
Contributor
Contributor

Yup, documentation is a little bit scarce...

Right now my HTML template code looks like this (the {{ variables }} are being filled by the web framework I'm using).

                <link rel="stylesheet" type="text/css" href="https://communities.vmware.com/static/css/wmks-all.css" />

                <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

                <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script>

                <script type="text/javascript" src="/static/js/wmks.js" type="text/javascript"></script>

                <a href="javascript:void(wmks.sendKeyCodes([17,18,46]))">send Ctrl+Alt+Del</a>

                //

                <a onClick="goFullScreen()" href="#">go full screen</a>

                //

                <a href="javascript:void(disconnect())">disconnect</a>

                //

                <a href="javascript:void(wkms.showKeyboard())">show keyboard</a>

                //

                <a href="javascript:void(wkms.hideKeyboard())">hide keyboard</a>

                <div id="wmksContainer" style="position:absolute; width:800px; height:600px;"/>

                <script>

                    function goFullScreen() {

                        wmks.enterFullScreen();

                        wmks.setRemoteScreenSize(screen.height, screen.height);

                        wmks.updateScreen();

                    }

                    function disconnect() {

                        wmks.disconnect();

                        wmks.destroy();

                    }

                </script>

                <script>

                    var wmks = WMKS.createWMKS("wmksContainer",

                            {

                                enableUint8Utf8: true,

                                {#                                changeResolution: false,#}

                                {#                                enableVVC: false,#}

                                VCDProxyHandshakeVmxPath: "{{ vmx }}",

                            });

                    console.log(wmks.getConnectionState());

                    wmks.register(WMKS.CONST.Events.CONNECTION_STATE_CHANGE,

                            function(event,data){

                                if(data.state == WMKS.CONST.ConnectionState.CONNECTED){

                                    console.log("connection state change : connected");

                                }

                            }

                    );

                    wmks.register(WMKS.CONST.Events.ERROR,

                            function(event,data){

                                console.log("PLAF");

                            }

                    );

                    wmks.connect("{{ vmware_link }}");

                    console.log(wmks.getConnectionState());

                    window.onbeforeunload = function(){

                        wmks.disconnect();

                    };

                </script >

It's working more or less OK, although Windows is not changing it's resolution when going full screen. Also, the mobile devices are not showing the keyboard when pressing the link...

Cheers.

Reply
0 Kudos
adilshabbir1
Contributor
Contributor

wmks.connect (link ), could anyone please let me know how should i construct link for VM on host (which is not managed by vCenter).

Reply
0 Kudos
vittoriop77
Contributor
Contributor

Hello,

I'm trying to use your sample to connect to the vCenter console, do you use ws://127.0.0.1:8080 or a vcenter link ?

Are you using vSphere 5.x or 6.x ?

Thanks

Vittorio

Reply
0 Kudos
vittoriop77
Contributor
Contributor

I'm trying to use something like this but doesn't work:

wss://vcenter.vc.local:9443/vsphere-client/webconsole.html?vmId=vm-1233&vmName=MYSERVER&serverGuid=19513155-7a26-4ff1-89cd-27

e2d6249bc5&host=vcenter.vc.local&sessionTicket=cst-VCT-522bb7ec-d037-e023-6183-8592aae67679--tp-62-20-25-DC-E8-29-82-77-25-E0-87-23

-45-70-C2-71-A8-F8-ED-9F&thumbprint=5A:AB:D4:75:29:E8:D5:94:09:8F:D2:91:CF:DC:AB:C0:69:03:37:42

Reply
0 Kudos
VMwareUser216
Contributor
Contributor

I have created a WebSocket URL but I keep getting this error message when I try feeding it into the wmks.connect() method:

WebSocket Error: Network Error 12029, A connection with the server could not be established

I have created this WebSocket URL:

wss://srv-sdesx0.onbase.net:7343/console/authd?vmId=vm-4211&vmName=IS-SPLAB0&host=https://srv-sdesx0.onbase.net&sessionTicket=527a6c6a-547d-e72b-7c8b-2f0eda6354f0&thumbprint=0D:EF:0A...

Does that look correct to you guys?  Am I missing something?

Reply
0 Kudos
vittoriop77
Contributor
Contributor

The wss URL was wrong, you just need to use ESX host/port and a WebMKS Ticket

Example

wss://192.168.8.121:443/ticket/63de9452ffafa5f7

More details on my blog Vittorio Pavesi: vSphere 6 HTML Console

Reply
0 Kudos
VMwareUser216
Contributor
Contributor

Hello, and thanks for replying.

I created this WebSocket URL here: wss://srv-sdesx0.onbase.net:443/ticket/af00f07ec71267f2

I am now getting this error message: WebSocket Error: Network Error 12045, The certificate authority is invalid or incorrect

Any ideas what I am missing now?

Reply
0 Kudos
vittoriop77
Contributor
Contributor

Try to connect from your browser to https://srv-sdesx0.onbase.net:443 and accept certificate, then try again.


If it doesn't work, try to install the vCenter certificate in the web server providing the HTML pages

Reply
0 Kudos
jessehuvmw
Enthusiast
Enthusiast

This works perfect. In vSphere 6.0 , the url is like "wss://vcenter_server_ip:9443/vsphere-client/webconsole/authd?..."

Cheers, Jesse Hu
Reply
0 Kudos
jessehuvmw
Enthusiast
Enthusiast

I have verified this solution. It works great.

Cheers, Jesse Hu
Reply
0 Kudos
leixyadf
Contributor
Contributor

I use the link like "wss://vcenter_server_ip:9443/vsphere-client/webconsole/authd?..." in vsphere 6.0,,but it doesn't work. The link that "wss://vcenter_server_ip:9443/vsphere-client/webconsole.html?.." is right?

Reply
0 Kudos