[Node.js] Socket.ioで双方向通信チャットアプリを構築 〜 JSおくのほそ道 #005 - Qiita
こんにちはほそ道です。 今回はここまで学んだ技術、コールバック・イベント処理/モジュールの利用/HTTP通信を活用しつつ、 WebSocketによる双方向リアルタイム通信アプリケーションを作ってみます。 目次はこちら WebSocketについてはWikipediaにいい感じにまとまってますが ほそ道が感じた良さを一言でいうと 「ユーザアクション無しにサーバーからクライアントへのpush通信が可能となる」という事ですね。 指定時間にサーバからお知らせ等のアクションも可能となります。 チャットアプリケーションの実装 というわけで作ってみました。 非常にベタなんですが。。 チャットアプリケーションです。 今回はサーバ側とクライアント側の両方に実装が必要となります。 また、新しくWebSocketを実現する為の socket.ioモジュール が登場します。 アプリケーションの骨格が見えるよう、なる
![[Node.js] Socket.ioで双方向通信チャットアプリを構築 〜 JSおくのほそ道 #005 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/31a045e45c094f9ec6d37739fdaf3d6ffac707df/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTm9kZS5qcyU1RCUyMFNvY2tldC5pbyVFMyU4MSVBNyVFNSU4RiU4QyVFNiU5NiVCOSVFNSU5MCU5MSVFOSU4MCU5QSVFNCVCRiVBMSVFMyU4MyU4MSVFMyU4MyVBMyVFMyU4MyU4MyVFMyU4MyU4OCVFMyU4MiVBMiVFMyU4MyU5NyVFMyU4MyVBQSVFMyU4MiU5MiVFNiVBNyU4QiVFNyVBRiU4OSUyMCVFMyU4MCU5QyUyMEpTJUUzJTgxJThBJUUzJTgxJThGJUUzJTgxJUFFJUUzJTgxJUJCJUUzJTgxJTlEJUU5JTgxJTkzJTIwJTIzMDA1JTIwJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz02YjBlNzFhMDFlNDVkNGIxZWZkMzAxNDkyMzllMTVkNw%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBob3NvbWljaGkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTU5NmIwNWE2NTk0MDIzMzEwMzY3MDY3YzQ5ZjY1ZjRh%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4gVW5pcG9z5qCq5byP5Lya56S-%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Dedfc2a32576da046026f7e3c240555d1)
Node.js + Express で作る Webアプリケーション 開発 入門
Node.js だけでは 実践向きではないので、 Express と EJS を組み合わせてもう少し実践で使えるようなサンプルを作ってみました。 Express は Node.js 向けの Webアプリケーション開発フレームワーク で、ミドルウェアのような存在です。 EJS は テンプレートエンジン で、Java で言うところの JSP に近い コーディング ができます。 今回はさらにフロントエンドでよく使われる jQuery、 Bootstrap を組み込んで実装しています。 実用…となるとまだまだ足りない部分がありますが、初心者向けのサンプルとしてはある程度網羅できたものになっているかと思います。 概要 本記事では単純な index ページを返却する Webアプリケーションを作成します。 開発環境は サーバーサイドを Node.js + Express + EJS 、クライアントサイド
[Node.js] Webサーバ＋アプリ構築が速すぎる件 〜 JSおくのほそ道 #004 - Qiita
こんにちはほそ道です。 今回はnodeでつくるWebアプリケーションについて細い道をまさぐっていきます。 目次はこちら プレーンなWebページ しのごの言う前にやってみましょう 下記のjsを作って実行してみます。 var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello Hosomichi!\n'); }).listen(1337, '127.0.0.1'); それではブラウザでアクセスしてみます。 出ました。 Webアプリといっておきつつ、只のページになっちゃっている何も無いページですが軽く引くくらいの速さで作れます。 httpというモジュールをロードして、ポートをリスニングして
![[Node.js] Webサーバ＋アプリ構築が速すぎる件 〜 JSおくのほそ道 #004 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/3a1e33f6235b5a3408e38cd45f98e6b12a3b73f3/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTm9kZS5qcyU1RCUyMFdlYiVFMyU4MiVCNSVFMyU4MyVCQyVFMyU4MyU5MCVFRiVCQyU4QiVFMyU4MiVBMiVFMyU4MyU5NyVFMyU4MyVBQSVFNiVBNyU4QiVFNyVBRiU4OSVFMyU4MSU4QyVFOSU4MCU5RiVFMyU4MSU5OSVFMyU4MSU4RSVFMyU4MiU4QiVFNCVCQiVCNiUyMCVFMyU4MCU5QyUyMEpTJUUzJTgxJThBJUUzJTgxJThGJUUzJTgxJUFFJUUzJTgxJUJCJUUzJTgxJTlEJUU5JTgxJTkzJTIwJTIzMDA0JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1hNjk4M2ZjMDRjNWRkMDU5YTY0ZTgzMGZhYmE3MDY1Yw%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBob3NvbWljaGkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTU5NmIwNWE2NTk0MDIzMzEwMzY3MDY3YzQ5ZjY1ZjRh%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4gVW5pcG9z5qCq5byP5Lya56S-%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D8e83878cd6a16715ce52a6f8ac8a66ed)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
