You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.5 KiB
63 lines
1.5 KiB
import React from 'react'; |
|
import io from 'socket.io-client'; |
|
|
|
export default class App extends React.Component { |
|
constructor(props) { |
|
super(props); |
|
|
|
this.state = { |
|
socket: io.connect() |
|
} |
|
} |
|
|
|
componentDidMount() { |
|
this.connect(); |
|
|
|
} |
|
|
|
componentWillMount() { |
|
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); }); |
|
} |
|
|
|
componentWillUnmount() { |
|
this.setState({socket: this.state.socket.removeAllListeners()}); |
|
} |
|
|
|
connect() { |
|
let socket = this.state.socket; |
|
|
|
socket.on('connect', () => { |
|
console.log('Connected!'); |
|
}); |
|
} |
|
|
|
sendOn() { |
|
this.state.socket.emit('update', '1'); |
|
console.log('On sent.'); |
|
} |
|
|
|
sendOff() { |
|
this.state.socket.emit('update', '0'); |
|
console.log('Off sent.'); |
|
} |
|
|
|
render() { |
|
return ( |
|
<div className="ui text container"> |
|
<div className="ui basic center aligned segment"> |
|
<img className="ui centered image" src="logo.png" /> |
|
<h3 className="ui header">Remote Control Lightswitch</h3> |
|
|
|
<div className="ui compact raised segments"> |
|
<div className="ui segment"> |
|
<i onClick={() => this.sendOn()} className="bordered inverted yellow idea huge icon"></i> |
|
</div> |
|
<div className="ui segment"> |
|
<i onClick={() => this.sendOff()} className="bordered inverted disabled idea huge icon"></i> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
); |
|
} |
|
}
|
|
|