Example React WebSocket

Landing.js

import React, {PropTypes} from 'react';
import {Link} from 'react-router';
import {connect} from 'react-redux';
import ws from './WebSocket';
import {setUsername, socketConnectInit, socketOnOpen} from './actions/index';


class Landing extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.connectButton = this.connectButton.bind(this);
    }

    async connectButton() {
        const {dispatch} = this.props;
        let login = document.getElementById("usernameinput").value
        let messageobject = {
            type: "USER_CONNECTED",
            username: login
        }
        
        try {
            let connected = await this.wsConnect()
            if (connected) {
                dispatch(socketOnOpen());
                dispatch(setUsername(login));
                await ws.sendmessage(messageobject);
                this.context.router.push({
                    pathname: '/main'
                });
            }
        } catch (e) {
            console.log("Failed to connect: ", e);
        }
    }

    async wsConnect() {
        return await ws.connect();
    }