Express.jsとVue.jsを利用して簡易チャット機能をつくってみよう本文書はSocket.ioに記述されているget-startedを参照して作成していますが、クライアント側で行う処理はjqueryではなくvue.jsを利用して行なっています。Socket.ioの設定がメインになりますが、メッセージの入力や表示に関する箇所はvue.jsを利用しているのでSocket.ioとvue.jsとの組み合わせも理解することができます。initコマンドでpackage.jsonファイルを作成します。initの実行フォルダには、package.jsonファイルが作成されます。expressExpress.jsの設定Expressサーバの設定を行います。Worldを返します。*:3000');});nodeコマンドでサーバを起動します。Worldが表示されればサーバの初期設定は完了です。Worldの文字列を返していましたが、index.htmlファイルの内容を返すようにルーティングの変更を行います。htmlファイルの内容を返す場合はsendFileメソッドを利用します。__dirnameは現在更新しているindex.jsファイルが保存されているパスを取得しているので、index.htmlはindex.jsと同じフォルダに作成する必要があります。'/index.html');});index.htmlファイルの内容は下記の通りです。index.jsを実行してください。ブラウザから”/”にアクセスすると以下の画面が表示されます。installコマンドでsocket.ioのインストールを行います。socket.ioSocket.ioの基本動作確認インストールが完了したら、index.jsにsocket.ioに関する行を追加します。読み込んだsocket.ioとhttpサーバオブジェクトを使ってsocket.ioのインスタンスを作成しています。connectedがコンソールログに表示されます。*:3000');});クライアント側になるindex.htmlファイルには以下のsocket.ioのクライアントスクリプトタグを追加します。io();</script>io()は引数にURLをとります。URLを入れない場合は、window.locationからURLを取得しています。本環境ではio(‘http://localhost:3000’)と設定しても動作します。connectedが表示されます。簡易チャットを構築するためには、Socket.ioを使ってリアルタイムにサーバ、クライアント間でデータの送受信を行うことを確認する必要があります。クライアントからサーバにメッセージを送ります。以後サーバとクライアントという言葉が出てきますが、サーバはExpress.jsサーバのことで設定はすべてindex.jsで行います。クライアントはブラウザのことを表し、すべての設定はindex.htmlの中に記述していきます。リアルタイムとはブラウザでメッセージを送信するとページのリロードを行うことなく、入力したメッセージがすぐにページに反映されることを意味しています。input要素に入力したデータをサーバに送るためには、input要素に入力したデータを取得する必要があります。vue.jsを使って入力データを取得します。今回はメッセージを入力する箇所とサーバから送信されてくる各クライアントのメッセージを表示する箇所にvue.jsを利用します。簡単にvue.jsが使えるvue.jsのcdnを利用します。入力したメッセージをvue.jsで取得するためにinput要素にv-modelでデータバインディングを行います。入力した値はtextInputプロパティを通してvue.js側で取得することができます。v-model="textInput"/>button要素にclickイベントを設定します。button要素をクリックするとsendMessageメソッドが実行されます。sendMessageメソッドはvue.jsで準備します。v-on:click="sendMessage">Send</button>上記の設定を踏まえてvue.jsの設定を行います。}});入力したメッセージはSendボタンをクリックするとvue.jsのsendMessageが実行され、textInputプロパティのデータ(=入力したメッッセージ)がsocket.emitメソッドを通して、サーバに送信されます。messageを設定しています。次に送信したメッセージをサーバ側(index.js)で受信する設定を行います。messageを設定し、メッセージを受け取ったらコンソールログにメッセージを表示させます。});});入力フォームにメッセージを入力して、sendボタンをクリックするとサーバ側にそのメッセージが表示されます。Socket.ioを使ったメッセージサーバからクライアントへのメッセージ送信クライアントからサーバへメッセージを送信することができたので、次はサーバからクライアントにメッセージの送信を行います。ここでのクライアントはサーバに接続しているブラウザすべてを表しています。メッセージの送信したブラウザだけでなくメッセージを開かずただサーバに接続しているブラウザも含みます。先ほどのサーバの受信設定では受け取ったメッセージはconsole.logを使って表示していましたが、今度は受け取ったメッセージをemitメソッドでそのままクライアントに送信します。});});クライアント側での受信設定クライアント側ではサーバから送られてくるメッセージを受信する必要があります。メッセージの受信は、サーバと同様にsocket.onメソッドで行うことができます。console.log(msg)})メッセージの送信サーバから戻ってきたメッセージがコンソールに表示vue.jsを使ってメッセージをリスト化クライアントが送信したメッセージを画面上にリスト化するためにvue.jsを利用します。messagesプロパティを新たに追加し、メッセージをこのmessagesプロパティの中に追加していきます。追加したメッセージをブラウザ上に表示するためにvue.jsのv-forティレクティブを利用します。messagesは配列でメッセージが保持されているので、forによりメッセージ1つ1つを取り出して表示しています。}}</li></ul>受け取ったメッセージをmessagesプロパティに追加するためにライフサイクルフックのmountedを利用します。}});以上で設定は完了で複数のブラウザを起動してメッセージを入力してみましょう。それぞれのブラウザで入力したメッセージがどちらのブラウザにもリスト化されて表示されます。vue.jsを使ってメッセージをリスト。