index.js

import React from 'react';
import ReactDOM from 'react-dom';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import RaisedButton from 'material-ui/RaisedButton';

export default class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            ws: null,
            output: ''
        };
    }
    _onOpen(event) {
        console.log("ws-opend");
    }
    _onMessage(msg) {
        console.log(msg);
        this.setState({
            output: msg.data
        });
    }
    _onClose(event) {
        console.log("ws-closed");
    }
    _onError(event) {
        console.log("ws-error");
    }
    sendMessage() {
        this.state.ws.send("spam");
    }
    componentDidMount() {
        var ws = new WebSocket("wss://echo.websocket.org");
        ws.onopen = this._onOpen.bind(this);
        ws.onmessage = this._onMessage.bind(this);
        ws.onclose = this._onClose.bind(this);
        ws.onerror = this._onError.bind(this);
        this.setState({ws: ws});
    }
    componentWillUnmount() {
        this.state.ws.close();
    }
    render() {
        return (
            <div>
                <h1>Hello, world</h1>
                <MuiThemeProvider>
                    <RaisedButton
                        label="Default"
                        onClick={this.sendMessage.bind(this)}
                    />
                </MuiThemeProvider>
                <div>{this.state.output}</div>
            </div>
        );
    }
}


ReactDOM.render(
    <Index />,
    document.getElementById('content')
);