milkcocoa

IoTのバックエンドサービスとして使われているリアルタイム通信サポートのバックエンドサービス https://mlkcca.com/

今回はチャットの裏側に使います。

公式チュートリアルをいじってReactでチャットを作ってみた

まずは完成品

URL: https://private-chipmunk-54046.netlify.com/

(いつまで稼働させてるかはわからないです)

リアルタイムなチャットができます。

参考にしたチュートリアル

URL: https://facebook.github.io/react/docs/tutorial-ja-JP.html

このチュートリアルをやるとマークダウン対応のコメント欄みたいなものをつくれます。

メインのソースコードはGitHub上のexample.jsです。

https://github.com/reactjs/react-tutorial/blob/master/public/scripts/example.js

書いたソースコード

先ほどのexample.jsをもとに書き換えてます。

app.js

const milkcocoa = new MilkCocoa('your-app-id.mlkcca.com');
const ds = milkcocoa.dataStore('react-chat');

//CommentBox -> CommentList -> Comment
class Comment extends React.Component {
    constructor(props) {
        super(props);
    };

    rawMarkup(){
        let md = new Remarkable();
        let rawMarkup = md.render(this.props.children.toString());
        return { __html: rawMarkup };
    };

    render() {
        let md = new Remarkable();
        return (
            <div className="comment">
                <h2 className="commentAuthor">{this.props.author}</h2>
                <span dangerouslySetInnerHTML={this.rawMarkup()} />
            </div>
        );
    };
};

//CommentBox->CommentList
class CommentList extends React.Component {
    render() {
        let commentNodes = this.props.data.map( (item) => {
            let comment = item.value;
            return (
                <Comment author={comment.author} key={item.id}>
                    {comment.text}
                </Comment>
            );
        });

        return (
            <div className="commentList">{commentNodes}</div>
        );
    };
};

//CommentBox->CommentForm
class CommentForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {author: '', text: ''};
    };
    
    handleAuthorChange (e) {
        this.setState({author: e.target.value});
    };
    
    handleTextChange (e) {
        this.setState({text: e.target.value});
    };
    
    handleSubmit (e) {
        e.preventDefault();
        let author = this.state.author.trim();
        let text = this.state.text.trim();
        if (!text || !author) return;
        this.props.onCommentSubmit({author: author, text: text});
        // this.setState({author: '', text: ''});
        this.setState({text: ''}); //名前は残す
    };

    render() {
        return (
            <form className="commentForm" onSubmit={this.handleSubmit.bind(this)}>
                <input
                    type="text"
                    placeholder="名前を入力してね。"
                    value={this.state.author}
                    onChange={this.handleAuthorChange.bind(this)}
                />
                <input
                    type="text"
                    placeholder="マークダウン使えるよ"
                    value={this.state.text}
                    onChange={this.handleTextChange.bind(this)}
                />
                <input type="submit" value="Post" />
            </form>
        );
    };
};

//CommentBox
class CommentBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {data: []};
    };
    
    componentDidMount () {
        this.loadCommentsFromServer();
        ds.on('push', this.loadCommentsFromServer.bind(this));
    };

    loadCommentsFromServer () {
        let history = ds.history();
        history.on('data', (data) => {
            this.setState({data: data});
        });
        history.run();
    };

    handleCommentSubmit (comment) {
        ds.push(comment);
    };
    
    render() {
        return (
            <div className="commentBox">
                <CommentForm onCommentSubmit={this.handleCommentSubmit} />
                <CommentList data={this.state.data} />
            </div>
        );
    };
};

class App extends React.Component {
    render(){
        return(
            <div className="App">
                <div className="App-header">
                    <img src="../logo.svg" className="App-logo" alt="logo" />
                    <h1>Milkcocoa+Reactでリアルタイムチャット</h1>
                </div>
                <CommentBox />
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('content')
);

コメントないけど自分用メモなつもりなのであしからず。

ES5 -> ES2015書き換え

参考にしたチュートリアルはES5ベースの書き方になっているのでES2015な書き方に変更します。

これらを参考にしてReact.createClass()をReact.Componentに書き換えました。

主にこの辺りで若干手こずりました。

getInitialState()が使えないのでconstructorで初期化

getInitialState: function() {
    return {author: '', text: ''};
  },

↓ stateの初期化の仕方が変わる

    constructor(props) {
        super(props);
        this.state = {author: '', text: ''};
    };

thisのオートバインディングがなくなるので自分でバインドする

<form className="commentForm" onSubmit={this.handleSubmit}>

↓ ここもバインドしてあげる

<form className="commentForm" onSubmit={this.handleSubmit.bind(this)}>

みたいな書き方に変更します。

Milkcocoa的な部分

CommentBoxのコンポーネント内のメソッドで処理してます。

handleCommentSubmit内でデータ保存 / pushメソッド

MilkcocoaのpushメソッドをhandleCommentSubmit()で行ってます。

    handleCommentSubmit (comment) {
        ds.push(comment);
    };

pushメソッドが実行されると接続してるクライアントにpushイベントが発火されます。

loadCommentsFromsSever内でデータ取得 / historyメソッド

    loadCommentsFromServer () {
        let history = ds.history();
        history.on('data', (data) => {
            this.setState({data: data});
        });
        history.run();
    };

historyメソッドの初期呼び出しとpushイベントの監視 / onメソッド

今日のハンズオン資料にあるようにcomponentDidMountはコンポーネントがレンダリングされた後に一度だけ呼ばれます。

なのでそのタイミングでhistoryを発火させる(初期ロード)のと、onメソッドでpushイベントを監視を開始します。

これで他の人がコメントするたびにhistoryが実行されてデータが更新されてリアルタイムチャットになります。

componentDidMount () {
        this.loadCommentsFromServer();
        ds.on('push', this.loadCommentsFromServer.bind(this));
    };

雑感

ハンズオン中につくったので雑かもしれないですが取りあえずまとめてみました。

久しぶりにReact触ったけど、バージョンアップによって書き方が変わっててどれを参考にするのがいいのかってちゃんと動きを追ってないと大変そうだなぁという印象でした苦笑

でもとりあえずリハビリな感じになって楽しかった！