Tutorial: Simple chat

This tutorial will guide you through creation of the basic chat pipeline. It assumes that you have either registered at cloud version of Exynize or deployed your own copy of the platform, and finished the "Hello world" tutorial.

Step 1: POST body source

First, we'll create a source component that will dispatch a body from any incoming POST request.
Here's how the code will look:

const subj = new Rx.Subject();

export const routeHandler = (res) => subj.onNext(res.body);

export default (obs) => {
    subj.subscribe(obs);
};

The source is simple - all it does is waits for incoming HTTP requests, gets body from them and pipes it to output. Make sure to hit the "Save" button to save your new source component.

Step 2: Chat renderer

Finally, we need to create a render component that will display the chat history and allow to send new messages. To simplify things we'll rely on superagent library for request handling. Here's how the code will look:

import request from 'superagent';

export default () => React.createClass({
    send() {
        const user = this.refs.user.value;
        const msg = this.refs.msg.value;
        request
            .post('http://alpha.exynize.com/api/pipes/YOUR_USERNAME/YOUR_PIPELINE_NAME/input')
            .send({user, msg})
            .end((err, res) => {
                console.log(err, res);
                this.refs.msg.value = '';
            });
    },
    
    render() {
        return (
            <div className="container">
                <div className="row">
                    <div className="col-xs-12">
                        <div className="well">
                        {this.props.data.map((data, index) => (
                            <div className="row" key={"entry_" + index}>
                                <div className="col-xs-8 col-xs-offset-1">
                                    <b>[{data.user}]</b> <i>said:</i> {data.msg}
                                </div>
                            </div>
                        ))}
                        </div>

                        {/*chat input*/}
                        <div className="row">
                            <div className="col-xs-3">
                                <input type="text" className="form-control" ref="user" placeholder="Username..." />
                            </div>
                            <div className="col-xs-6">
                                <input type="text" className="form-control" ref="msg" placeholder="Message..." />
                            </div>
                            <div className="col-xs-3">
                                <button className="btn btn-default" onClick={this.send}>Send</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});

This component will render the incoming data above line-by-line and input form for sending new messages below. Please note, since currently Exynize does not allow to pass config options to render components, thus we have hardcoded the input URI (don't forget to replace it to match your pipeline!).

Don't forget to hit the "Save" button to save your new render component.

Step 3: Pipeline assembly

Now that all the components have been created, we need to assemble them into a pipeline.
No special steps are required during assembly - simply add our new source and render component while leaving processors empty.

Step 4: Running and viewing results

Now that you've assembled and saved your new pipeline, you can navigate to "Browser pipelines" tab to see it there.
To start it, simply press "Start" button next to it.
Then navigate to the rendered result by clicking "Web" button next to pipeline name and start sending messages away!
If you make it public, you can share result URL with other people so they can join you too.