content: import React from 'react'
  
  let messageWs = null
  let socketWs = null
  class MessageForm extends React.Component {
  	constructor (props) {
  		super(props)
      this.connect = this.connect.bind(this)
      this.sendMessage = this.sendMessage.bind(this)
      this.disconnect = this.disconnect.bind(this)
  
  		this.state = {
        messageWs: null,
        socketWs: null,
        message: '',
        messages: [],
        sockets: []
      }
  
  	}
  
  	messageChanged (e) {
  		this.setState({message: e.target.value})
  	}
  
    componentDidMount() {
  
    }
  
    componentWillUnmount() {
      this.state.ws.close()
    }
  
    //https://gist.github.com/voluntas/14303cbf0a1a5fb47ac58c2682bfa877
    handleMessage(event) {
      let message = event.data
      this.state.messages.push(message)
      this.setState({
        messages: this.state.messages
      })
    }
  
    handleSockets(event) {
  
      let socketArray = JSON.parse(event.data)
      this.setState({
        sockets: socketArray
      })
  
      console.log(socketArray)
    }
  
    connect() {
      let ws = new WebSocket('ws://localhost:8080/message')
      ws.onmessage = this.handleMessage.bind(this)
      this.setState({messageWs: ws})
      console.log('websocket for message is prepared.')
      this.connectWsSocket()
    }
  
    connectWsSocket() {
      let ws_socket = new WebSocket('ws://localhost:8080/socket')
      ws_socket.onmessage = this.handleSockets.bind(this)
      this.setState({socketWs: ws_socket})
      console.log('websocket for socket table is prepared.')
    }
  
  
    sendMessage() {
      console.log('send message to websocket server. message -> ' + this.state.message)
  
      console.log('send messages array -> ' + this.state.messages)
      this.state.messageWs.send(this.state.message)
    }
  
  
    disconnect() {
      if (this.state.ws != null) {
        this.state.messageWs.close()
      }
      console.log('disconnected')
    }
  
  
  	render() {
  		let rows = this.state.messages
  		return (
  		  <div>
          Connect:
          <button onClick={e => this.connect()}>Connect</button><br />
  		    Message: <br/>
  		    <input value={this.state.message}
  		      onChange={e => this.messageChanged(e)} /><br />
  		    <button onClick={e => this.sendMessage()}>Send </button><br />
          disconnect:
          <button onClick={e => this.disconnect()}>Disconnect </button><br />
          <hr />
  
  				<table>
  					{rows.map((row) => (
  						<tr>
  							<td>{row}</td>
  						</tr>
  					))}
  				</table>
  		  </div>
  		)
  	}
  }
  
  export default MessageForm
  