• 日本語
    • English (英語)
Avinton JapanAvinton JapanAvinton JapanAvinton Japan
  • サービス
    • Avinton Data Platform
    • エッジAIカメラ
      • 自動車ナンバープレート自動認識システム
    • プライベートクラウド
    • AIサービス開発
    • AIカメラ/画像解析無料体験版
  • 最新情報
    • ニュースリリース&イベント情報
    • 技術ブログ&インタビュー
  • アカデミー
    • Avintonアカデミー
    • Academy on Campus
    • Academy with Platform
  • 採用情報
    • Avintonジャパン 採用ページ
    • 求人一覧
    • よくある質問
    • 新卒採用
  • 企業情報
    • 会社概要
    • 代表からご挨拶
    • SDGsへの貢献
  • お問い合わせ

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

  • ルーティング
  • データベースの命名規則
  • 三目並べ – 2.〇×を交互にゲーム盤に入るようにしよう
  • 三目並べ – 3.勝敗がつくようにしよう
  • クリーンコード(Clean Code)
  • 三目並べ – 4.「スタート」「リセット」ボタンをつけよう
  • 三目並べ – 5.先攻後攻を決めて、コンピュータ対戦にしよう(前編)
  • インフラストラクチャー(サーバー、コンポーネント、RAID)
  • 機械学習入門者向け Support Vector Machine (SVM) に触れてみる
  • YOLOv8を用いた物体検出
  • 正規表現とパイプ
  • 機械学習エンジニアに必要なスキル
  • 軽量版Kubernetesディストリビューション – k0s クラスターの構築
  • ファイル操作コマンド
  • グループとユーザー
  • 困った時に使うコマンド
  • 一般グループのユーザーとグループ
  • プライバシーポリシー
  • 三目並べ – 6.先攻後攻を決めて、コンピュータ対戦にしよう(後編)
  • フロントエンド開発のための環境構築
  • ファイル検索コマンド
  • 質問
  • 仮想化環境のディスク容量を拡張する
  • ユーザー権限とアクセス権
  • データ分析基礎 – Part1
  • 三目並べ – 0.導入
  • テキスト処理
  • データベースへのデータロード
  • 機械学習概要1
  • 機械学習入門者向け Naive Bayes(単純ベイズ)アルゴリズムに触れてみる
  • ファイル管理
  • SSHを使用してホストOSからゲストOSに接続する
  • 機械学習入門者向け ChainerRLでブロック崩しの学習
  • 機械学習入門者向け ランダムフォレストによる Kaggle Titanic生存者予測
  • 機械学習概要2
  • データ分析基礎 – Part 2
  • 機械学習入門者向け 分類と回帰の違いをプログラムを書いて学ぼう
  • フロントエンドのWeb開発について
  • ダイナミックルーティング
  • 三目並べ – 1.ゲーム盤を作ろう
  • 【Python入門】Python Numpy チュートリアル
  • Amazon EC2 インスタンスの初期設定をしよう
  • AmazonEC2とVPCでネットワークとサーバーを構築しよう
  • Apache NiFi Exercise
  • Apache NiFi データパイプライン基礎
  • Apache NiFiの環境設定
  • Apache Spark 基礎
  • Apache SparkとApache Zeppelinの概要と環境構築
  • Apache Superset maptoolの使い方
  • Apache Superset 基礎
  • Apache Superset 概要と環境構築
  • Apache Zeppelin 基本機能
  • APIのデモンストレーション
  • Avinton Academy コンテンツガイド
  • AWS CLIをインストールしてコマンド操作しよう
  • AWS CLIを使ってEC2のファイルをS3へアップロードしよう
  • AWS Route 53を使って独自ドメインのWebページを表示させてみよう
  • AWSアカウントの作成と必ずやるべきセキュリティ対策
  • AWSのEC2インスタンスでWordPressブログを公開してみよう
  • AWS入門者向け 初心者が最初に理解すべきEC2とVPCの基本的な用語解説
  • CCNA
  • Certbotを使ってSSL証明書を発行し、HTTP通信を暗号化しよう
  • CISCO 1800ルータセットアップ
  • CSV import & export – Node.js, mySQL – 1
  • CSV import & export – Node.js, mySQL – 2
  • Docker Compose(Nginx + Flask + MySQL)演習
  • Docker Engineのubuntu上へのinstall
  • Docker 概要とセットアップ
  • Docker, Kubernetesの学び方について
  • Dockerコンテナイメージの最適化/ベストプラクティス
  • DockerとApacheを使ってWebサーバーを構築しよう
  • EC2からS3へ自動でぽいぽいアップロードするスクリプトの作成
  • ESP32-CAMのサンプルアプリケーションを実行する
  • 01 – Sparkfun Inventor’s Kit の準備
  • 02 – Sparkfun Inventor’s KitでLチカ
  • 03 ポテンショメータでLEDの点滅間隔をアナログ入力する
  • 04 フォトレジスタで明るさに反応するシステムをつくる
  • 05 LCDに文字列を表示する
  • 06 – BME280とLCDを組み合わせて温度計をつくる
  • ESP32とArduino IDE/PlatfromIOでHello Worldアプリケーションの実行
  • ESP32と超音波センサー HC-SR04 で物体の距離を計測する
  • ESXi – Switchの追加とVLAN
  • ESXi – VyOS
  • ESXi – 小規模ネットワーク 構築
  • Gitとは
  • VS CodeでGitHub Copilotを設定する
  • VSCode リモート開発環境
  • GNS3のセットアップ
  • Kubernetesクラスター上へのOpenVINOモデルサーバーを使用したサンプルアプリケーションのデプロイ
  • Linuxとは
  • NAT
  • NodeJSでWebアプリケーション開発 – React編
  • NodeJSでWebアプリケーション開発 – React編
  • NodeJSでWebアプリケーション開発 – React編
  • NodeJSでWebアプリケーション開発 – Socket.IO編
  • NVIDIA Cumulus VX + GNS3でBGPネットワークのシミュレーション
  • OpenCVのテストプログラム
  • PacketTracerのセットアップ
  • Pandasによる構造化データ分析
  • PCからルータ、スイッチへのSSH接続設定
  • PostGIS exercise
  • PostgreSQL – Python – Apache – Bootstrap
  • MySQLとMySQL Workbench のセットアップ
  • PostgreSQL Setup
  • PostgreSQL – インデックスを利用したパフォーマンス改善方法
  • PostgreSQL – パーティショニングを利用したパフォーマンス改善方法
  • PostgreSQLによるデータ分析
  • postgreSQLへのshp fileのimport
  • Python2.7とOpenCVのインストール
  • Python3.8 と OpenCV のインストール (Ubuntu20.04LTS)
  • Pythonでデータベースを操作する
  • Pythonで画像を分類するプログラムを作成する
  • Pythonによるマルチスレッドプログラミング実践
  • Raspberry Pi 4B のセットアップ
  • Raspberry PiとBME280を使用して温度と湿度、気圧を読み取る
  • REDIS
  • Redux基礎 – 主要な概念と用語
  • Ruby on Rails を MySQLでセットアップ
  • Ruby on Railsによる簡単なウェブアプリケーション
  • SampleアプリケーションのKubernetes上へのデプロイ
  • Scala 基礎
  • scikit-learnとは
  • Spark SQL エクササイズ
  • SparkMLによるKaggle Titanic生存者予測
  • SparkMLによる住宅価格予測
  • SQL 便利な関数
  • Ubuntuの基本設定
  • uhubctlでUSBデバイスのオンオフをコントロール
  • Terraform入門 2 – Terraformのstate管理
  • Terraform入門 1 – TerraformでAWS上にEC2インスタンスを作成する
  • Virtualisation and Container (仮想化とコンテナ) – Ansible, Docker and Kubernetes
  • viエディタ
  • VLAN
  • VMware ESXi サーバー構築
  • Webアプリ開発に欠かせないGoogle Chrome DevToolsの基本
  • Windows Server 2012 R2 Hyper-V
  • YOLOv5を用いた物体検出
Home Avintonアカデミー NodeJSでWebアプリケーション開発 – Socket.IO編
node.js
socket.io logo

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

JavaScript: setInterval

 

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

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

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

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

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

 

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

 

 

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

あなたも、Avintonでこのような最先端技術を習得し活用してみませんか?

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

採用情報

 

採用情報

採用情報

Categories

  • 相互学習
  • 採用
  • 社員インタビュー
  • 学習&資格取得
  • 技術解説
  • イベント告知
  • 学内説明会&講義
  • 産学連携
  • 就職活動
  • イベントレポート
  • その他
  • 技術ブログ&インタビュー
  • mainpage
  • New Graduates Interviews
  • 中途エンジニア
  • カテゴリーなし
  • ニュースリリース&イベント

Avinton SDGs

SDGsへの貢献

Search

タグ

ARoP C Digital Transformation DX Imagine Analysis JVCKENWOOD K0s K3s LPIC-1 Manufacturing Industry Safety Management まつもとゆきひろ イノベーターシップ イベント ウェビナー キャリア キャリアチェンジ サーバー スマートシティ スマートマニュファクチャリング セキュリティ ゼンリンデータコム データベース データ分析 ビックデータ ビックデータ プロンプトエンジニアリング マシンビジョン 中途 共創 動画 地域貢献 地域連携 教師なし学習 新卒社員 暗号化 最新技術 森部好樹 生成AI人材 真鶴町 説明会 資格 農業体験 野田真 開発者
© 2023 Avinton | All Rights Reserved | プライバシーポリシー
  • サービス
    • Avinton Data Platform
    • エッジAIカメラ
      • 自動車ナンバープレート自動認識システム
    • プライベートクラウド
    • AIサービス開発
    • AIカメラ/画像解析無料体験版
  • 最新情報
    • ニュースリリース&イベント情報
    • 技術ブログ&インタビュー
  • アカデミー
    • Avintonアカデミー
    • Academy on Campus
    • Academy with Platform
  • 採用情報
    • Avintonジャパン 採用ページ
    • 求人一覧
    • よくある質問
    • 新卒採用
  • 企業情報
    • 会社概要
    • 代表からご挨拶
    • SDGsへの貢献
  • お問い合わせ
  • 日本語
    • English (英語)
Avinton Japan