index.html

<!-- the message's input -->
<input id="input" type="text" />

<!-- when clicked then a websocket event will be sent to the server, at this example we registered the 'chat' -->
<button id="sendBtn" disabled>Send</button>

<!-- the messages will be shown here -->
<pre id="output"></pre>
<!-- import the iris client-side library for browser from a CDN or locally.
     However, `neffos.(min.)js` is a NPM package too so alternatively,
     you can use it as dependency on your package.json and all nodejs-npm tooling become available:
     see the "browserify" example for more-->

<!-- Usually you should prefer neffos.js or neffos.min.js (es6, latest) instead of neffos-es5,
     see the browserify example for more.-->
<script src="//cdn.jsdelivr.net/npm/neffos.js@latest/dist/neffos-es5.js"></script>

<script>
    // `neffos` global variable is available now.
    var scheme = document.location.protocol == "https:" ? "wss" : "ws";
    var port = document.location.port ? ":" + document.location.port : "";
    var wsURL = scheme + "://" + document.location.hostname + port + "/echo";

    var outputTxt = document.getElementById("output");
    function addMessage(msg) {
        outputTxt.innerHTML += msg + "\n";
    }

    function handleError(reason) {
        console.log(reason);
        window.alert(reason);
    }

    function handleNamespaceConnectedConn(nsConn) {
        let inputTxt = document.getElementById("input");
        let sendBtn = document.getElementById("sendBtn");

        sendBtn.disabled = false;
        sendBtn.onclick = function () {
            const input = inputTxt.value;
            inputTxt.value = "";
            nsConn.emit("chat", input);
            addMessage("Me: " + input);
        };
    }

    async function runExample() {
        var events = new Object();
        events._OnNamespaceConnected = function (nsConn, msg) {
            if (nsConn.conn.wasReconnected()) {
                addMessage("re-connected after " + nsConn.conn.reconnectTries.toString() + " trie(s)");
            }

            addMessage("connected to namespace: " + msg.Namespace);
            handleNamespaceConnectedConn(nsConn);
        }

        events._OnNamespaceDisconnect = function (nsConn, msg) {
            addMessage("disconnected from namespace: " + msg.Namespace);
        }

        events.chat = function (nsConn, msg) { // "chat" event.
            addMessage(msg.Body);
        }

        /* OR regiter those events as:
            neffos.dial(wsURL, {default: {
                chat: function (nsConn, msg) { [...] }
            }});
        */

        try {
            // You can omit the "default" namespace and simply define only Events,
            // the namespace will be an empty string"",
            // however if you decide to make any changes on
            // this example make sure the changes are reflecting inside the ../server.go file as well.
            //
            // At "wsURL" you can put the relative URL if the client and server
            // hosted in the same address, e.g. "/echo".
            const conn = await neffos.dial(wsURL, { default: events }, {
                // if > 0 then on network failures it tries to reconnect every 5 seconds, defaults to 0 (disabled).
                reconnect: 5000,
                // custom headers:
                // headers: {
                //    'X-Username': 'kataras',
                // }
            });

            // You can either wait to conenct or just conn.connect("connect")
            // and put the `handleNamespaceConnectedConn` inside `_OnNamespaceConnected` callback instead.
            // const nsConn = await conn.connect("default");
            // handleNamespaceConnectedConn(nsConn);
            conn.connect("default");

        } catch (err) {
            handleError(err);
        }
    }

    runExample();

    // If "await" and "async" are available, use them instead^, all modern browsers support those,
    // so all of the examples will be written using async/await method instead of promise then/catch callbacks.
    // A usage example of promise then/catch follows:
    // neffos.dial(wsURL, {
    //     default: { // "default" namespace.
    //         _OnNamespaceConnected: function (ns, msg) {
    //             addMessage("connected to namespace: " + msg.Namespace);
    //         },
    //         _OnNamespaceDisconnect: function (ns, msg) {
    //             addMessage("disconnected from namespace: " + msg.Namespace);
    //         },
    //         chat: function (ns, msg) { // "chat" event.
    //             addMessage(msg.Body);
    //         }
    //     }
    // }).then(function (conn) {
    //     conn.connect("default").then(handleNamespaceConnectedConn).catch(handleError);
    // }).catch(handleError);
</script>