MineSeeker/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js

import React from 'react';
import GridControl from './grid/grid-control';

class MineSeeker extends React.Component {
    /** after rendering */
    componentDidMount() {
        var websocket = WS.connect("ws://127.0.0.1:8080");

        /** session is an Autobahn JS WAMP session. */
        websocket.on("socket/connect", function (session) {
            console.info("Successfully Connected!");

            session.subscribe("acme/channel", function(uri, payload){
                console.log("Received message", payload.msg);
            });

            // session.call("sample/sum", {"term1": 2, "term2": 5}).then(
            //     function (result) {
            //         console.log("RPC Valid!", result);
            //     },
            //     function (error, desc) {
            //         console.log("RPC Error", error, desc);
            //     }
            // );

            session.publish("acme/channel", {msg: "This is a message!"});

            // session.publish("acme/channel", {msg: "I'm leaving, I will not see the next message"});
            //
            // session.unsubscribe("acme/channel");
            //
            // session.publish("acme/channel", {msg: "I won't see this"});
            //
            // session.subscribe("acme/channel", function (uri, payload) {
            //     console.log("Received message", payload.msg);
            // });
            //
            // session.publish("acme/channel", {msg: "I'm back!"});
        });

        /** error provides us with some insight into the disconnection: error.reason and error.code */
        websocket.on("socket/disconnect", function (error) {
            console.info("Disconnected for " + error.reason + " with code " + error.code);
        });
    }

    render() {
        return (
            <GridControl ref="gridControl"/>
        );
    }
}

export default MineSeeker;