Socket.IO

エンジニアの桟(@katapad)です。 PC・スマホだけでなく、さまざまなデバイスとやりとりするにはSocket.ioやOSCのようなリアルタイムメッセージ通信が必要になる。いつもSocket.ioの書き方を忘れるので、2021年におけるSocket.ioの実装例をここに残しておく。 小さなサンプルを作るだけならつまらないので、なんらかの体験のプロトレベルのものを作ることにした。 TOIOをリモートから操作できるアバターにし、会社でマルバツクイズをして、不正解なら落とし穴が発動する。というアナログメタバースを会社ブログ用に作ってました。映像では謎会社バスキュールにまつわるクイズをやってます。…

こんばんは！ 株式会社スマレジ 、開発部のmasaです。 皆さんはリモートワークでBGMかけていますか？masaはかけています。 かけるBGMはそれこそ気分次第なのですが、朝は無印良品の店内BGMをかけています笑 www.youtube.com masaは夜になるにつれて集中力が増していくので、朝は頭が回っていないことが多いです。 それもあって登山とか、生活習慣を整えられそうなことをしてたりするのですが・・・（登山は朝早く出て、体を動かすので自然と早寝早起きになる） 意外とBGMひとつで気分も結構変わるのでバカにできないですよね。 WebSocketの練習の鉄板「チャットアプリ」を作る Web…

概要 WebRTCとReactでビデオ電話アプリを作る番外編第3回です。今回はReactのUIライブラリであるMaterial-UIを用いて外見を整えていきます。 MUIのインストール frontendディレクトリでnpm install @mui/material @emotion/react @emotion/styled でOKです。とても簡単 コードの変更 今回のコードはGitHubのfrontend/src/VideoConnect5.jsに記載してます。 大きく変えたのは以下の部分です。 VideoConnect5.js import React from 'react'; // …

find.cateiru.com どういうもの？ 相手の位置が矢印と距離で表示します。 Waaaaay!のWebアプリ版と思ってもらえればイメージしやすいと思います。 Androidは動作未確認です。多分うまく動かなさそうです。 使い方 待ち合わせを作成を押して新しく待ち合わせを作成します。 ID、もしくはURLを相手に共有します。相手は、トップページからIDを直接入力するかURLにアクセスします。 相手の位置情報が共有され矢印が相手に向き距離が表示されます。 技術的な解説など 相手との距離を算出する 位置情報の取得には位置情報APIを使用しています。位置情報APIでは自身の端末の緯度経度を取…

障害のような障害でないような、そんな症状に対処した記録です。ある日、謎の動作不調が発生しました。

Intro ちょうどタコピーの原罪が流行ってるのでこのタイトルにしたけど結構気に入ってる。 d.potato4d.me この話を読んでの感想とここまで大きくなった Node.js の振り返りをしようと思う。 どんなプログラミング言語であってもみんなから使ってもらって開発者をハッピーにしたいと思ってる。ただ最初は良かったと思ってた機能がなんか古臭くなったり、他にクールな機能を持ったものが登場したことによって徐々に飽きられていき、最終的に他の言語に乗り換えられる。 まぁどんな言語も同じだと思う。C言語だって生まれた当初はすごくクールでみんなをハッピーにしてた。今丁度「戦うプログラマー」を読んでるが…

こんにちは、こんばんは医師崎です。 業務でslack event apiを使ったのでその時に設定した事などをまとめます。 slack event api とは EventAPIは、Slack内で起きたイベントをトリガーに、発生した内容をApp指定のURLに送る仕組みです。インターネット経由でコールバックを受ける仕組みです。Slackが送信元になり、HTTPSで待ち受ける形式です。 slack appの設定 まずは Slack API: Applications | Slack にアクセスし、Create New Appからslack appを作成します。 slack appの権限設定 左側のメ…

はじめに 課題 バグが生まれやすかった 仕様書や進捗が把握しにくかった API仕様書が見にくかった 進捗管理を口頭でしていた DBのER図を書く手間が大きかった コードがいじりにくかった 型がついていなかった モデル層はSQLを直書きしていた Controller層の責務が大きすぎた 解決 バグを生まれにくくする テスト駆動開発する コードレビューを入れる 自動テストとレビューによってブランチを保護する 仕様書や進捗を把握しやすくする API仕様書をStoplightを使ってOpenAPIで書く GtiHubのProjectsを使って、kanbanでタスク管理する dbdiagram.ioを使…

先日、GKE の静的リリースに 1.22 がやってきました。 今回は、Node Local DNS Cache を有効化した GKE 1.22 において、Alpine を使用する際に注意しておいたほうが良い挙動とその検証結果をご紹介します。 以下の検証は、現時点の GKE 1.22 における最新の静的リリースである 1.22.6-gke.1000 を用いて行っています。 Node Local DNS Cache の設定 GKE の Node Local DNS Cache には、アップストリームに基づいた CoreDNS ベースのイメージが使われており、一応 ”-gke.” のようなサフィック…

では、今回はチャットアプリを完成させちゃいましょう！^_^今回作る項目としては以下の通りです。 ・投稿したメッセージをブラウザに表示させる ・デザインを組み込む ・投稿日付を表示させる 投稿したメッセージをブラウザに表示させる ここでやりたいことは、 チャット画面のテキストエリア(メッセージ入力できる四角い箱)にメッセージを入力した後、 「Send」ボタンを押します。すると、入力したメッセージがテキストエリアの下部に表示されるようにします☺それではさっそく作っていきましょう！(^^♪ます、サーバ側プログラムであるapp.jsを開きましょう^_^ 下記の/*ここから追加*/で囲まれている部分を追…

前回「node.jsでチャットアプリ開発③」では、 soket.ioを使ったサーバとクライアントの実装を行いました今回は、前回のプログラムについて解説をしたいと思います^_^✨ サーバ側プログラムの解説 もう一度、実装したapp.jsの内容を見てみましょう！^_^ // Expressをインポート var express = require('express'); const app = express(); const server = require('http').Server(app); // Socket.ioをインポート const io = require('socket.io'…

やあ子供たち。express勉強しているか。おじさんは勉強始めたばかりのくせにすぐこんなふうに上から目線のタイトルをつけた記事を書いちゃうんだからな。気を付けてくれよ。 さて今日はapp.listen()を使ってしまうと、socket.ioが使えなくなるという恐ろしい事実を知ったので緊急メモを残すぞ。 const express =require("express"); const app = express(); app.listen(80,()=>{ console.log("app listening.. "); const socketio = require("socket.io")…

概要 WebRTCとReactを使ったビデオ通話アプリケーションの番外編第1回です。これまでとりあえずうまく通話ができた(localhost内)ので今度はインターネットに公開してみます。 無料で使用できるHerokuというサービスで公開します。 Heroku Herokuは基本料金無料で使用できるクラウドアプリケーションサービスです。 会員登録 ここから会員登録をします。必要事項を入力してください。 デプロイ ダッシュボード右上のNewボタンからCreate New Appを選択します。 このページでアプリの名前と使用するサーバ(アメリカorヨーロッパ)を指定します。 その後のページでは、De…