ホーム > タグ > Javascript

Javascript

[javascript] 「node.jsでwebsocketを試してみたんだ。」のまとめ。

Pocket

Socket.IO: the cross-browser WebSocket for realtime apps.

node.jsで満足していたんだけど、websocketも試してみたいという欲があって、インストールしてみたときのメモ。

このページを見て完結できるように、ちょっと先日のブログを復唱します。

【かんきょう】
 OS:fedora15
 node.js:v0.4.8
 npm:1.0.10
 socket.io:0.6.18 ./node_modules/socket.io

【こうもく】
 1. git のインストール
 2. nvmのインストール
 3. node.js のインストール
 4. npm (Node Package Manager) のインストール
 5. socket.io のインストール
 6. node.js のサンプル(チャットアプリ)を試してみる
 7. websocket(socket.io) のサンプル(チャットアプリ)を試してみる

では、長くなります。。。

1. git のインストール

git(ぎっと)はオープンソースの分散型バージョン管理システムです。ファイルの変更履歴を管理します。
GPLライセンスの下で公開されていて、自己責任の下で、だれもが git を使用することができます。

※”じっと”って今まで読んでたんだな。w ちゅういちゅうい。

# yum install git

2. nvmのインストール

nvm は Node Version Manager のことで、Node.js のインストール、バージョンごとの管理、シェルの環境設定を管理できる。
nvm を使うには github のリポジトリから git cloneする。
# git clone git://github.com/creationix/nvm.git ~/.nvm

3. node.js のインストール

node.jsに必要なライブラリをインストールする必要があるので
# yum install gcc-c++ openssl-devel

github のリポジトリから git cloneする。
# git clone git://github.com/ry/node.git
もしくは
# nvm install v0.4.8

4. npm (Node Package Manager) のインストール

npm というのは、node.js 用のパッケージマネージャー。今回は、socket.IO のインストールで使用。
https://github.com/isaacs/npm のドキュメントに従って作業。

ここで、3にある、nvm install v0.4.8を行ったときに同時にnvmもインストールされます。
# nvm use v0.4.8
「Node Package Managerを使用しますよぉ」と宣言したあとに、
# npm install socket.io

これで、すべて環境が整うはずです。

で、環境を整えた後に試したいのが、サンプル。

1) node.jsのサンプル

node.jsを使ったチャットアプリサンプル
ry-node_chat – GitHub

デモのチャットアプリをダウンロード。
# git clone git://github.com/ry/node_chat.git
※自分がいるディレクトリ上にフォルダが作成。

で、
# cd node_chat
# node server.js

を実行。
ターミナルにはこのように表示される。

Server at http://127.0.0.1:8001/

アクセスしてみてください。
で、ニヤニヤしてください。w

2) socket.ioのサンプル

npmによりインストールしたsocket.ioパッケージのサンプルがある場所は、
node_modules/socket.io/example/に置いてあります。
node_modules/socket.io/example/server.jsというサーバのサンプルプログラムを実際に実行してみる。
(理解したい、知りたい場合は、ソースの中身を見てね。というか、ここのブログを見て。)
Node.jsでWebSocketを試してみる – YutaKikuchiのTechBlog

# node node_modules/socket.io/example/server.js

サンプルのSocketサーバの起動すると、ターミナルには

10 Jun 18:43:07 – socket.io ready – accepting connections

と表示されます。

アクセスするURLは
http://127.0.0.1:8080/
です。

複数のWebブラウザでアクセスしてコメントを投稿してみるとWebSocketのチャットが利用可能。
もちろん、いろんなブラウザからアクセスしてひとりでチャットしました。


【memo】
node.js
Node.js Manual & Documentation(APIマニュアル@日本語)
node.js ハンズオン資料 — node.js hands-on v1.0 documentation
連載インデックス「Node.jsでサーバサイドJavaScript開発入門」 – @IT
【libro】 JavaScriptによるHTML5プログラミング入門/WebSocketによるクライアント=サーバー通信/AjaxからWebSocketへ!


【参考にさせていただいたブログ】
jmblog.jp – さくらの VPS に node.js + npm + Socket.IO をインストールする手順
Node.jsでWebSocketを試してみる – YutaKikuchiのTechBlog
SE奮闘記: node.js, socket.ioをInstallしてWebSocketを試す(Install編)
50行くらいで作るnode.js + socket.ioのサンプルプログラム – 大人になったら肺呼吸
Node.jsとnvmを初めてインストールするときのハマりポイントと対策 – ess sup

次はなにしようかなぁ?

From xxxYukihiroxxx

Pocket

[memo] やってみたかったnode.js のインストールまとめ [fedora]

Pocket

興味深いというか、これをつかった何かができるんじゃないか?って思いながらのインストール作業メモ。
node.jsってなんぞや?とか、いろいろ調べていたところ、図で分かりやすいページを発見したんで、ご紹介。

2010年11月10日現在の記事だけど、丁寧な説明。node.jsとWebSocketの利用シーン « Business RIA 研究所
http://bizria.jp/technical/nodejs-webssocket.html

で、本題。

Node.js
公式サイト:http://nodejs.org/
以下、wikiより引用。

Node.js はUnix系プラットフォーム上のV8 JavaScriptエンジンでイベント化された入出力を扱うフレームワークである。Webサーバなどのスケーラブルなネットワークプログラムの記述を意図している。
Node.jsはPythonのTwisted、PerlのPerl Object Environment、RubyのEventMachineと同様の目的を持つ。 ほとんどのJavaScriptとは異なり、Webブラウザの中で実行されるのではなく、サーバサイドJavaScriptに関連している。 Node.jsはいくつかのCommonJS仕様を実装している[1]。 Node.jsは対話的なテスト用にREPL(Read-eval-print loop)環境を含んでいる。

今回インストールするうえで非常に参考になったブログをご紹介!
ServersMan@VPS node.js のインストール
SE奮闘記 node.js, socket.ioをInstallしてWebSocketを試す(Install編)
感謝です。

では、コマンドライン張りつけ。

まずは、gitから簡単にインストールできるようにyum経由インストールを実行。
# yum install git

これを入れちゃえば、絵の通りになるから簡単にインストールできます。

node.jsのコンパイルに必要なパッケージもインストールする必要があります。

# yum install gcc-c++ openssl-devel

こう書くことで、依存性解決もyum自信がやってくれます。
実際のログはこちら。

# yum install gcc-c++ openssl-devel
読み込んだプラグイン:refresh-packagekit
インストール処理の設定をしています
依存性の解決をしています
–> トランザクションの確認を実行しています。
—> Package gcc-c++.i686 0:4.6.0-9.fc15 will be インストール
–> 依存性の処理をしています: libstdc++-devel = 4.6.0-9.fc15 のパッケージ: gcc-c++-4.6.0-9.fc15.i686
—> Package openssl-devel.i686 0:1.0.0d-1.fc15 will be インストール
–> 依存性の処理をしています: krb5-devel のパッケージ: openssl-devel-1.0.0d-1.fc15.i686
–> トランザクションの確認を実行しています。
—> Package krb5-devel.i686 0:1.9-7.fc15 will be インストール
–> 依存性の処理をしています: libselinux-devel のパッケージ: krb5-devel-1.9-7.fc15.i686
–> 依存性の処理をしています: libcom_err-devel のパッケージ: krb5-devel-1.9-7.fc15.i686
–> 依存性の処理をしています: keyutils-libs-devel のパッケージ: krb5-devel-1.9-7.fc15.i686
—> Package libstdc++-devel.i686 0:4.6.0-9.fc15 will be インストール
–> トランザクションの確認を実行しています。
—> Package keyutils-libs-devel.i686 0:1.2-7.fc15 will be インストール
—> Package libcom_err-devel.i686 0:1.41.14-2.fc15 will be インストール
—> Package libselinux-devel.i686 0:2.0.99-4.fc15 will be インストール
–> 依存性の処理をしています: libsepol-devel >= 2.0.32-1 のパッケージ: libselinux-devel-2.0.99-4.fc15.i686
–> 依存性の処理をしています: pkgconfig(libsepol) のパッケージ: libselinux-devel-2.0.99-4.fc15.i686
–> トランザクションの確認を実行しています。
—> Package libsepol-devel.i686 0:2.0.42-2.fc15 will be インストール
–> 依存性解決を終了しました。

依存性を解決しました

パッケージとしてインストールされたのは以下の通り。
gcc-c++
openssl-devel
依存性関連でのインストールをします。:
keyutils-libs-devel
krb5-devel
libcom_err-devel
libselinux-devel
libsepol-devel
libstdc++-devel

次はnvmのInstallです。
このnvmとは、Node Version Manager のことで、Node.js のインストール、バージョンごとの管理、シェルの環境設定をやってくれるんで、助かります。

# nvm install v0.4.8

ってコマンド入れたら、
-bash: nvm: コマンドが見つかりません
おぉ、、、いれなきゃ。
ということで、

# git clone git://github.com/creationix/nvm.git ~/.nvm

gitで指定されたURLを貼るだけ。
https://github.com/creationix/nvm#readme

ログは以下の通り。

# git clone git://github.com/creationix/nvm.git ~/.nvm
Cloning into /root/.nvm...
remote: Counting objects: 197, done.
remote: Compressing objects: 100% (100/100), done.
remote: Total 197 (delta 104), reused 176 (delta 89)
Receiving objects: 100% (197/197), 26.25 KiB, done.
Resolving deltas: 100% (104/104), done.

で、2011年6月8日現在は最新v.0.4.8なので(これは調べてください。)
node.js

# nvm install v0.4.8
これでインストール完了です。

ログの内容。

Now using node v0.4.8
/usr/bin/which: no npm in (/root/.nvm/v0.4.8/bin:/usr/lib/qt-3.3/bin:/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin:/root/bin)
Installing npm…
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 3874 100 3874 0 0 4668 0 –:–:– –:–:– –:–:– 10330
fetching: http://registry.npmjs.org/npm/-/npm-1.0.10.tgz
0.4.8
1.0.10
prefix=/root/.nvm/v0.4.8

This script will find and eliminate any shims, symbolic
links, and other cruft that was installed by npm 0.x.

All clean!
! [ -d .git ] || git submodule update –init
node cli.js cache clean
node cli.js rm npm -g -f –loglevel error
node cli.js install -g -f
/root/.nvm/v0.4.8/bin/npm -> /root/.nvm/v0.4.8/lib/node_modules/npm/bin/npm.js
npm@1.0.10 /root/.nvm/v0.4.8/lib/node_modules/npm
It worked

本当にインストールされているのかを確認。
# node -v
v0.4.8

無事にv.0.4.8がインストールされているみたいです。

インストールされたのであれば、サンプル動かしたいですよね?ってことで、調べました。
ry-node_chat – GitHub

デモのチャットアプリをダウンロード。

# git clone git://github.com/ry/node_chat.git
※自分がいるディレクトリ上にフォルダが作成されます。

で、
# cd node_chat
に移動して、

# node server.js
を実行すると…

Server at http://127.0.0.1:8001/

おぉ!立ち上がってくれました。
早速ブラウザでアクセスしてみると、出ました。

以下コマンドライン上のログです。

loading index.html...
static file index.html loaded
loading client.js...
loading jquery-1.2.6.min.js...
loading style.css...
static file client.js loaded
static file style.css loaded
static file jquery-1.2.6.min.js loaded
xxxYukihiroxxx join
pinkzircon join hello
year Hey! :)
あああ 近藤 幸裕
漢字もおっけー!
pinkzircon part
pinkzircon join
pinkzircon part
xxxYukihiroxxx part
^C

あ。カタカナやるの忘れた。。。

外部からのアクセス可能にしたい場合は、ポートをあける必要がありますが、ポートを開ける=扉を開けるということになりますのでセキュリティを把握したうえでやらないといけませんね。

node.jsの勉強をするのであれば、こちらを見てください。とてもわかりやすいので、ぜひ。
node.js ハンズオン資料 — node.js hands-on v1.0 documentation

From xxxYukihiroxxx

Pocket

[seminar] WCAN 2009 Autumn SESSION-2 菊池崇さん [study]

Pocket

wcan2009AutumnL

時間作れたんで、昨日の続き。

[seminar] WCAN 2009 Autumn [study]

ではでは、WCAN 2009 Autumn のSESSION-2 菊池 崇さんのお話について。

2)60分できる!実践 HTML5 & CSS3ウェブサイト 菊池 崇さん

印象が残っている内容と、メモ書きしている内容を列挙。

・HTML5の日本の盛り上がりはすごい!海外では日本よりはあんまり盛り上がっていない。なぜなら、仕様がまだFixしてないから。

・W3Cがフィードバックが欲しいため、2009年10月公開と発言!まんまとしてやられたということです。
(今のドラフトはまだ変わる。仕様決まるのは来年2~3月くらい???)

・XHTML+SVG+SMIL+XForm(XHTML2.0は互換性がない。。。)

・Web Forms2+Web Application1.0=HTML5の基本の基本。

・HTML5が生まれた理由は、ブラウザのパーサ問題とエラーのハンドリング問題を解決しようよ!という趣旨。
(HTML5が生まれた理由:「ブラウザのパーサーの問題」、「エラーの扱いの問題」。
Safari、Chrome、Firefox、OperaはHTMLパーサーと、XMLパーサーを搭載しているが、
Internet Explorerは8でもHTMLパーサーのみ。。。やっぱりIEですね。。。)

・Alexsaのトップサイト93%がなんらかのエラーを含んでいる。 (93% invalid)

・DOM(ドキュメントオブジェクトモデル)を基本として、作成すれば、パーサ問題とエラー問題が解決!

・全部、Javascriptを使うと、いろんなことができる!!
(Web Works,Web socket,Web Storage,Web Database,Geolocation API)

コンテンツ・モデル – HTML5タグリファレンス – HTML5.JPから引用。

content-venn

・HTML5について、<h1>がいくつあってもOK。html5にはDTDはない。、<!DOCTYPE html>でスッキリ。
img要素にaltが必須ではなくなった。すげぇー!まぁ必須ではなくなったんで、あってもいいんですよ。
html5

・チェックするならこのサイトが一番いい!
Validator.nu (X)HTML5 Validator

・html5用のreset.cssには、sectionなどの新しい要素に対してはdisplay:block;をかける必要がある。
(なぜなら、モダンブラウザがHTMLの新要素をインライン要素として扱ってしまうため。)

・IE8専用のjavascriptをレミーさんが作ってくださった。その名も、html5.js

・CSS3について、Vender prefixについて要確認!

・簡単に言えば、CSS3だけで、グラデーションや、ドロップシャドーとかができるようになった。あのiPhoneの下側が透明で反射してるやつも可能。
けどね、あれはもう古いデザインだと思うんですよ。ww

・マウスオーバーすると変化するようなアクションも可能。数秒違いで、ぜんぜんイメージが変わってくる。

・Blockで定義しているので、レイアウトの配置を変更することが簡単になった。

最後に、
html5はjavascriptとDOMを勉強しておいてくださいね。
とのことです!

そんな感じですです。

From xxxYukihiroxxx

Pocket

[flash] as3であんなこと、こんなこと [javascript]

Pocket

今のところ、as2で作っていたが、最近になってas3の作品も作るようになってきたが、非公開状態。
唯一、公開しているのが、あのサイトの星が流れてるやつだ。

自分が作ったイラストや画像を組み込んでas3のファイルのみ(つまり、すべて外部ファイルから読み取る方法)で作りこもうとすると、まだまだ工夫が必要。
だから、Flash CS3に頼ってしまうのが現状。

ソースだけでなんとかやりたいと思うが、ムービークリップとかに変換して呼び出すようにするだけで簡単なのだが、歯がゆい状態です。

いつかはFlashDevelopのみで造りこんでいきたいと思っていますが、どうなることやら?です。

とりあえずはhtml5対応可能になるようなひな形作成と同時にスキルアップのために、作りこんでいきたいと思います。
javascriptがメイン。flashはどうする?というのが最大の課題になるわけだが、2010年後半にはフルフラッシュサイトはどうなるのかが楽しみです。

というのは・・・
javascriptではできない動きをflashで動かすのはいいと思うが、javascriptで再現できるのをわざわざflashで作りこむのもどうかと思う。
だから、今後はjavascriptでこんなことできるんだ。みたいなサイトも結構いっぱいあるので、まとめていきたいと思います。

逆に、このサイトjavascriptで出来てるんか!というようなサイトも作りたいと思って先日ブログに書きました。
ひな形は出来上がったので、あとはデザインを作りこむだけです。

そそ、Twitter(iPhoneユーザー)でも話になっている、My Name is Eのアカウントを取得してみました。w

From xxxYukihiroxxx

Pocket

[html5] なんとか作りこんでみたが・・・。[masturbation]

Pocket

「index.htmlだろうが、index.phpでもいいんだよな?」
と質問してみる。

構築中のメモ&めも。

IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS-Opacityテクニック – WEBデザイン BLOG
opacity – 半透明を操るJavaScript – youmos
ThickBox 3.1
大阪でWebのコーディングをしている人のお漏らしF2009年02月
ぺんラボ » XML-RSS(PHPでRSSをパースする)
pearXML_RSSPHP講座
Manual Example for the usage of XML_RSS
Twitterのreplies(返信)をRSSリーダーで取得する fjkktkys blog
ぷぎえもん日記 php:RSSのdcdateとかpubDateタグの日付を処理する
Tak’s Software » Blog Archive » Twitter Board ウィジェット ダウンロードページ
Factory-AJ Blog cron から root へ送付されるメールを停止
Perl・PHP・Javaによるプログラミングサンプル集 - テキストファイルを読み込み出力する

コマンドラインでこれらのリンクをたどっていけば、何がやりたかったのか?いや、これを元にどんなものを作ったのかがわかると思います。

久々にプログラム書いたが、いやぁーActionscriptとは違って、忘れてる部分も多かったです。
これじゃ、システムエンジニアとは言えないなぁと思った今日この頃でした。

次は、これはFlashなの?と思わせるようなサイトを作りこみたいと思います。

From xxxYukihiroxxx

Pocket

Home > Tags > Javascript

Search
Feeds

Return to page top