Web

みなさん、お久しぶりですtatsyです。この記事は、ブログのリハビリも兼ねた記事で、若干内容が薄めです。 気づくといろいろあった2020年ももう終わりで、今年は一度もブログを更新していないことに気付きました (といっても昨年もレイトレ合宿の報告だけでしたが…)。 というわけで、何か記事を書こうと思い立ち、今年何かとお世話になった静的ウェブサイト・ジェネレータについて書いてみようと思いました ...

こんにちはtatsyです。Node.js + Socket.IOの最終回です。 今回は小さな変更ではありますが、前回までで作成したチャットシステムにタイピング中かどうかを表示する機能を追加してみたいと思います。 タイピングの検知 これはNode.jsやSocket.IOではなく、JavaScriptの問題ですが、input上でユーザがタイピングをしているかどうかを検知する機能を最初に盛り込みます。 ここでは最 ...

こんにちはtatsyです。 前回(第3回の記事)の内容はほぼ、僕の趣味でファイル構成を整えただけでしたが、今回は本格的にチャットの機能を拡充していきます。 ログイン情報のemit まず、基本的なところからでユーザがチャットにログインしたり、ログアウトしたりしたときに、その情報をemitして全クライアントに通知する処理を付け加えます。 やることは簡単でsocket.ioのconnectionイベントが発生し ...

さて第3回目の今回は、前回までで作ったチャットシステムを拡張しやすいように、フォルダ構成などを整えます。 おそらく現時点でのファイル構成は次のようになっていると思います。 それでは、早速準備を整えていきます。 ライブラリ配置ディレクトリの作成 現在のコードではindex.htmlに直接JavaScriptのコードを書き込んだり、jQueryの公式にリンクしたりしていますが、あまりかっこよくないので、配置を ...

さて、前回の記事では、node.js (+ express)の環境構築と、チャット画面の出力を行いました。 前回の記事はこちらからご覧になれます。 さて、今回はいよいよSocket.IOにご登場いただき、インタラクティブ・ウェブのドアを叩きたいと思います。 Step 4: socket.ioのテスト まずはローカル環境にSocket.IOのインストールを行います。前回同様に $ npm install --save socket.io とコマンドを打ってpackage.jso ...

こんにちはtatsyです。 つい最近まで6年くらいWebまわりの技術はご無沙汰だったのですが、6年前にはなかった面白い技術が出てきていてるなぁと感じていて、手始めにNode.js+Socket.IOでチャットシステムを作ったのでまとめて記事にしておきます。 第1回の今回はSocket.IOの公式ページにあるChatのでもサンプルをいじってみます。元の記事はこちらです。 Socket.IO — Chat (2014年12月28日閲覧 ...