導入：Websocketとは
Socket.IOはWebsocketを用いたライブラリです。
WebsocketとはHTTPのように通信規格の一つで双方向の通信を可能にしました。
これにより従来のHTTPベースでの通信では不可能だったサーバーサイドからクライアントサイドに情報を送ることがWebsocketでは可能になりました。
つまりHTTPではクライアントサイドからのリクエストがあった時しかサーバーサイドからクライアントサイドに情報を送ることができなかったところを
Websocketではサーバーサイドからも必要に応じて情報を送ることができるようになりました。
今回はSocket.IOというライブラリを使ってWebsocket方式の通信を実装します。
※今回のタスクは前回の内容を完了させていることを前提としています。
そちらがまだ終わっていない方はこちらへ
https://avinton.com/en/academy-2/webapp-with-node-express/
アクティビティ
今回のアクティビティは前回作成したReactとExpressのアプリケーションに機能を追加するものです。
1：フロントエンドでのSocketの実装
（1-0）下のアクティビティの内容が全く腑に落ちない場合はまずSocket.IO公式のチュートリアルをやってみましょう。
1-1 Reactのアプリケーションの階層で以下のコマンドを実行します。
|
1 2 |
npm install --save socket.io-client |
1-2 App.js のなかでソケットを初期化しましょう。
|
1 |
const socket = io(apiURL); |
サーバーからの通信を受け入れる準備をします。
|
1 2 |
const socket = io('http://localhost'); socket.on("hello_world", data => console.log(data)) |
2：バックエンドでのSocketの実装
2-1 ExpressアプリケーションにSocket.IOのサーバーサイドモジュールをインストールします。
Expressのアプリの階層で
|
1 2 |
npm install --save socket.io |
を実行します。
2-2 ソケットを初期化する
注：今回のバックエンドアプリケーションはExpressジェネレーターで作成しているのでシンプルなExpressのアプリケーションと若干Socket.IOの使い方が異なります。
ExpressジェネレーターでのSocket.IOの使い方は以下の記事を参考にしてください。
https://stackoverflow.com/a/28325154/10418128
その後、app.jsのなかに以下の行を追加してください。
|
1 2 3 |
setInterval(function(){ io.emit('hello_world', {hello: 'world'}) }, 3000); |
これができたら両方のアプリを起動します。
ブラウザーのコンソールに3秒に一度
{hello: ‘world’}
が表示されれば成功です。
これは’hello_world’というイベント名でバックエンドと接続しています。
.emit()メソッドからは登録されたソケットに対して情報を送信します。
.on()メソッドは決まったイベントのemitからの情報を受け取れるように登録します。
これらの内容については下の二つのリンク先を参照してください。
https://socket.io/docs/client-api/#socket-on-eventName-callback
https://socket.io/docs/server-api/#socket-emit-eventName-%E2%80%A6args-ack
また、setIntervalメソッドを使ってemitを3秒に一回実行しています。
3：サーバーサイドでの定期的なデータの更新
3-1 サーバーから送られるデータの件数を10件に変更しましょう。
3-2 setIntervalメソッド内で3秒に一度, 表示されるデータの開始と終了のインデックスを１増やすようにしましょう。
例：0~10 -> 1~11 -> 2~12のようにインデックスを変化させましょう。
３秒ごとに毎回異なるデータが表示されるようになります。
完成すると以下のようになります。
これが終わったらSocket.IOでの通信でもフィルター機能を使えるようにしてみましょう。
あなたも、Avintonでこのような最先端技術を習得し活用してみませんか？
社員の成長を導きながら、AIやビッグデータなどの最先端技術をプロジェクトに活用していくことが私たちのビジョンです。Avintonの充実した技術研修でスキルアップを図り、あなたのキャリア目標を一緒に達成しませんか？
