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.
|
|
|
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>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|