khle

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

khle

var createRandomNickname = len => {
    var text = '';
    var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    for(var i = 0; i < len; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return text;
};

ReactDOM.render(<Main nickname={createRandomNickname(6)}/>, document.getElementById('container'));

khle

var Main = React.createClass({
    getInitialState() {
        return {
            users: [],
            messages: []
        }    
    },
    componentDidMount() {        
        //will show later                
    },

khle

var Main = React.createClass({
    getInitialState() {
        //already shown    
    },
    componentDidMount() {        
        var socket = io();
        
        var props = this.props;
        var users = this.state.users;
        var messages = this.state.messages;

khle

var io = require('socket.io')(server);
var sourceConnect = Rx.Observable.create(function(observer) {
    
    io.on('connection', function(socket) {
        socket.emit('my socketId', {'socketId': socket.id, 'connectTime': Date.now()});
        
        socket.on('client connect', function(data) {
            observer.onNext({'socket': socket, 'data': data, 'event': 'client connect'});       
        });                
    });    

khle

var sourceDisconnect = Rx.Observable.create(function(observer) {
    io.on('connection', function(socket) {                
        socket.on('disconnect', function(data) {
            observer.onNext({'socketId': socket.id, 'event': 'client disconnect'});       
        });
    });
});

var observerDisconnect = sourceDisconnect
.subscribe(function(obj) { 

khle

app.post('/message', function(req, res) {
    io.emit('message', req.body);
});

khle

var AppBar = React.createClass({
    render() {        
        return (
            <div className="navbar-fixed">
                <nav>
                    <div className="nav-wrapper">
                      <a href="#" className="brand-logo center">RxJS ReactJS SocketIO MaterializeCSS</a>
                        <ul id="nav-mobile" className="left hide-on-med-and-down">
                            <li><a href="#">About</a></li>                            
                      </ul>

khle

var PresencePane = React.createClass({
    render() {    
        return (        
            <div>
                <h4>Active Users</h4>
                <table className="striped">
                    <thead>
                        <tr>
                            <th data-field="id">Nickname</th>
                            <th data-field="name">Time joined</th>              

khle

var ChatPane = React.createClass({    
    componentDidMount() {        
        var button = document.getElementById('sendBtn');
        var textField = document.getElementById('message-input');
        
        var clickStream = Rx.Observable.fromEvent(button, 'click').map(e => true);        
        var enterKeyPressedStream = Rx.Observable.fromEvent(textField, 'keyup').filter(e => e.keyCode == 13);
        var textEnteredStream = Rx.Observable.fromEvent(textField, 'keyup').map(e => e.target.value);
        var sendMessageStream = Rx.Observable.merge(clickStream, enterKeyPressedStream);