Example: Browser-based WebSocket connection

About the example

The following example, websocket-client.html, uses HTML and Javascript to create webpage that you can use to establish a WSS connection and send and receive notification messages.

  • Access to the switch REST API must be enabled on the VRF through which this browser will connect to the switch.

  • Before you can use the HTML page, you must log in to the switch Web UI or REST API from a separate tab in the same web browser session. The browser shares the session cookie between tabs.

  • When the browser page is open, in Server Location, substitute the switch IP address for {IPAddress} in wss://{IPAddress}/rest/v1/notification, then click Connect.

  • Enter the subscription message in Request and click Send.

  • Responses and notifications are shown in Response.

Example screen

Example HTML source

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Web Socket Client Example</title>
    <script type="text/javascript">
        window.onload = function () {
            var conn;
            var log = document.getElementById("log");
            var msg = document.getElementById("msg");

            function appendLog(item) {
                var doScroll = log.scrollTop === log.scrollHeight - log.clientHeight;
                log.appendChild(item);
                if (doScroll) {
                    log.scrollTop = log.scrollHeight - log.clientHeight;
                }
            }

            document.getElementById("connect").onclick = function () {
                var server = document.getElementById("wsURL");
                conn = new WebSocket(server.value);
                if (window["WebSocket"]) {
                    if (conn) {
                        conn.onopen = function (evt) {
                            document.getElementById("disconnect").disabled = false
                            document.getElementById("sendMsg").disabled = false
                            document.getElementById("connect").disabled = true
                            document.getElementById("status").innerHTML = "Connection opened"
                        }
                        conn.onclose = function (evt) {
                            document.getElementById("status").innerHTML = "Connection closed"
                            document.getElementById("connect").disabled = false
                        };
                        conn.onmessage = function (evt) {
                            var messages = evt.data.split('\n');
                            for (var i = 0; i < messages.length; i++) {
                                var item = document.createElement("pre");
                                item.innerText = messages[i];
                                appendLog(item);
                            }
                        }
                    }
                } else {
                    var item = document.createElement("pre");
                    item.innerHTML = "<b>Your browser does not support WebSockets.</b>";
                    appendLog(item);
                }
            };

            document.getElementById("disconnect").onclick = function () {
                conn.close()
                document.getElementById("sendMsg").disabled = true
                document.getElementById("connect").disabled = false
                document.getElementById("disconnect").disabled = true
                document.getElementById("status").innerHTML = "Connection closed"
            };

            document.getElementById("form").onsubmit = function () {
                if (!conn) {
                    return false;
                }
                if (!msg.value) {
                    return false;
                }
                conn.send(msg.value);
                var item = document.createElement("pre");
                item.classList.add("subscribeMsg");
                item.innerHTML = msg.value;
                appendLog(item);
                return false;
            };
        };

    </script>
    <style type="text/css">
        html {
            overflow: hidden;
        }

        body {
            overflow: hidden;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            background: gray;
        }

        #log {
            background: white;
            margin: 0;
            padding: 0.5em 0.5em 0.5em 0.5em;
            top: 1.5em;
            left: 0.5em;
            right: 0.5em;
            bottom: 3em;
            overflow: auto;
            position: absolute;
            height: 530px;
        }

        #form {
            padding: 0 0.5em 0 0.5em;
            margin: 0;
            position: absolute;
            bottom: 3em;
            top: 5em;
            left: 8px;
            width: 100%;
            overflow: hidden;
        }

        #serverLocation {
            padding-top: 0.3em;
        }

        #requestSection {
            height: 38px;
        }

        #responseMsgSection {
            height: 570px;
            position: relative;
        }
    </style>
</head>
<body>
<fieldset id="serverLocation">
    <legend>Server Location</legend>
    <div>
        <input type="button" id="connect" value="Connect"/>
        <input type="button" id="disconnect" value="Disconnect" disabled/>
        <input type="text" id="wsURL" value="wss://{IPAddress}/rest/v1/notification" size="64">
        <span id="status"></span>
    </div>
</fieldset>
<fieldset id="requestSection">
    <legend>Request</legend>
    <form id="form">
        <input id="sendMsg" type="submit" value="Send" ; disabled/>
        <input type="text" id="msg" size="80"/>
    </form>
</fieldset>
<fieldset id="responseMsgSection">
    <legend>Response</legend>
    <div id="log"></div>
</fieldset>
</body>
</html>