• 日本語
    • English (英語)
Avinton JapanAvinton JapanAvinton JapanAvinton Japan
  • サービス
    • Avinton Data Platform
    • エッジAIカメラ
    • AIサービス開発
    • AI画像解析 – 無償PoC
  • 最新情報
  • アカデミー
  • 採用情報
    • Avintonで働く魅力
    • 求人
    • よくある質問
  • 企業情報
    • 会社概要
    • 代表からご挨拶
    • CSR(企業の社会的責任)
  • お問い合わせ

NodeJSでWebアプリケーション開発 – Socket.IO編

  • Python3.6 と OpenCV のインストール (Ubuntu18.04LTS)
  • ルーティング
  • 見た目を美しくしてみましょう
  • NAT
  • 三目並べ – 2.〇×を交互にゲーム盤に入るようにしよう
  • カート内のアイテム個数を変更
  • 三目並べ – 3.勝敗がつくようにしよう
  • EC2からS3へ自動でぽいぽいアップロードするスクリプトの作成
  • 三目並べ – 4.「スタート」「リセット」ボタンをつけよう
  • 三目並べ – 5.先攻後攻を決めて、コンピュータ対戦にしよう(前編)
  • カートの設置
  • Ruby on Rails を MySQLでセットアップ
  • レイアウト調整
  • 機械学習入門者向け Support Vector Machine (SVM) に触れてみる
  • AWSアカウントの作成と必ずやるべきセキュリティ対策
  • VLAN
  • テスト
  • 機械学習を用いた画像分類
  • Ruby on Railsによる簡単なウェブアプリケーション
  • 正規表現とパイプ
  • 機械学習エンジニアに必要なスキル
  • Ubuntuの設定
  • PostgreSQL Setup
  • REDIS
  • Amazon EC2 インスタンスの初期設定をしよう
  • Pythonの設定
  • GNS3のセットアップ
  • viエディタ
  • AWSのEC2インスタンスでWordPressブログを公開してみよう
  • Pythonでデータベースを操作する
  • Python2.7とOpenCVのインストール
  • ファイル操作コマンド
  • OpenCVのテストプログラム
  • グループとユーザー
  • Pythonで画像を分類するプログラムを作成する
  • AWS CLIをインストールしてコマンド操作しよう
  • Virtualisation and Container (仮想化とコンテナ) – Ansible, Docker and Kubernetes
  • Windows Server 2012 R2 Hyper-V
  • 困った時に使うコマンド
  • PacketTracerのセットアップ
  • 一般グループのユーザーとグループ
  • AWS Route 53を使って独自ドメインのWebページを表示させてみよう
  • プライバシーポリシー
  • VMware ESXi サーバー構築
  • 三目並べ – 6.先攻後攻を決めて、コンピュータ対戦にしよう(後編)
  • フロントエンド開発のための環境構築
  • フロントエンドのデモンストレーション
  • APIのデモンストレーション
  • CISCO 1800ルータセットアップ
  • ファイル検索コマンド
  • ESXi – Switchの追加とVLAN
  • 質問
  • 仮想化環境のディスク容量を拡張する
  • ユーザー権限とアクセス権
  • 三目並べ – 0.導入
  • テキスト処理
  • ESXi - VyOS
  • データベースへのデータロード
  • 機械学習入門者向け Naive Bayes(単純ベイズ)アルゴリズムに触れてみる
  • CCNA
  • ESXi – 小規模ネットワーク 構築
  • ファイル管理
  • 機械学習入門者向け ChainerRLでブロック崩しの学習
  • AWS CLIを使ってEC2のファイルをS3へアップロードしよう
  • CSV import & export – Node.js, mySQL – 1
  • 機械学習入門者向け ランダムフォレストによる Kaggle Titanic生存者予測
  • NodeJSでWebアプリケーション開発 – Socket.IO編
  • CSV import & export – Node.js, mySQL – 2
  • PCからルータ、スイッチへのSSH接続設定
  • 【Python入門】Python Numpy チュートリアル
  • SQL 便利な関数
  • PostgreSQLによるデータ分析
  • 機械学習入門者向け 分類と回帰の違いをプログラムを書いて学ぼう
  • NodeJSでWebアプリケーション開発 – React編
  • Pythonによるマルチスレッドプログラミング実践
  • Certbotを使ってSSL証明書を発行し、HTTP通信を暗号化しよう
  • DockerとApacheを使ってWebサーバーを構築しよう
  • NodeJSでWebアプリケーション開発 – React編
  • Ruby on Rails インストール
  • AmazonEC2とVPCでネットワークとサーバーを構築しよう
  • AWS入門者向け 初心者が最初に理解すべきEC2とVPCの基本的な用語解説
  • Linuxとは
  • Pandasによる構造化データ分析
  • カート機能作成
  • Ruby on Rails Academy
  • ショッピングアプリケーション作成
  • ダイナミックルーティング
  • PostgreSQL – Python – Apache – Bootstrap
  • 三目並べ – 1.ゲーム盤を作ろう
Home Academy NodeJSでWebアプリケーション開発 – Socket.IO編

 

導入:Websocketとは

Socket.IOはWebsocketを用いたライブラリです。

WebsocketとはHTTPのように通信規格の一つで双方向の通信を可能にしました。

これにより従来のHTTPベースでの通信では不可能だったサーバーサイドからクライアントサイドに情報を送ることがWebsocketでは可能になりました。

つまりHTTPではクライアントサイドからのリクエストがあった時しかサーバーサイドからクライアントサイドに情報を送ることができなかったところを

Websocketではサーバーサイドからも必要に応じて情報を送ることができるようになりました。

今回はSocket.IOというライブラリを使ってWebsocket方式の通信を実装します。

※今回のタスクは前回の内容を完了させていることを前提としています。

そちらがまだ終わっていない方はこちらへ

NodeJSでWebアプリケーション開発 – Express編

アクティビティ

今回のアクティビティは前回作成したReactとExpressのアプリケーションに機能を追加するものです。

1:フロントエンドでのSocketの実装

(1-0)下のアクティビティの内容が全く腑に落ちない場合はまずSocket.IO公式のチュートリアルをやってみましょう。

1-1 Reactのアプリケーションの階層で以下のコマンドを実行します。

npm install – save socket.io-client

1-2 App.js のなかでソケットを初期化しましょう。

const socket = io(apiURL);

サーバーからの通信を受け入れる準備をします。

const socket = io('http://localhost');
socket.on("hello_world", data => console.log(data))

2:バックエンドでのSocketの実装

2-1 ExpressアプリケーションにSocket.IOのサーバーサイドモジュールをインストールします。

Expressのアプリの階層で

npm install – save socket.io

を実行します。

2-2 ソケットを初期化する

注:今回のバックエンドアプリケーションはExpressジェネレーターで作成しているのでシンプルなExpressのアプリケーションと若干Socket.IOの使い方が異なります。

ExpressジェネレーターでのSocket.IOの使い方は以下の記事を参考にしてください。

https://stackoverflow.com/a/28325154/10418128

その後、app.jsのなかに以下の行を追加してください。

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秒に一回実行しています。

JavaScript: setInterval

3:サーバーサイドでの定期的なデータの更新

3-1 サーバーから送られるデータの件数を10件に変更しましょう。

3-2 setIntervalメソッド内で3秒に一度, 表示されるデータの開始と終了のインデックスを1増やすようにしましょう。

例:0~10 -> 1~11 -> 2~12のようにインデックスを変化させましょう。

3秒ごとに毎回異なるデータが表示されるようになります。

完成すると以下のようになります。

これが終わったらSocket.IOでの通信でもフィルター機能を使えるようにしてみましょう。

あなたも、Avintonでこのような最先端技術に日常的に
取り組んでみませんか?

優秀なエンジニアの成長を導きながら、AIやビッグデータなどの最先端技術を活用していくことが私たちのビジョンです。
Avintonの充実した技術研修でスキルアップを図り、あなたのキャリア目標を達成しませんか?

採用情報

採用情報

採用情報

Search

タグ

AI AI導入 Avinton Academy CSR活動 Deep Learning DX LPIC Python Ruby SDGs Webエンジニア イベント インタビュー インフラエンジニア ウェビナー エンジニア オンラインセミナー サーバーエンジニア システム開発 セミナー データサイエンス データベース データ解析 ニュービジネス研究会 ネットワークエンジニア ビックデータ ベンチャー ボランティア 勉強会 営業 就活 就職活動 成長 技術インターン 採用 新規事業 横浜 機械学習 求人 派遣 深層学習 画像分類 社員インタビュー 第二新卒 経営者交流会
© 2021 Avinton | All Rights Reserved | プライバシーポリシー
  • サービス
    • Avinton Data Platform
    • エッジAIカメラ
    • AIサービス開発
    • AI画像解析 – 無償PoC
  • 最新情報
  • アカデミー
  • 採用情報
    • Avintonで働く魅力
    • 求人
    • よくある質問
  • 企業情報
    • 会社概要
    • 代表からご挨拶
    • CSR(企業の社会的責任)
  • お問い合わせ
  • 日本語
    • English (英語)
Avinton Japan